Creating A Food App in 30 Minutes Using React JS With Redux

This article provides step by step guidelines to create a food app using React JS with Redux. You can check code here if you want more redlines for the same.

Let’s jump into the example

Step 1 : Create React App

For creating a new project in react JS let’s hit command npx create-react-app food-app in terminal. After that move to food-app folder and type npm start.

Step 2 : Install required packages

Install following package in your react app

1. antd
2. redux
3. react-redux
4. react-router-dom
5. styled-components

Step 3 : Files and Folders

Now, Create the folder structure as below. I assume that you have a basic idea about react folder structure. So let’s start….

1.Component

Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.

Create a component folder that contains AppHeader.js which defines the header component of the app.

2.Container

Container is an informal term for a React component that is connect to a redux store.

Create a container folder that contains FoodContainer.js and index.js in which there is all food details and add to card will show.

• Click here to view FoodContainer.js
• Click here to view index.js

3.Routing

Routing allows us to build a single-page web application with navigation without the page refreshing as the user navigates.

Set up the router in App.js using browserRouter component.

<Route exact path=”/” component={<TheContent>} />

4.Redux

Redux is the global state manager for the React app. It connects the component to each other and shares the data. Redux has mainly three component actions, reducer, and store.

Now create an reducer folder and inside create index.js file which contain all reducers and AppDetail.js which has action to perform.

Click here to view AppDetail.js

5.Styling the component

Ant design contains a set of high quality components and demos for building rich, interactive user interfaces.

Styled Components help keep the concerns of styling and element architecture separated and make components more readable.

Here is the GitLab repository link for the reference:

Twinkal Doshi / food-react-app

Thank You so much for reading this article. This was my first article. Hope you enjoy this article.