React JS sample project step by step

In this article we are going to learn step by step, how to create a sample project in react js. We will start from installation of create-react-app library and move upwards to the deployment of files on server. This writing will include a number of code examples and live demos. Let’s start.

Burger Ordering App

We will create a Burger creating and ordering app. In this app, user could customize their burgers like amount of cheeze, tomatoes, meat, lettuce etc. and then place an order. The major functionalities that we will cover, are –

1. Dividing app into reusable functional components.
2. States and Props.
3. Creating HTML forms in Reactjs.
4. Making a server API call.
5. Displaying images and other UI using JSX.
6. Rendering DOM.
7. Showing lists using pagination.
8. And many more…

I decided to choose this project because it is covering many basic functionalities which you will require in nearly all of your projects. This will show you the way how react ecosystem works, what errors you might encounter and how it is different from Vanilla JS.

Step 1: Installing create-react-app

For any react project, the first step is to install create-react-app npm package (if not already installed). This package does all the initial setups for a react app.

Consider it as a stage decorator where actors will perform. Without stage, actors can’t perform. So, you have two options – Either give the stage decoration job to 10 different people for 10 different tasks or you can hire a single contractor who will handle the whole job. Similarly, you can manually setup the environment by yourself or you can use create-react-app utility. But why take the load when package can do all the setup for you?

Note: You should have node installed on your computer. Download node from here.

Syntax to install create-react-app –

npx install -g create-react-app

If you want to learn more about this syntax, then follow this guide – How to use React?

Step 2: Creating Burger Project

After installing create-react-app package, we can use it for creating our project. As I said in previous section, we need a stage with all setup. So run this command –

npx create-react-app burger
cd burger
npm start

It will create a directory, burger which is our project. All the files, resources, libraries, packages etc. will be in this directory only. Using cd we can enter into our project directory burger. npm start will run the local server and we will be able to see our app on browser. Currently it will show a default page created by reactjs.

Step 3: Understanding the code flow

For a good code base, you need to know when and how should the code be refactored. Breaking a code into reusable components is an art which you will master with experience. There are no predefined rules for it and every project demands a different approach.

In our project, we are going to create a burger. The very basic things are its ingredients. So, let me ask you, what does a burger contains? You know the answer and I am writing down the ingredients –

1. Upper Bread
2. Lower Bread
3. Tomatoes
4. Lettuce
5. Cheese
6. Potato Cutlets
7. Meat
8. Other stuff..

Being a vegetarian and animal lover, I won’t include meat in this project.

The second thing is, how a burger is prepared? Well, Lower bread – lettuce – tomatoes – cheese – tomatoes – lettuce – upper bread. Is this correct? You won’t agree with me, I am sure. Because its all about preference and that’s why our burger needs to be customizable according to the choice of customers.

To create something customizable, we need to break it into separate components so that we can call them whenever they are required. Here we need to stack different burger ingredients on top of each other according to customer’s preference.

I came up with a folder structure like this –

Since App.js is our opening file, so we will keep it small. From here we will command other components as how to behave. The whole burger preparation code is separated in Burger folder. For all ingredients we will have separate components like – BreadLower.js, BreadUpper.js, Cheese.js, Lettuce.js and Tomatoes.js.

There is another file CreateBurger.js which will stack up different burger ingredients and return a desired burger. It will get the command from App.js.

Step 4: Writing code files

Let’s start with the components in the lowest hierarchy first. That is, the ingredients.

BreadUpper.js

import React from "react";
import Classes from "./styles/Bread.module.css";

export default function BreadUpper() {
  return <div className={Classes.BreadUpper}></div>;
}

BreadLower.js

import React from "react";
import Classes from "./styles/Bread.module.css";

export default function BreadLower() {
  return <div className={Classes.BreadLower}></div>;
}

Bread.module.css

.BreadLower {
  width: 100%;
  height: 40px;
  border-radius: 5px 5px 12px 12px;
  background-color: #ff6600;
  border: 2px solid #dc9029;
  margin: auto;
}

.BreadUpper {
  width: 100%;
  height: 150px;
  border-radius: 100% 100% 12px 12px;
  background-color: #ff6600;
  border: 2px solid #dc9029;
  margin: auto;
}

These components will return div with css styles which will give them look and feel of burger breads. They will look like this –

Similarly, code for other ingredients are –

Cheese.js

import React from "react";
import Classes from "./styles/Cheese.module.css";

export default function Cheese() {
  return <div className={Classes.Cheese}></div>;
}

Cheese.module.css

.Cheese {
  width: 100%;
  height: 10px;
  background-color: #ffcc00;
  border-radius: 5px;
  margin: auto;
}

Lettuce.js

import React from "react";
import Classes from "./styles/Lettuce.module.css";

export default function Lettuce() {
  return <div className={Classes.Lettuce}></div>;
}

Lettuce.module.css

.Lettuce {
  width: 100%;
  height: 15px;
  background-color: #7caf50;
  border-radius: 3px;
  margin: auto;
}

Tomatoes.js

import React from "react";
import Classes from "./styles/Tomatoes.module.css";

export default function Tomatoes() {
  return (
    <div className={Classes.group}>
      <div className={Classes.Tomatoes}></div>
      <div className={Classes.Tomatoes}></div>
    </div>
  );
}

Tomatoes.module.css

.Tomatoes {
  width: 100%;
  height: 18px;
  background-color: #ff2a2a;
  border-radius: 12px;
  margin: auto;
  border: 2px solid #ee2a2a;
}

.group {
  display: flex;
  padding: 0 30px;
}

Code for Tomatoes.js is bit different because tomatoes are small and we can have 2 or 3 slices at one level.

This is it for the ingredients part. You can add more items this way. Now, let’s create the burger.

This is one of the sample hierarchy –

Upper Bread
Lettuce
Tomatoes
Cheese
Lettuce
Tomatoes
Tomatoes
Lower Bread

In terms of components, it will look like this –

<BreadUpper />
<Lettuce />
<Tomatoes />
<Cheese />
<Lettuce />
<Tomatoes />
<Tomatoes />
<BreadLower />

One of the important point to note here is that the upper bread and lower bread never changes their positions. For all kinds of burgers, the upper bread stays at top and lower bread remains at bottom. So, in our code we can fix their position.

Since the ingredients are dynamic, we can let App.js send an array of desired hierarchy as prop. Something like this –

burgerStack = [‘Lettuce’, ‘Tomatoes’, ‘Cheese’, ‘Lettuce’, ‘Tomatoes’, ‘Tomatoes’]

Now comes into picture, CreateBurger.js which accepts burgerStack array from App.js and accordingly stack up ingredients of burger.

CreateBurger.js

import React from "react";

import BreadLower from "./BurgerComponents/BreadLower";
import BreadUpper from "./BurgerComponents/BreadUpper";
import Cheese from "./BurgerComponents/Cheese";
import Lettuce from "./BurgerComponents/Lettuce";
import Tomatoes from "./BurgerComponents/Tomatoes";


export default function CreateBurger(props) {
  const BurgerStack = props.burgerStack.map((item, index) => {
    switch (item) {
      case 'Cheese':
        return <Cheese key={index} />;
      case 'Lettuce':
        return <Lettuce key={index} />;
      case 'Tomatoes':
        return <Tomatoes key={index} />;
      default:
        return null;
    }
  });

  return (
    <div>
      <BreadUpper />
      {BurgerStack}
      <BreadLower />
    </div>
  );
}

This component runs a loop over props.burgerStack and check for each element and return the matching element’s component.

Now remains the App.js which is creating the burgerStack array and passing as prop to CreateBurger component.

App.js

import React from "react";
import CreateBurger from "./Burger/CreateBurger";

export default function App() {
  return (
    <div className="App">
      <CreateBurger
        burgerStack={[
          'Lettuce',
          'Tomatoes',
          'Cheese',
          'Lettuce',
          'Tomatoes',
          'Tomatoes'
        ]}
      />
    </div>
  );
}

    Tweet this to help others

You can see that App.js is very concise. If you want to change the burger, you need only to change the elements of burgerStack array. Similarly, we can create functionality for placing orders, drag & drop burger creation, keeping history etc. To keep the code readable, maintainable and clean; you should separate different functionality in their groups like we did for burger. We kept it separate from App.js.

Hope you learned something from this tutorial. We will try to add more functionality here in future. Share it with your followers on twitter.

Live Demo