Easiest and Efficient way to develop SPA react project.

Assalamualikum. Hello everyone,today i am going to share the most easiest and efficient way to start a Single Page Application(SPA) by using react.

When you want to build a website,you have to draw a proper working criteria.That helps you to analysis your project and provide a guideline what to do and not to do.More importantly it provides a sequence of your work.Before start our main topic,you should ensure to fulfill some requirement.Such as —

i)installed NodeJs

ii)npm

iii)a code editor

iv)terminal

So now you have all kinds of equipment to start your journey.Lets start…

1)Create React Project:

First of all,You have to create a react app.That’s why,open your command prompt and go to your desire location by using cd command.Then run a command-

npx create-react-app your_app_name

Then hit enter button.It takes few times to create and after complete installation you see happy hacking.Now enter your created folder by using below command —

cd my-app

Its time to deploy your site.Open your code in an editor.Also open a terminal and run a command —

npm start

Within a minute,you will see a magic like this —

React Basic View

Now you are a combatant.Start fighting with default react view and bulid your own kindom.

2)Install Bootstrap:

For making your site cute and gorgeous more conveniently,you can use bootstrap.For that,you have to install it by using a command —

npm install react-bootstrap bootstrap

And import css file either in src/index.js or in app.js folder.

3)Draw Web Skeleton and find out Component Hierarchy:

Now you should create a web skeleton according to your website requirement and find out components and sub components.To know more about component just click on me.

Components

In the above image,rectangle shape represent a component and oval represents child components.

4)Design and Develop:

Now start to design your every component step by step.For making your site more stylist you need to use icon and popup alert and form.For that —

i)How to use font awesome:

https://fontawesome.com/how-to-use/on-the-web/using-with/react

ii)Sweet alert:

https://sweetalert2.github.io/

iii)React-hook-form:

https://www.npmjs.com/package/react-hook-form

5)Route and Authentication:

Route and authentication are very important parts of every website.To know more about react routing,you can go

Authentication:https://medium.com/better-programming/building-basic-react-authentication-e20a574d5e71

Route:https://reacttraining.com/react-router/web/guides/quick-start

If you done all the job perfectly,Now its time to deploy your own builded website.For that,you can use firebase. I will discuss how to deploy a react app in firebase later InSaAllah.

For today Allah Hafez 🙂

References:

https://reactjs.org/docs/getting-started.html

https://www.tutorialspoint.com/reactjs/reactjs_environment_setup.htm

https://www.codementor.io/@seyiadeleke42/setting-up-a-react-development-environment-from-scratch-hbodiez1c