React - MERN Stack

Let's learn and develop along.!😊

Part5

• If anyone missed the previous part you can vist from here checkout👈

---

Today let's understand React from Mern Stack, it's importance in the MERN Stack project.

What is React?

As we know react is a Javascript library which mostly helpful to create UI's for websites, apps etc.

Why React?

As we all know Javascript is the core language which is the foundation for libraries and other frameworks like React.
If we look at the pros and cons of the Javascript

Pros:

1.In the beginning Javascript has large popularity due it's fast responsive behaviour, Versatile nature, simple & lightweight, user friendly, browser supportive, etc.

2.It Works fine for small and medium projects with simple DOM manipulations.

Cons:

1.Hard for DOM manipulation of large and complex projects.

2.unorganized behaviour of code.

So, react is helpful for:

• Component based architechture for better code organization and structuring.

• Creates a Virtual DOM(Document Object Model) with respect to the actual DOM for handling efficient and fast rendering ,results in better performance.

• Due to it's component structure the code is Reusable.

• React is best for creating Single Page Application.

• React also offers ecosystem of tools like Redux, Node, Flux.

Also React has several Disadvantages which was solved further using Next.Js which is on top of React ,and is on top of Javascript.

So,as we got a glimpse of the working of React Let's start over working with the project.

React Project - MERN Stack.

As we set up the backend and performed the user auth in previous sections.

• Now we are creating a new folder in the main directory called client,as react handles all client side information.

• press ctrl+and in the client directory and create react app in the current directorynpx create-react-app@latest .` as '.' denotes current directory.

As we get the deprecating warning which tells,

1.Create React App (CRA) is no longer actively maintained.

2.React recommends using Next.js, Remix, or Vite for new projects.

3.go through the link as it provides clear blog post from ur installation, for better understanding about the deprecation.

• Despite this, the installation continued.

• It provides the scripts to start the react app.So,follow the instruction and run npm start to start the react app locally.

You can see the directory structure of the client with installed nodemodules, scripts and all required dependencies used by react to create the app.

This is how we start working with react.If u want my content as out for faster delivery.Let's develop together.

Happy Developing!