A simple overview of React

React.js, which is known as react. Nowadays it is a popular JavaScript library that is using to building a user interface. In this blog, I tried to explain what is react.js & how it works.

1.What is React:

React is not a programming language. It is a simple JavaScript library that is using to build a user interface (UI). React is using in the front-end of a website. It means react cannot work in the back-end. So, we can say react is only focused on the front end.

2.JSX → JavaScript XML

JSX Stands for JavaScript XML (Extensible Markup Language). It basically allows us to write HTML in React. But it’s not actually “HTML”. So is it an HTML template language? NO. It’s actually a declarative syntax that used to express the virtual DOM. JSX gets converted to virtual DOM, which gets diffed against the real DOM that we discussed earlier. Rather than rewriting the whole DOM tree, only changes get applied & that is the reason why React is so fast! Yeah, you can also create HTML elements using React.createElement(), but that is like holding your left ear using your right hand! The syntax is also weird. Just to create a paragraph tag, you have to write:

React.createElement("p", null, "I'm Chintu Babu, holding my left ear with using my right hand. I'm THAT guy who uses a calculator to calculate 6 + 9")

Rather than doing this shit, you can use JSX to get syntactic sugar while developing your React Application. In the end, Babel actually converts JSX to React.createElement(…)and then React converts them into pure HTML elements because that’s what the browser understands !!!

// You're writting JSX ->

<button onClick?={() => alert('YES')}><span>Click me</span></button>Babel Transpiled Your JSX ->

React.createElement("button", { onClick: () => alert('YES') },

React.createElement('span', {}, 'Click me'))

3.Virtual DOM:

 While making an app with React, developers don’t have to worry about manipulating the browser DOM. What they have to do is only update the states (we will be learning it later in this article) of the app and tell React what to do and rest goes to React. React does the heavy lifting of manipulating the DOM but in the simplest way. It manages a virtual DOM tree of the entire app in the memory.

When any changes are to be made to the real DOM by any event, it generates a new virtual representation of the updated tree. Now React has 2 versions of the tree in memory! React does not discard what has already been rendered in the DOM tree in the browser. Instead, it will compare the 2 virtual versions of the tree that it has in memory, compute the differences between them, figure out what sub-trees in the main tree need to be updated, and only update these sub-trees in the real DOM in the browser. And, this concept makes React very efficient to work with a browser’s DOM tree.

4.React Component:

 React components are JavaScript functions.

This example creates a React component named "Welcome":

function Welcome() { return <h1>Hello React!</h1>; } ReactDOM.render(<Welcome />, document.getElementById('root'));

React can also use ES6 classes to create components.

This example creates a React component named Welcome with a render method:

class Welcome extends React.Component { render() { return(<h1>Hello React!</h1>); } } ReactDOM.render(<Welcome />, document.getElementById('root'));

5. React Component Properties

 Sometimes we need to pass some data from one component to others components. Prop is a method where we can pass data from parent component to child component. Props are so effective for small-type applications.

6.Default Props:

React components share their data or information with another component by using props. But sometimes a component might not have to send props to another component. So, the child component can initialize default props if it does not get any props from its parent components. The component will try to find the values from props and if the props is never sent to the component, then it can use the default values or the default props inside it.

7. Hooks:

Hooks are a new addition in React 16.8. Hooks are basically a JavaScript function that does certain things. Hooks in react has made the use of functional components more reliable. Hooks are used extensively in a react application and to have a proper understanding of react, one must have the knowledge of hooks. There are different hooks to work with in react such as useState, useEffect, useContext, useHistory, and a whole lot more.

8.What is State:

 State is so important part of React. Sometimes we need to set a data anywhere & after need to use it. In this case, we can use the useState function. In this function, we can set & use our data so easily.

9.Conditional Rendering:

Conditional rendering is a condition-based render function. Some we need like if the user is male show something else the user is female then shows another thing. In this case, we use conditional rendering & show output to the user.

10.Optimizing Performance

React is already fast because of the Diff Algorithm that it follows. But You can optimize more using the Production Build of your React app. You can follow immutable data structures because it has zero side effects. They are simpler to create, test and use. It’s easier & faster for React to track changes if you’re following an immutable pattern. You should also treat your component’s state as immutable. use setState() to change your state rather than mutating it using this. state. You should prefer functional components and React.PureComponent because it reduces the bundle size as it minifies better than classes.

You should not install dependencies that you don’t need in your project. I saw some Chants installing React bootstrap and Material UI in their React app. It’s totally meaningless because “Material UI” itself is a huge library for styling your UI and you don’t need React Bootstrap if you’re using Material UI for it.