Introduction to React JS: Some important things that you need to know

What is React?

React is a Javascript library for building a user interfaces. React create interactive UIs without any type of pain. It helps to design a simple vies for each state in application & it will efficiently update and render only the exact right components when data is changed. React declarative view makes code more easier & more predictable to debuging.

React build up encapsulated components that manage their own state and after that react conpose them to make a complex UIs. Now components logic are writting in Javascript instead of templates, that’s why developer can easily able to pass any type of data through his app & keep state from the out of the DOM. React can also able to render on the server site using Node & able to make powerfull mobile apps using React Native.

Here is a 13 things that as an react developer should need to know:

· It is not a framework

· JSX

· It is a Javascript

· It is declarative

· You can separate the concerns

· Data goes down

· State

· Events go up

· How rendering works

· Composition is the key

· Keep the state small

· Conditional Rendering

· You don’t need Flux

For more please read this:

https://hackernoon.com/13-things-you-need-to-know-about-react-d2e6a6422552?fbclid=IwAR3ZkWNjd_8m3BL0pPL9XaNs8WKZY3xEcmW32pHeDj7DrC8JOA_3N6hhmCM

React Components

Once upon a time, developers write many lines of code for developing a single page application. Those applications was follow the traditional DOM structure & for making changes of application was tough and risky challange for developers. This things changes when developers are introduced with components. The components based approach was introduced to fixed those risky kinds of issue. In this components, the whole application is splitting into a small logical part of code.

A Component is considered as the core building blocks of a React application. It makes the task of building UIs much easier & much comfortable. Each component exists in the same place, but they work freely from one another and merge all in a parent component, which will be the full & final UI of developer application.

Every React component have their own structure, methods as well as APIs. They can be reusable as per developers need. For better understanding, consider the entire UI as a tree. The root is the starting component and each of the other pieces becomes branches, which are further divided into sub-branches.

fig 1.1: Components

There are 2 types of components in ReactJS.

1. Functional Components
2. Class components

Instances Properties

props

“this.props” contains the props that were defined by the caller of this component. “this.props.children” is a special prop, typically defined by the child tags in the JSX expression rather than in the tag itself.

state

The state contains data specific to this component that may change over time. The state is user-defined, and it should be a plain JavaScript object.

If some value isn’t used for rendering or data flow (for example, a timer ID), you don’t have to put it in the state. Such values can be defined as fields on the component instance.

Never mutate “this.state” directly, as calling setState() afterwards may replace the mutation you made. Treat “this.state: as if it were immutable.

Now we are going to discuss about What is virtual DOM and how it works of React:

Virtual DOM & Diffing

fig 1.2: Virtual DOM

In React , there is a corresponding virtual DOM object for every DOM object. A virtual DOM object is a simply representation of a DOM object. We can say that it is a prototype copy of a DOM object.

A virtual DOM object has present the same properties as a real DOM object. But there is a cause, that is it lacks the real thing’s power to directly what is change directly on the screen.

How virtual DOM helps

When a developer render a JSX element, every time developer render virtual DOM object gets updated. This is looks like very inefficient, but on the other hand the cost of getting render is insignificant because the virtual DOM can able to updated so fast. Once it gets updated, after that React compares the virtual DOM with a virtual DOM snapshot that was taken exactly right before the update occurs.

By compares with the new updated virtual DOM with a pre-updated version of DOM, React found out exactly which one virtual DOm objects have changed & this process known as “diffing”.

After virtual DOM changes detected, React would be smarte enough to recreate developer choosen one checked-off list-item, and leave the rest of developer list.

What is React JSX

We know a things that, all of the React components have a render function. The render function specifies the HTML output of a React component. JSX(JavaScript Extension) is a React extension which allows us to writing JavaScript code that looks like HTML. In other words we can say that, JSX is an HTML-like syntax which is used by React that extends ECMAScript so that HTML-like syntax can co-exist with JavaScript/React code. The syntax is used by preprocessors (i.e., transpilers like babel) to transform HTML-like syntax into standard JavaScript objects that a JavaScript engine can able to parse.

JSX provides us to write HTML/XML-like structures (e.g., DOM-like tree structures) in the same file where we can write JavaScript code, then preprocessor will transform these expressions into JavaScript code. Just like XML/HTML, JSX tags have a tag name, attributes, and children.

Example:

Here, we write JSX syntax in JSX file and we can see that the corresponding JavaScript code which transforms by preprocessor(babel):

<div> Hello I am Niloy </div>
// corresponding output: React.createElement("div", null, "Hello I am Niloy");

JSX advantages

• It is more faster than the regular JavaScript because while translating the code to JavaScript it performs optimization.
• Instead of spliting technologies by putting markup and logic in other files, React uses components that contains both.
• It is type-safe and during compilation time most of the errors can be found.
• It makes easier to create any templates.

React application performance optimization

Here are some points that makes react application performance more optimized:

· Using Immutable Data Structures

· Function/Stateless Components and React.PureComponent

· Multiple Chunk Files

· Using Production Mode Flag in Webpack

· Dependency optimization

· Use React.Freagments to Avoid Additional HTML Element Wrappers

· Avoid Inline Function Definition in the Render Function

· Throttling and Debouncing Event Action in Javascript

· Avoid using Index as key for map

· Avoiding props in Initial States

· Spreading props on DOM elements

And many more.

Thanks for reading my article. For more articles please stay connected with me.