A Brief Introduction to React
1. React is a Library
React is a JavaScript library, not a framework. The framework is a complete solution, e.g., Angular, Vue. When we use react, we need many more third-party libraries to accomplish our project. That means react is not a complete solution. Actually, react doesn’t focus on everything; it focuses on a small portion, and it makes that portion best, which is why react is so popular. The framework is not flexible. That is why we have to code, make the structure as framework rules. As react a library, this is so flexible. The developer decides how to do code and the structure and what will be used for the project.
2. Why React
The working procedure of React is really awesome and unique. React doesn’t change real dom directly. When coding with jQuery or vanilla JavaScript, real dom is directly modified. Dom is actually an object of elements of a web page. The full meaning of dom is Document Object Model. When dom is rendered again and again, the application getting slower. React gives us a solution at this point. React doesn't modify real dom directly. It took a copy of dom and compared two doms and find out what portion of dom needs to be re-rendered, then react re-render only that portion. So, our application will be faster, smooth, and user-friendly.
3. Getting started with react
We can start developing react app using create-react-app. This is an awesome tool that makes developing an environment for us. We need to start coding just. In React application, we actually build components. React app is, after all, a composition of components. Components are reusable, easily understood, and easy to modify. React component is a function or class which returns a react element.
4. The React language
We actually write javaScript on a react app. If anyone can do well in javaScript, he or she will definitely be good at React also. React has a special type of language called JSX, which is actually syntactic sugar. This is a method to write javascript in HTML format. We know that HTML is an easy, easily understand, and user-friendly language. This is why, to keep an easy, easily understand the feature, react has come with JSX. JSX means JavaScirpt Extension.
5. Client-Side Rendering
An application can render in two ways, one is server-side, and another one is client-side. Server-side rendering will render fully on the server, and pure HTML will come on the client-side. On the other hand, client-side rendering is, the application will not render in the server; rather, a javascript code comes in client, and on client-side will render the HTML. This is why there is a problem with react, and that is, react apps are not SEO friendly. But there is also a solution, so no need to worry. One solution, in the sector of developing where SEO doesn’t need, React will work awesome. And another solution is Next.JS. Next.js come to make react app SEO friendly.
6. Virtual DOM
We previously discussed a topic that reacts doesn’t modify real dom directly. React, keep a copy of real dom in memory and modify that dom. And this dom is called Virtual DOM. Though react doesn’t modify real dom, but it modifies virtual dom, there is a question: What is the difference? Isn’t it take the same time? Actually, modifying dom is not time worthy rather, painting modified dom is time worthy. Then what is painting? DOM is actually an object; following this object makes everything in the user interface is called painting. Suppose there is a red color background, then we should paint it the red color. So, we can say that modifying dom is not time-worthy.
7. React Hooks
Hooks are a special type of function in react. Hooks are so powerful. The name of hooks has the ‘use’ word-initially, e.g., useState(). Hooks are specially for functional components. In the class component, you can not use Hooks.
8. useState()
useState() hooks is for keep state. We can keep different states in a variable using the useState() hook. When the state changed, the react app will react to these changes. And this is why react is called react.
9. useEffect()
useEffect() hooks are used to manage side effects. Suppose our application needs data from the server, then we need to call API. Another example is depending on the state; our app needs different data. Then this functionality can manage easily using useEffect() hooks.
10. Expression inside JSX
We previously discussed a thing that reacts use a language extension called JSX. We can use expressions inside JSX code. We can condition render components or data. We need to use curly braces to write an expression.
