All you need to know about React

I have been using React for over a year now. So now decide to write a post about all experience I gathered in the fields of React. The essential guide is for beginners only there I covered the basic concepts as fundamentals for working with React. It is not a complete guide to React but rather a complete introduction.

What is React

React is a JavaScript library. Which is one of the most popular libraries. React is not a framework like Angular. React is an open-source project created by Facebook. React is used to build user interfaces (UI) on the front end. One of the most benefits of using react is that you can create components, which are like custom and reusable HTML elements, to quickly and efficiently build user interfaces.

How Does React Work

React uses the concept of virtual DOM which makes the loading faster. A virtual DOM is just a lightweight javascript object which is just the copy of a real DOM. Whenever any prop or state change occurs, the entire UI is re-rendered in the virtual DOM.

Your First React App

To getting started with react app you have to install Node on your computer. And run create-react-app, run the following code in your terminal, one directory up from where you want the project to live.

$ npx create-react-app my-app

Once that finishes installing, move to the newly created directory and start the project.

$ cd my-app && npm start

Once you run this command a new window will popup at localhost:3000 with your new React app.

If you look into the project structure, you will see a public directory and src directory along with the node_modules.

In the public directory, index.html is the important file, which is very similar to the static index. HTML file And the src directory will contain all React code.

To getting started with React find the App.js file in the src directory.

Components

React is all about Components. Essentially, React is a component-based library. Actually Reacts makes easy frontend development. In React, we create small components and put them together. All components are reusable. You can create small components or big components. Components are mostly simple functions in any programming language. Functions take some input and return some output. We can use functions as needed by calling them. So we can use components as needed by import them.

Benefits of Components

Components make your code more readable and easier to work with. In big projects, There are lots of code, that’s can be messy, but if you use react, so you can handle it very easily because of components. Components divide a big project into a lot of small parts and put them together. So when you need to change something in your project you don’t need to touch the whole bunch of code, you just can change the code in small components that hold the part of the project.

React Hooks

There are some useful hooks in React like useEffect, UseState, UseCallback, etc. You can use them easily for web development. I love using hooks rather than creating functions. Reacts hooks are very powerful. Hooks are a special function in React. All hooks functions begin with the word use.

Props

Basically, with props, you can pass data to child components from parent’s components. Sometimes You have to use some data repeating, but using props you can use one component for so many data dynamically instead of hardcoded. Props make react powerfully because it can handle lots of data very easily.

State

Okay, the state is an amazing thing in React. When you need to change data like remove, delete, update you can put the data in React state. Also, You can pass the data from one state to another component. You can use the same state on other components. So, it’s a very powerful thing in React.

Pulling in API Data

In React, You can easily handle API data using useEffect hooks with fetch. You can get data from the API, Also you can post Data to the API through the backend. It’s very easy to work with API data with React. React makes it very simple. You can handle lots of data without facing any major issues.

Building and Deploying a React App

After creating your first react app you have to put it on the server. If host all the files it won’t work. You have to build the project by creating a build folder that will contain your app. put the contents of that folder anywhere, and you’re done. To create a build folder you have to run the following command.

$ npm run build