12 things you need to know about React

I have been using react many days now. In this blog, I will try to remove some miss conception about ReactJs. So, this blog will be more interesting.

React JS is the most popular JavaScript library for front-end development. It makes it easy to build web UIs with less complexity by bypassing the direct manipulation of DOM by the developers themselves. React’s fast DOM manipulation (due to the virtual DOM concept) and result-based UI language (i.e. when actions happen to the state of a component, React takes care of updating the UIs in DOM-based on that) makes it so popular among developers. Building cross-platform apps for the web, Android and iOS is also made easy by React. Let’s briefly learn about some core concepts that make a React app so special.

1. React is a framework?

No, react is not a framework. Because React allows you to make all the decisions yourself, that is, to call React a library. On the other hand, Angular and Ember are frameworks where you don’t have independents to make some decisions you need to make this time, which decisions have already been made for you.

2. JSX

React JSX stands for javascript XML. It allows us to write HTML code in React. We can smoothly write markup and logic in the React file for JSX. JSX allows us to place HTML elements on DOM without createElement() and appendChild(). It converts HTML tags to React elements.

3. What virtual DOM

We know that VDOM is a virtual Document Object Model. Actually, it is a programming concept where the representation of a UI is held in memory with real DOM. Link a library with real DOM such as a reactDOM.VDOM has the same power, properties, and methods as DOM. The VDOM statement looks like a tree.

5. How to work virtual DOM

React creates two copies of real DOM. When a change to the application or element is required, the first copy is re-rendered. After re-rendering, the first copy is compared to the second copy. And isolate the change. Finally, update the Only Change section to real DOM.

6. props

Just as HTML elements can be assigned attributes such as id or title, a React element can also be given a list of attributes when rendered. The button element above has been given an label attribute. In React, the list of attributes that a React element receives is called props. A React function component receives this list as its first argument. The list is passed as an object, where the keys are the names of the attributes and the values represent the values assigned to them.

7. defaultProps

It can be defined as a property on the component class itself. We can define default props for a class.

8. default props value

We can set the default prop value to the default prop property. If you assign a value at a specific default prop property, the default prop value is called.

9. States

The state contains component-specific data that may change over time. The state is user-defined and should be a simple JavaScript object. States should not be changed directly, but with special functions. States can be updated asynchronously, you should not rely on their values to calculate the next state. For this reason, state is often referred to as local or encapsulated. It is not accessible to any component other than the one that owns and sets it. Defining a new variable introduces a new state, and changing the value of that variable changes that state. A component can pass its state as props to its child components.

10. Hooks

Hooks are a new feature in the React 16.8 release. A hook is a special feature that allows you to “hook” into React features. For example, useState is a hook that allows you to add React states to feature components. All hook functions start with the word “use” and they can only be used in functional components. Although hooks are JavaScript functions, you must follow two rules when using them.

1. Always use hooks at the top level of your React function. Do not call hooks inside loops, conditions, or nested functions.
2. Do not call hooks from normal JavaScript functions. Call hooks from either React function components or custom hooks.

See the above example in the States section for Hooks implementation.

11. Benefit of Component

We know that react works with many components. Using components has so many advantages. The component makes our code readable and easier. It converts HTML code into a component. It can be reused in the same application. We can easily modify and so on.

12. ReactDOM.render

It’s basically the entry point for the React application into the browser DOM. It has two arguments. The first one represents what should be rendered to the browser. It always responds to elements. The second one stands for where the React elements should be rendered in the browser.