Step 1: Project set up

Link to the repo for step 1:

To start we are going to be using the create react app project as the base for our React app. You can create a new react project by typing:

npx create-react-app your-project-name

The repo for create react app is here :

When you type “npx create-react-app your-project-name” on your command line what that will do is create a new folder, inside of your current folder, and make a new project called your-project-name.

If you are already in the folder you want to have your react app in, then you can type the command:

npx create-react-app .

What the “.” Does is indicate that you want to create the react app inside the current folder which you are typing the command.

Once the create react app is finished initializing, you should have a standard create react project that you can run with

npm start

Or

yarn start

Delete some files

You don’t need all the files that the project comes with. You can delete App.css, App.test.js index.css, and logo.svg

Update the files that were importing the files you just deleted.

At this point your project should look like the master branch in this repo:

I only have App.js, and index.js and in App.js I just have a paragraph tag with “Hello world” in it.

Adding react router dom and Bulma

In this project we are going to have 2 pages, the index page (with a component called Main.js) and a profile page (with a component called Profile.js).

To get things going, let’s get a hello world printed on 2 new components we will make called Main.js and Profile.js.

But first since we need to handle routing in this project let’s add a new dependency called “react-router-dom” to handle the routing. And while we’re adding new dependencies let’s also add “Bulma” which is a light weight css framework that I am a fan of.

Run the command

yarn add react-router-dom bulma

Or the npm equivalent.

Now let’s add these new dependencies in our project.

If you add a css module like bulma or bootstrap or materialize to your project, how you import it is just by adding the files you want to a top level component in your react app.

If you open the node_modules folder and find bulma, you’ll see that it’s like any other node project with a package.json and other files.

But we only care about the css file that it comes with.

There is a css folder and in that we want the “bulma.min.css” file.

Importing this css file is very simple, you just type:

import "bulma/css/bulma.min.css";

So in your App.js file (the highest level component which will serve as the main entry point for all the other components) add that line and all of the components contained in App.js will be able to use bulma classes.

Now let’s add routing.

For the react-router-dom package we will only be using 2 components to add routing to the App.js file.

Add the line:

import { BrowserRouter as Router, Route } from "react-router-dom";

To your App.js file.

App.js will now serve as the place where the routes will lie. To do this we want to have the top level component that gets returned from App.js to be the Router component, and in that we will add the routes.

App.js should now look like this:

<Router> <Route path="/" exact component={Main} /> <Route path="/profile" component={Profile} /> </Router>

What the Route component is doing is telling the React app how to render pages. Since users expect websites to work based on what url they’re visiting, it makes sense to structure your React app in that way.

When users visit the “/” route which is the entry point to your website, show the Main component. The exact prop is added because if you don’t add that, then “/profile” also counts as “/” because “/profile” contains “/”. We only want to show the Main component when users are only on “/” which is why the exact keyword is added.

When they go to the /profile route, then show the Profile component.

Now let’s create those components:

In the src folder create 2 new components, Main.js and Profile.js

Make these functional components which just print “Hello world”

Import these new components into your App.js file and this should make your app run.

Now let’s add very minimal styling to this project so that it doesn’t look amateur.

Since we are using Bulma we only need to add the class names we want on what elements.

We also want to add buttons, one to show the notification, and one to switch pages.

So the html layout of Main.js and Profile.js would look something like a div containing a text element and two buttons.

Since the div is a section within this web app, let’s add the section class from bulma to this element.

Since the text element is a title, let’s add the title class from bulma to that element.

Since the button is a button and we want it to look decent with minimal effort let’s add the button class to the button.

We also want to be able to switch to the other page inside each component so we need the Link component from react-router-dom which will add navigation ability to our components.

Link is imported like:

import { Link } from “react-router-dom”;

Now your main/profile component should look something like this:

<div className="section"> <p className="title">Hello from main.js</p> <button className="button">Show notification</button> <Link className="button" to="/profile"> Profile </Link> </div>

Now your code should be similar to the step-one branch in this repo

It should also look like this:

The app at the end of step 1

Recap