React tricks that you should know

1.What is React JS?

We already know that React.js is the Library of JavaScript.React.js helps developers create user interfaces (UIs). The UI’s on-screen menus, search bar, buttons and all elements help to establish the relationship between the website and the web application. Before React JS, developers designed UIs with “Vanilla JavaScript” or “jQuery”, which was a long process and full of errors and bugs.React.js can be used to create reusable components that help reduce errors in quick development and coding in less time, as well as being extremely popular with developers due to the great design and speed of the user interface. Also, the code reduction of React JS is as a snippet and component. JSX options manipulate the DOM directly.

2.How React JS work with virtual DOM?

React works with DOM and after making a DOM we see a webpage. But we know JavaScript can manipulate DOM. So when you manipulate the DOM of a page that is complete rendered with JavaScript, that webpage is rendered completely again (except for one or two latest browsers, most of the browsers completely re-create the Dom Tree and render) which is time consuming. And so if there is so much JavaScript on a page to manipulate the DOM, that webpage will be slow. So here’s the real game of React.

What does the reaction do? React A seam to seam creates another dom similar to the one in this browser called a virtual dom. Now this dome looks exactly like the real dome, but this virtual dome is actually a JavaScript object. React builds it in such a way that any element can be modified easily and efficiently using JavaScript with this DOM.

Now here too React does another job. React creates not one but two virtual domes. But why two? Yes, here is the trick. When the user takes an action in the React app or does something that we call a change in the Dome, React puts those changes in one of the two virtual Domes, and the other is in the previous version. Now comparing the new one with the previous one, looking at the reaction, exactly which specific element has been changed. According to him, React does not re-render or re-paint the whole dome but only changes what has been changed. This makes it easy to work quickly and the browser does not have to do any extra, unnecessary work. And this way, using this technique, React can render so fast.

3. Benefit to learn React JS.

React JS’s code reduction is as a snippet and component. JSX options manipulate the DOM directly. Virtual DOM is very helpful in increasing the performance of the website.

4. JSX in depth.

The JSX syntax looks a lot like HTML. But it’s not HTML, nor is it a string of JavaScript. Rather, it is a syntax extension of JavaScript. It has been added for the convenience of the developers. Moreover, although JSX is similar to HTML, it has some very good functionality. For example, if we want, we can insert JavaScript variables inside JSX. We can also work with variables in JSX. You can also call functions in the same way. You can also take attributes in the same way as HTML. There can be many more JSX child elements inside JSX. It is just like HTML. You have to put your closing bracket in the last tag. Similarly, you can store only one JSX element in the variable. Now you can have as many children as you want inside that element. But the whole thing will be an element. Similarly, if you want to return a JSX element, you can return only one parent element. No matter the child.

5. React Default props

Thousands of apps are built using React, it offers a plethora of goodies:

· High performance

· Smaller builds

· Virtual DOM

· Code reuse

· UI based on Components

· Runs on different platforms: Mobile/Tablet and Desktop

· Easy start for beginners

Its primary built to use the concept of Components for each view or group of views. A React component is similar to an HTML element. And a component is basically a class containing:

· props

· data

· state (manipulated via setState())

· markup (delivered by render())

All these combined together create a UI widget.So- that was fun, right? but you kinds knew all of that.Well, components are the main tools we use to build an interactive UI with. All React applications have a root component, often called the App component.React provides ways for components to pass data to each other and to respond to each other’s events.

You can write a component and use it as a child component in several other components — they were designed to be self-contained and loosely coupled for this purpose.Each component contains valuable data about itself:

· What data it needs as input

· How to draw itself

Encapsulates reusable components with Bit to run them anywhere across your applications.Bit encapsulates components in your projects with all their files and dependencies, so they can run anywhere across your applications.Build faster by making your components reusable out-of-the-box, and collaborate as a team to share and discover components. No refactoring or configurations needed, just share components and build truly modular apps.

6. Props-types

There are many types of props. This is essential for a programmer. It is very useful things in the coding. We use boolean, array, function, number, object, string and symbol types of props in coding.

7. Optimize the performance of the React application.

If your project is built with Create React App. This will create a production build of your app in the build/ folder of your project.

Remember that this is only necessary before deploying to production. For normal development, use npm start.

We should use single file to optimize performance. You can install the teser-branch to improve brunch production. And have many tricks to optimize performance.

8. How rendering works on React

Every setState () call informs React about state changes. Then, React calls render () method to update the components representation in memory (Virtual DOM) and compares it with what’s rendered in the browser. If there are changes, React does the smallest possible update to the DOM.

Child components know that they need to re-render because their props changed.I often compare that to a diff mechanism in Git. There are two snapshots of component tree that React compares and just swaps what needs to be swapped.

I was looking for a clever diagram describing the render flow but couldn’t find one. You can read more about it here though.

9. State

At the beginning, you set the default state of the component. In this case, we want to have an empty text value. To do that you use component method getInitialState () that has to return state object for the component.

To update the state an event handler changeText () is assigned to the onChange event. To update the state React expects you use built-in setState () method.

The state update will be scheduled and the component will re-render when it’s done. setState () call needs to be used to inform React about pending state change so it can apply the changes. There are no loops of any kind that track if something has changed.

You need to remember that setState () is asynchronous. The results are not immediate.

10. Components

Componets is very essential for a programmer. It helps the programmer to help very much. A components can send data from one components to others components. We can send data to others components by using map. And also we can receive data on cmponents by using props. It helps to write less code. So it is very much interesting.

And its most beautiful things is we can use a components data to others coponents.