React.js, All you need to Know

Hey JavaScript lovers. Welcome back to Kaushik Biswas’s (KB UTSHO) blog. I am a passionate javascript developer who always loves to talk about modern web technologies. React.js is one of them. Today I want to share some fundamental topics about react.js. Let's start.

React JS is the most popular JavaScript library for front-end development. It makes it easy to build Web UIs with less complexity, bypassing the direct manipulation of the DOM by the developers on their own. React’s speedy DOM manipulation (due to virtual DOM concept) and outcomes-based UI language (i.e. When actions happen to the state of a component, React takes care of updating the UIs in the DOM based on that) makes it so popular among the developers. Making cross-platform apps for Web, Android and iOS is also made easy by React. Let me know some core concepts in brief that make a React app so special.

What is React: React is an open-source frontend JavaScript library which is used for building user interfaces especially for single page applications.

Difference between Library and Framework: Both libraries and frameworks are reusable code written by someone else.

Library: A library is like building your home from scratch, you have the choice to make your house as you wish, with any architecture you like, you can sort your rooms in the way you like.

Framework: On the other hand, Framework is like buying a new house, you don’t have to deal with building problems, but you can’t choose how to sort your rooms because the house is already built.

Why use React instead of other frameworks, like Angular/Vue?

Easy creation of dynamic applications: React makes it easier to create dynamic web applications because it provides less coding and provides more functionality, whereas, with JavaScript applications, code tends to get complex very quickly.

Improved performance: React uses virtual DOM, which makes web applications perform faster. Virtual DOM compares its previous state and updates only those components in the real DOM, whose states have changed, rather than updating all the components.

Reusable components: Components are the building blocks of any React application. a single app usually consists of multiple components. It splits the user interface into independent, reusable parts that can be processed separately

What are the main features of React?

· Support JSX

· Reusable component

· Virtual DOM

· It uses server-side rendering.

· It follows uni-directional data flow or data binding.

· High performance: React updates only those components that have changed, rather than updating all the components at once. This results in much faster web applications.

List some of the major advantages of React.

Some of the major advantages of React are:

· It increases the application’s performance

· It can be conveniently used on the client as well as server side

· Because of JSX, code’s readability increases

· React is easy to integrate with other frameworks like Meteor, Angular, etc

· Using React, writing UI test cases become extremely easy

What are the limitations of React?

Limitations of React are listed below:

· React is just a library, not a full-blown framework

· Its library is very large and takes time to understand

· It can be little difficult for the novice programmers to understand

· Coding gets complex as it uses inline templating and JSX

What is JSX: JSX means Html in React. It is used with React to describe what the user interface should look like. By using JSX, we can write HTML structures in the same file that contains JavaScript code.

Can web browsers read JSX directly?

· Web browsers cannot read JSX directly. This is because they are built to only read regular JS objects and JSX is not a regular JavaScript object

· For a web browser to read a JSX file, the file needs to be transformed into a regular JavaScript object. For this, we use Babel

What is component/ “In React, everything is a component.” Explain: Components are the building blocks of any React application. a single app usually consists of multiple components. It splits the user interface into independent, reusable parts that can be processed separately. Then it renders each of these components independent of each other without affecting the rest of the UI.

Types of components: There are two types of components in React.

Functional Components: These types of components have no state of their own and only contain render methods, and therefore are also called stateless components.

Class Components: These types of components can hold and manage their own state and have a separate render method to return JSX on the screen. They are also called Stateful components as they can have a state.

What are the differences between functional and class components?

Before the introduction of Hooks in React, functional components were called stateless components and were behind class components on a feature basis. After the introduction of Hooks, functional components are equivalent to class components.

Although functional components are the new trend, the react team insists on keeping class components in React. Therefore, it is important to know how these components differ.

What are the different phases of React component’s lifecycle?

There are three different phases of React component’s lifecycle:

· Initial Rendering Phase: This is the phase when the component is about to start its life journey and make its way to the DOM.

· Updating Phase: Once the component gets added to the DOM, it can potentially update and re-render only when a prop or state change occurs. That happens only in this phase.

· Unmounting Phase: This is the final phase of a component’s life cycle in which the component is destroyed and removed from the DOM.

Higher-order component in React: A higher-order component (HOC) is an advanced technique in React for reusing component logic. a higher-order component is a function that takes a component and returns a new component. They are generally used when multiple components have to use a common logic.

Pure component in React: Pure Components in React are the components which do not re-renders when the value of state and props has been updated with the same values. If the value of the previous state or props and the new state or props is the same, the component is not re-rendered. Pure Components restricts the re-rendering ensuring the higher performance of the Component.

What is state in React: States are the heart of React components. State of a component is an object that holds some information that may change over the lifetime of the component.

· The state is a built-in React object that is used to contain data or information about the component. The state in a component can change over time, and whenever it changes, the component re-renders.

· The change in state can happen as a response to user action or system-generated events. It determines the behavior of the component and how it will render.

What is server-side rendering: Server-side rendering (SSR) is an application’s ability to convert HTML files on the server into a fully rendered HTML page for the client. The web browser submits a request for information from the server, which instantly responds by sending a fully rendered page to the client.

Difference between server-side rendering and clint side rendering: Client-side rendering manages the routing dynamically without refreshing the page every time a user requests a different route. But server-side rendering is able to display a fully populated page on the first load for any route of the website, whereas client-side rendering displays a blank page first.

What is uni-directional data flow in React: In React this means that:

· state is passed to the view and to child components

· actions are triggered by the view

· actions can update the state

· the state change is passed to the view and to child components

Reference: https://flaviocopes.com/react-unidirectional-data-flow/

What is DOM: DOM represents an HTML document

What is Virtual DOM: It is an in-memory representation of Real DOM. When the state of an object changes, the virtual DOM changes only that object in the real DOM, rather than updating all the objects.

Why React use Virtual DOM: React uses virtual DOM, which makes web applications perform faster. Virtual DOM compares its previous state and updates only those components in the real DOM, whose states have changed, rather than updating all the components — like conventional web applications.

Difference Between Real DOM and Virtual DOM

What are props in React: It is a React built-in object. Props are used for pass data down from a parent component to a child component. Props are passed to the component in the same way as arguments are passed in a function.

What is an event in React?

An event is an action that a user or system may trigger, such as pressing a key, a mouse clicks etc. React events are named using camelCase, rather than lowercase in HTML. With JSX, we can pass a function as the event handler, rather than a string in HTML.

Why is there a need for using keys in Lists?

Keys are very important in lists for the following reasons:

· A key is a unique identifier and it is used to identify which items have changed, been updated or deleted from the lists

· It also helps to determine which components need to be re-rendered instead of re-rendering all the components every time. Therefore, it increases performance, as only the updated components are re-rendered

Use of render () in React: It is required for each class component to have a render () function. This function returns the HTML, which is to be displayed in the component.

Lifecycle methods of React components in detail:

Some of the most important lifecycle methods are:

i. componentWillMount() — Executed just before rendering takes place both on the client as well as server-side.

ii. componentDidMount() — Executed on the client side only after the first render.

iii. componentWillReceiveProps() — Invoked as soon as the props are received from the parent class and before another render is called.

iv. shouldComponentUpdate() — Returns true or false value based on certain conditions. If you want your component to update, return true else return false. By default, it returns false.

v. componentWillUpdate() — Called just before rendering takes place in the DOM.

vi. componentDidUpdate() — Called immediately after rendering takes place.

vii. componentWillUnmount() — Called after the component is unmounted from the DOM. It is used to clear up the memory spaces.

What is React Hooks?

React Hooks are the built-in functions that permit developers for using the state and lifecycle methods within React components. These are newly added features made available in React 16.8 version. Hooks allow function components to have access to state and other React features. Because of this, class components are generally no longer needed.

Using Hook, all features of React can be used without writing class components. For example, before React version 16.8, it required a class component for managing the state of a component. But now using the useState hook, we can keep the state in a functional component.

Explain React Hooks.

What are Hooks? Hooks are functions that let us “hook into” React state and lifecycle features from a functional component.

React Hooks cannot be used in class components. They let us write components without class.

Why were Hooks introduced in React?

React hooks were introduced in the 16.8 version of React. Previously, functional components were called stateless components. Only class components were used for state management and lifecycle methods. The need to change a functional component to a class component, whenever state management or lifecycle methods were to be used, led to the development of Hooks.

Example of a hook: useState hook

What are the rules that must be followed while using React Hooks?

• Hooks can only be called inside React function components.
• Hooks can only be called at the top level of a component.
• Hooks cannot be conditional

Is custom Hook possible?

Yes, It’s possible. If we have stateful logic that needs to be reused in several components, we can build your own custom Hooks.

What is the use of useEffect React Hooks?

· The useEffect Hook allows you to perform side effects in your components.

· Some examples of side effects are: fetching data, directly updating the DOM, and timers.

· useEffect accepts two arguments. The second argument is optional.

· useEffect(<function>, <dependency>)

What is useState() in React?

The useState() is a built-in React Hook that allows you for having state variables in functional components. It should be used when the DOM has something that is dynamically manipulating/controlling. We initialize our state by calling useState in our function component.

useState accepts an initial state and returns two values:

• The current state.
• A function that updates the state.

What is React Context Hook?

· React Context is a way to manage state globally.

· It can be used together with the useState Hook to share state between deeply nested components more easily than with useState alone.

Why React Context is important?

State should be held by the highest parent component in the stack that requires access to the state. To illustrate, we have many nested components. The component at the top and bottom of the stack need access to the state. To do this without Context, we will need to pass the state as “props” through each nested component. This is called “prop drilling”. So, avoiding prop drilling we have to use context.

What is Prop Drilling?

Prop drilling is basically a situation when the same data is being sent at almost every level due to requirements in the final level. Prop drilling refers to the process of sending props from a higher-level component to a lower-level component. To pass the props down from the topmost component, we must do something like this: However, prop drilling can become an issue in itself because of its repetitive code. For that we have to use useContextReact

What is useRef Hook?

The useRef Hook allows you to persist values between renders. It can be used to store a mutable value that does not cause a re-render when updated. It can be used to access a DOM element directly.

UseMemo & useCallBack Hook

The useMemo and useCallback Hooks are similar. The main difference is that useMemo returns a memoized value and useCallback returns a memoized function

To be continued…….