Let’s have a journey to React.js

What is React?

React is a library for JavaScript. As a library, it works to provide something to the owner. React provides a user interface or UI components. It was developed by Facebook and some developers community. Many popular and heavy websites like Facebook, Netflix use React for development.

Where we can use React?

A machine that can understand JavaScript, we can use React on that. It is friendly to use.

What is DOM and VIRTUAL DOM?

DOM stands for Document Object Model. When we want our browser to do something, it simply creates a tree made of objects. Browser then follow the tree model and simply do what to do. This model is called as DOM.

The word VIRTUAL means something imaginary. As React works through JavaScript, it follows DOM. But it creates a new DOM which is the copy of the previous DOM with some changes. Let me explain… React creates a DOM, then when something changes appear, it creates a new DOM and compare the DOM structure with the previous one. Here, the second one is called VIRTUAL.

What does React do?

A simple answer is - it explains. As React works for UI, it simply describes/explains the browser what to do. React also allows us to create reusable UI components.

But how? Normally we can see, if we write something, a DOM is created, and browser read that model and works on it. But when a change is made, another DOM is created and the browser read that model too and works on it from the beginning.

Here comes React. It doesn’t work that way. So, how React works?

How React Works?

We have now a concept of VIRTUAL DOM. Now every time we make a change in our code, React specifies the changes we’ve made. And put those changes on a new DOM as a dirty things/marked. Now React compares between both of the DOMs, and works only for the changes. So, it doesn’t have to load the whole object model.

There is a tree reconciliation algorithm through which React works. When something changed, 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.

That’s why React is faster.

There are certain things one need to know. We often here React render, and React element, component. But what are they?

ReactDOM.render()

It is basically the entry point for a React application into browser’s DOM. To actually make a React element show up in the DOM, we use the ReactDOM.render() method which will do many things to figure out the most optimal way to reflect the state of a React element into the actual DOM tree in the browser.

React element

It’s a VIRTUAL element describing a DOM element. It’s what the React.createElement() API method returns.

React component

The meaning of component is a small portion of something bigger. React component is also meant for same.

Components are independent and reusable bits of code. They serve the same purpose as JavaScript functions, but work in isolation and return HTML via a render() function. Components come in two types, Class components and Function components

React Hooks

Hooks in React are interesting. Hooks are the functions which “hook into” React state and lifecycle features from function components. Hooks are similar to JavaScript functions. Previously, If someone wrote a function component, and then want to add some state to it, he/she had to do this by converting it to a class. But, now we can do it by using a Hook inside the existing function component.

There are different types of hooks in React. Name of the React hooks starts with use, e.g. useState, useEffect. Each hook has different working field. We can make our own hooks too.

JSX

JSX stands for JavaScript extensions or JavaScript XML. It is an extension used for making code readable.

Previously, I have said, how React works. It creates a object model, and passes it to the browser. So, to create an button element, we have to write the code like below:

React.createElement(
  MyButton,
  {color: 'green', shadowSize: 2},
  'Touch Me'
)

But, we do not write that. We simply write like below:

<MyButton color="green" shadowSize={2}>
  Touch Me
</MyButton>

And it works same. But how?

Think…, browser needs object, but we write some tags which is look like HTML. In between these, something is working to convert the tags into objects. JavaScript calls it an extension, and we call it JSX. Simple.

JSX is not a template language

A React component is a JavaScript function that returns a React element (usually with JSX). When JSX is used, the <tag></tag syntax becomes a call to React.createElement(“tag”). It’s absolutely important for us to keep this in mind while building React components. We are not writing HTML. We are using a JavaScript extension to return function calls that create React elements (which are essentially JavaScript objects).

Now, will you stop calling JSX as a template language? If not, read that article again from start.

PropTypes in React.js

A React.js application is created by lots of components. These components get many specific attributes, just like a HTML tag does.
These attributes are called ”props” in React and can be of any type. It can be a string, function or an Array, as long as its valid JavaScript we can use it as a prop.

Now, if someone using a component written by another developer he has to figure out what props that component want, what’s required and also the correct type. React has a solution for this and its called propTypes. PropTypes defines type and which props are required. We can be benefited from this from two ways. First of all, we can easily open up a component and check which props are required and what type they should be. Secondly, when things get messed up React will give us an awesome error message in the console, saying which props is wrong/missing plus the render method that caused the problem.

We need to optimize our React app

Title goes for optimizing. To get better performance, we do work trickily. Let’s assume, we want to print number 1 to 10. we can do that by:

print('1');
print('2');
print('3');
...
print('10');

But we do not do that. We are clever. So we make a loop:

for ( i = 1; i <= 10; i++) {
  print(i);
}

We do that to make our code faster and clean. Similarly, to optimize our React app, we have to make some changes. For example, we can use the production build when its time to production mode, otherwise we should use development mode.

To get a good service, install React Developer Tools as an extension in the browser. It will show whether our build process is set up correctly.

There are plenty of tricks to get the highest performance from React app. Read them, apply and be happy. To read more about optimization, click here.