Creating an Organized React App

Published in

The Startup

11 min readJun 12, 2019

So you wanna create a cool and hip React project? Well, you’ve come to the right place.

React (also known as React.js or ReactJS) is a JavaScript library for building user interfaces. It is maintained by Facebook and a community of individual developers and companies. — Wikipedia (duh).

React is a great JavaScript library that has an amazing community behind it. It is ever-growing and expanding and React is changing the way people all over the world experience the internet.

In this article, I want to show how to create a basic but well organized, structured, and “ready to go” React app. For many (including myself) the end result of this tutorial could be considered a starter, a skeleton or boilerplate to begin a new project.

Prerequisites and Assumptions

A general understanding of programming, web development, and JavaScript.
Latest Version of Yarn for your OS.
Your favorite text editor (I use VS Code or Atom, depending on my mood).
Ideally some Unix-based Shell (I will be using iTerm2 on Mac with a ZSH) and a basic understanding of how to use it.

Creating the Initial App

NOTE: Throughout this tutorial, I would recommend regularly checking to see if errors are thrown in both your terminal and browser.

First let us open up our preferred shell, for me, I’m using iTerm2 on Mac, if you are on Windows you may be using Git Bash, and if you’re using Linux I’m just guessing you know your way around a terminal.

Since we have Yarn installed it’s quite easy nowadays to start a react project. Though let’s just check that we installed Yarn correctly. In your terminal run:

yarn -v
1.15.2

We should see the above, the number outputted is the version of yarn we installed. If some error or ‘command not found’ is outputted your installation or general configuration is messed up.

Now, let’s get this project started. Navigate to where you want the project to live and run the command:

yarn create react-app my-react-app

This will create the initial React project. Let’s run this app now and see what it looks like. Move into the project folder we just created and run the app.

cd my-react-app
yarn start

If we go to http://localhost:3000/ in a browser we can see the initial react app created. It should look like something like this.

Congrats, we did it! But this app is boring and we haven’t really done anything to make it our own yet. So lets mess around with it.

Making A Well Structured App

Before we actually start digging in and coding let’s get some basic organization done. Our current file structure probably looks something like this:

├── README.md
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
├── src
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   └── serviceWorker.js
└── yarn.lock

We’re going to initially create three folders inside of the src folder.

components — In this folder Components will be created, we can define components as reusable and independent UI pieces.
pages — Here is where we will create Pages for this web application, both static and dynamic. The distinction between components and pages is important. Pages will be the entire view a user will see. We create components so it is easier to make pages and so that we have DRY code. Generally, we use components to build and organize pages. Note that pages themselves are essentially components as well.
services — Our service folder is where we will create many Services that will allow us to fetch, transform, and store data. We will create services to handle different functionality within our application.

Either make these folders in your text editor or terminal. Now our src folder should look like this:

├── src
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── components
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   ├── pages
│   ├── serviceWorker.js
│   └── services

Now we have a basic structure to follow before we start coding away. Something else we’ll do before that is just cleaning up all of the boilerplate stuff React initially created for us.

First, we can remove the logo.svg since we really don’t need a large React logo. Next, open up App.js and see the code inside, it should look something like this:

We’re going to remove a bunch of the contents here to make out App.js look like this:

If we check our app now it should hopefully look like this.

While this is less styled and animated than the initial app, we can now begin creating something of our own.

Let’s Get Building

Our Router

We’re going to install and set up the router for our application. This will allow users to easily navigate through pages within our app. Let's stop our development server and in the project root directory run this install:

yarn add react-router-dom

This package is React Router which for a while now has been a standard for React. With this installed we can configure it in our application. Let’s look at our index.js file:

We’re going to wrap our App component with a router, specifically a Browser Router, you can look more into the benefits of a Browser Router on React Router’s documentation. After we update out index.js with our router it should look like this:

Great! Now our router is configured for our app! Let’s create some components to make our lives easier.

Some Basic Components

First, we’re going to create two components in our components folder:

├── components
│   ├── Header
│   │   └── Header.js
│   └── Main
│       └── Main.js

Notice that I created a folder for each component then added the JavaScript file within it. This will come in handy later.

Our Main component will be where different pages will end up living, while our Header component will exist on every page (at least for this app).

Here I’m going to make function-based components because they are lightweight and quick to make (learn more about function-based components and their counterpart classes here).

But before we create these components lets update our App.js:

See we added both components to our App component. Now let's create the Header and Main so we don’t have errors:

Let’s look at our application now:

This looks pretty good now, but it still doesn’t do much. Let’s try and create pages and navigate between them.

Creating Pages

For the sake of this tutorial, I’m only going to create two different pages to navigate: a Home page and a User template page. Our Home page will display a list of users that we will retrieve from some API (in this case https://jsonplaceholder.typicode.com/users/). When one of those users is clicked on we will navigate to the User template page where their data will be displayed.

First, we will create the bare-bones structure of these pages and create our routes for each. I opted to use class-based components for the pages, and I tend to use class-based components (over function-based) for pages since many pages often need to manage state. Learn more about state here.

So after we create our files our structure will look like this:

├── pages
│   ├── Home
│   │   └── Home.js
│   └── UserPage
│       └── UserPage.js

Notice again I created folders for each page much as we did with the components earlier. Once these are created let's add our initial code to each page. Both will generally be the same but notice the slight differences between the two:

A few things are happening in both of these pages. We are initializing the class’ constructor where we define our initial state. Next, our componentDidMount function is being called and will fire when this page mounts. It will log the page name in our browser console(as well the user id for our User Page). Lastly, our render function is where our actual markup will be displayed. I linked definitions of each of these methods, please look at these to further understand how they work.

Finally, let's update our Main component so we can correctly route our pages.

Inside our Main component, we create two routes, one for our Home Page and another for our User Page (notice that this path take an id variable). Now we can create links to each page!

Ensure that after doing all of this your project is building correctly and check out your pages (http://localhost:3000/ and http://localhost:3000/user/1)!

Creating a Service and Implementing It

When we started creating pages we said they would be displaying some data that we retrieved from somewhere. To do that we are going to create a service that will handle our requests and then link them within our pages. To start off we’ll install Axios, a popular HTTP Client for React.

yarn add axios

Restart your development server and now we can easily create this service. Same drill as before let's create a folder for the service called UserService and a matching JavaScript file inside.

└── services
    └── UserService
        └── UserService.js

In this file, we can create the actual request for our application. We’ll use the Axios documentation to see how their package handles requests and then let's retrieve some data! As I said before we will be getting data from https://jsonplaceholder.typicode.com/users/ (you can visit that link to see the response we’ll be getting). Below I created some functions to make GET requests to this endpoint.

Here I created a class that will hold all functions regarding users. Two functions were made, one for retrieving all users and another for just one given an id.

Now we can actually implement these methods into our pages and display the data retrieved. Here is our updated Home Page:

See that here we are initializing our UserService in our constructor, then retrieving all the users when the component mounts, and finally displaying each user in our render (and renderUsers) function. Notice that the renderUser function was created, I did this so that later our render function is less cluttered.

We can update our UserPage too:

This page is pretty similar to our Home Page but notice some key differences. Notice our constructor is taking in props, we do this because we are bringing in properties into the component such as the URL param id.

After all of our changes build and we ensure we have no errors lets check out our app!

Navigating to Home Page and clicking to User Pages

This is pretty cool! We have created a multi-page application that retrieves data from some other place! And to top it off our code is well organized!

Everyone's Favorite Styling

While I don't want to spend a ton of time on styling I think its import to some while we are here. Starting off we got to create our files, here is our updated file structure:

├── components
│   ├── Header
│   │   ├── Header.css
│   │   └── Header.js
│   └── Main
│       ├── Main.css
│       └── Main.js

I hope now you see why we initially created subfolders for each component. By doing the can local scope our styling, this allows our application to be even more organized, especially when it scales.

NOTE: Other things may end up being added in these subfolders such as Test for components, pages, or services.

Here’s the styling that I added:

While this is in no way ideal styling and CSS convention it will get the job done for now. Too actually implement the styles we also have to import these files in each component. See below:

This was easy enough! I also went and created a CSS class called “link” if you noticed above. I added this to the Links within our Home Page

Wow! That wasn’t much styling at all but let's look at our application now! Below is our Home Page:

And here is our User Page:

This looks great! Its pretty simple but it gets the job done. Obviously more styling can be added but for now, this will do.

Wrapping Up

Look at that! We’ve created a simple yet complex React web app that does some cool things! Though this tutorial just covered the initial basics to create a React application. But by creating this application in the way we did hopefully it is easy to add, change, and delete features are our app scales. Adding in tests with Jest, SCSS, TypeScript, etc. are all things we could do to improve our application we just created (and maybe one day I’ll get around to making a tutorial for those).

The code created for this application is available on my GitHub for your convenience! I honestly clone this project so that I can start up React projects faster and feel free to do the same!

ReesMcD/react-starter

A Basic React Starter. Contribute to ReesMcD/react-starter development by creating an account on GitHub.

github.com