Let’s start a discusion.
1. Why React is a library of Javascript?
In React we can make new things based on javascript from ourselves, create wonderful UI (user interface) easily. But in the framework, we have no scope to manipulate, edit, delete, and can’t make every decision from ourselves.
2.React component
I think one of the main purposes of using React is React component. In web, android, or ios applications we need to use the same thing several times then we can use the React components theory to avoid the duplication of code. ok, but what is a component? we can tell it “similar in look different data”. We can see in many applications some parts are repeated then we can make one component and use it easily by avoiding code repetition.
3. Passing data in many places in React
If we need to pass data from one component to other components it is a very easy task in React. Using the Props functionality we can send data easily. But it has some limitations. Props can send and receive data from parent to child easily but the reverse is not possible here. But don’t worry Context API can solve this problem. From one mother component to any child components, data passing is possible in Context API.
4. Why React application works so fast? (virtual DOM)
In React the virtual DOM method is a very common issue. Basically, React works with virtual DOM. Before that, We have discussed how Html converts to DOM. We can represent the DOM like a tree structure. When few Html codes changed the whole tree structure will be changed as a result it takes few long times, the application will be slower. But virtual DOM resolved the problem. When some JSX code will change the virtual DOM will change the exact amount of tree structure so that it will be faster.
5. Html, CSS, and JavaScript in one file
In React it is very easy to handle Html, CSS, and JS in one file. Here we can use these three things smoothly to make good looking our UI. But it also can be used the different files then can make combinations. Another thing is JSX. When some Html topics are used in javascript format that is called JSX. like
<button></button>
is used in pure Html but in react it is used in the below format
<Button></Button>
6. React Hooks
In functional React components, the hooks method is a very commonly used topic. Basically, a hook calls to a special function. There are some hooks in React like that useState, useEffect, useCallback. The useState hook is used where need to change the state like that “FaceBook like button”, “Shopping Cart Button”, “increase or decrease button”. When need to call any API the useEffect hook is used.
7. Reuseable Code
Using React components we can use code again and again without writing many times. Besides we can use multiple components in the same places.
import React from 'react';import Login from '../Login/Login';const Home = () => {return (<div> <Login /> <Login /> <Login /></div>);};export default Home;// Login component
import React from 'react';const Login = () => {return (<div> Hello world! I'm Login Page.</div>);};export default Login;
the results will be
Hello world! I’m Login page. Hello world! I’m Login page. Hell world! I’m Login page.
we can see that using react <Login /> component we can reuse the same code again without duplication.
8. Event Handler on React
We can use the event handler on React. In the button, we can use some on-event functionality like as onClick, onMouseOver, onSubmit, onScroll.
import React from 'react';const Login = () => {return (<div><button onClick={() => alert('Login Button clicked')}>Login</button></div>);};export default Login;
9. Good optimizing performance of Application
React is a very sensitive library. If any small mistake happens, it’ll show a warning immediately. So every warning should be solved. Besides, it is also a necessary step to create a build folder in react project before deploying it to production.
10. User input and Dynamic data.
Many times we need to get the user's data (dynamic data) or another changeable or unique data and show them on UI. These things are very easy in React. Besides array mapping in React is also very easy using a pair of curly brackets.
import React from 'react';const Login = () => {return (<div>{ array.map(element => <li>{element}</li>)}</div>);};export default Login;
here an array is mapped by using the curly bracket as the array has the dynamic values .Besides it's every element are shown using <li></li>tags.