Some thoughts on the best practices in building a React app (1/3)

React is awesome. It is a UI library open sourced and maintained by a team from Facebook that helps developers to build complex and data-driven front-end applications.

One of the many good things about React is that it allows developers to pick whatever tools, workflows, architectures and setups they please when starting a new project, whereas other front-end solutions like Angular makes those decisions for you (which is why Angular is a framework not a library).

I have developed over hundreds of full-stack React applications in the past two years since I started using React for my freelance projects. I have come to the realization that in React, a combination of the right tools and setups can maximize your productivity and help you write cleaner code and make future maintenance a lot easier. Which is why I have put together a list of best practices (in my opinion) that will help both beginners and people who are still in the search of the most efficient work flow to speed up and organize their next React project.

Without further ado, let’s start talking code.

Basically every project ever

  1. Pages
  2. Routes
  3. Static content that occasionally change (due to copy updates)
  4. Components that’s reusable on different pages
  5. Components that’s specific for a page
  6. Stylesheets
  7. Utility methods
  8. HTTP/API requests
  9. Useful and popular libraries

How to start

Almost every React tutorial on YouTube recommends using webpack or other build tools to start your React app from scratch, but that takes too much time. For a freelance project what’s more important is delivering a product in the shortest amount of time possible.

I recommend start with CRA (Create React App), start from here:

After you have created your boilerplate React app, you should start structuring your folders.

Pages

First thing first is to analyze your project, start with a plan, or a tree structure. We’re going to use the example of an E-commerce website that sells clothing. (very complicated in nature).

Almost every E-commerce website follows this structure:

  1. Home page
  2. Collections page (Shoes, Pants, Shirts, Coats)
  3. Product page
  4. Login/Signup Page
  5. Account Profile Page
  6. Shopping Cart Page
  7. Checkout Page
  8. Other static pages (About, Contact, Locations, 404 error page etc.)

Start by creating a directory called /pages and put these routing logic into this directory like so:

Folder structure

Each one of these folders should contain an index.js that serves as the page level component. All page-specific components will also go into their respective page folder.

For example, if I want to have a carousel and a promo banner on my landing page, and these components will only show up in my landing page, I would create them inside of the landing page component:

Notice that the index.js is lowercase and the other two components are uppercase, this is because keeping index.js lowercase will make it the default file that the Landing page exports.

Let’s say you are exporting LandingPage class from this index.js file, when you need to import the page component from this folder, all you need to do is write:

import LandingPage from './pages/Landing';

Doing this will save you tons of time later on when you need to import page level components in other files for routing or testing.

The Banner.js and the Carousel.js components will only be imported into the index.js that’s in the same folder. This also makes testing and importing easier:

in index.js:

import Banner from './Banner';
import Carousel from './Carousel';

in Landing.js.test:

import Banner from '../pages/Landing/Banner';
import Carousel from '../pages/Landing/Carousel';

Routing

Routing should be done using react-router . This is the most sophisticated browser routing library for React and it’s easy to set up too.

Your App.js in the root directory isn’t going to be doing a lot of work, so we’re going to throw the routing logic in there.

This is a very minimal routing setup, you can find more options here:

Static Content (that needs occasional updates)

For static pages like /about or /locations , it’s always a good idea to keep the copy in a separate file and utilize loops whenever you can.

For example, for the locations page, there are 5 locations around the US that includes address, city name, phone number and email. You can structure the content data like so:

Put this in a new file called data.js in a new folder called utils created in the root directory,

Folder structure example

then import it and use it like so:

This way of rendering static data makes copy updates way easier if you ever have to come back to it.

This is it for Part I, please like and share this article if you find it useful. Leave a comment if you have any thought you want to share or more efficient ways to spin up a React project.

Part II to come: components folder, stylesheets and HTTP requests etc.