Habilelabs-Logo
Blog

React – A Journey from Zero to Hero

June 2nd, 2020 . 10 minutes read
Blog featured image

React is a JavaScript library developed by Facebook. It was created to build user interfaces, especially for single-page applications. By using react we can create reusable UI components. It works on VirtualDOM instead of RealDOM. RealDOM manipulations are expensive thus React uses VirtualDOM property.

React is used for handling view layers for web and mobile apps. In MVC architecture it is part of the view layer. Almost every big organization has switched to this technology.

Now let’s see why react is so popular nowadays-

Benefits of Using React

Single Page Application:

React is used for creating single-page applications. It means that it loads the whole application in a single page load and provide great user-experience.

Virtual DOM:

This is one of the main features of React. As real DOM manipulation is quite expensive thus, React uses Virtual DOM. It creates a copy of the real DOM and whenever any changes come to it compare with virtual DOM and whatever element belongs to that change only that is rendered instead of rendering the whole page so it’s increased the render speed.

Reusable Component:

React gives you the feature of reusable components. You can break down your screen into multiple reusable components and need not write your component again and again. You can create your own reusable component and use it as many times as you want in your project.

Learn Once, Use Everywhere:

React is used everywhere. From creating a website to web application development, PWA, and mobile application development, it can be used practically everywhere with little help of React Native.

Amazing Dev Support:

Due to massive community uses, React’s support is very quick and amazing. The community helps to maintain and grow the open-source library. DevTools is also available for developers and team Facebook continues to improve React.

Fast Learning:

React is built in JavaScript so it is a very easy and friendly language for developers and easier to adapt irrespective of other languages. Ex: if you want to use Flutter, you have to first learn Dart.

Great Opportunities:

More and more companies are switching towards React thus, there are a huge number of opportunities for the developers.

Basic Concepts of React

Now let’s get started with the basic concepts of React-

JSX

JSX is a syntax extension to JavaScript. By using JSX, we can write HTML structure in the same file that contains JavaScript code.

Web browsers cannot read JSX directly, because browsers can only be read regular JS objects and JSX is not a regular JavaScript object. For a web browser to read JSX, Babel is used. It transforms JSX into JavaScript objects.

Components

Components let us split the UI into smaller independent and reusable pieces. Each piece is treated as an isolated one. We can use them anywhere in a project thus called components.

Function and Class Components

By using these two ways, we can create a component-

  • Function Components: This is the simplest way to create a component. It is a pure JavaScript function. It takes props object as a parameter and returns React elements:
  • You can also use an ES6 class to define a component-

Props

Props are inputs to components, used to pass data from a parent component to a child component. Props are Read-Only.

State

State of a component is an object that holds some information that may change over the lifetime of the component. State and props both are similar, but it is more private and fully controlled by its own component unlike props, i.e., it is not accessible to any component other than the one that owns and sets it. It is good practice to make our state as simple as possible and minimize the number of stateful components.

State & Props

Both props and state are plain JavaScript objects. They are different in their functionality with respect to components. Props are passed to the component through parameters, same as we passed in the function. While the state is managed within the component similar to variables declared within a function.

Phases of Component Lifecycle

1. Mounting

In this phase, component is ready to mount in the browser DOM. This phase includes initialization from constructor(), getDerivedStateFromProps(), render(), and componentDidMount() lifecycle methods.

2. Updating

In this phase, the component gets updated in two ways, sending the new props and updating the state either from setState() or forceUpdate(). This phase includes the  getDerivedStateFromProps(), shouldComponentUpdate(), render(), getSnapshotBeforeUpdate() and componentDidUpdate() lifecycle methods.

3. Unmounting

In this process, the component is not needed and gets unmounted from the browser DOM. This phase includes componentWillUnmount() lifecycle method.

React Phases

1.      Render: The component will render without any side-effects. This phase applies for Pure components where React can pause, abort, or restart the render.

2.      Pre-commit: Before the component changes actually apply to the DOM, React checks whether changes need to be rendered or not by using getSnapshotBeforeUpdate() method.

3.      Commit:  In this phase, React executes the final lifecycles respectively componentDidMount() for mounting, componentDidUpdate() for updating, and componentWillUnmount() for unmounting.

React Lifecycle Methods

React has some life cycle methods which are a part of its phases. With the help of these methods, react mounting, updating, and unmounting phases get to occur. Some of these methods are deprecated after the React 16.3 update.

Here we will discuss the previous life cycle methods and new life methods or alternatives of deprecated life cycle methods-

Before 16.3

componentWillMount:

This life cycle method is executed before rendering and is used for App-level configuration in the component. This life cycle method is deprecated after the 16.3 react version.

componentDidMount:

This method is executed after first rendering and you can call API and AJAX requests, DOM or state updates, and set up event listeners in this method.

componentWillReceiveProps:

This method is executed when a prop updates to trigger state transitions. This lifecycle method is also deprecated after the 16.3 react version.

shouldComponentUpdate:

This method is used to determine whether a component will be updated or not. By default, it returns true. If the component doesn’t need to render after state or props are updated then we can return a false value.

This method helps to improve performance as it allows you to prevent a re-render if a component receives a new prop.

componentWillUpdate:

This method is executed before re-rendering the component when there are props & state changes confirmed by shouldComponentUpdate() which returns true. This lifecycle method is also deprecated after the 16.3 react version.

componentDidUpdate:

This method is used to update the DOM whenever prop or state changes. This will not fire if shouldComponentUpdate() returns false.

componentWillUnmount:

This method is called when a component is destroyed. So, we remove all event listeners associated with the component in this method.

React 16.3

getDerivedStateFromProps:

This method invoked just before calling render() and is invoked on every render. This exists for rare use cases where you need a derived state.

componentDidMount:

This method is executed after first rendering and you can call API and AJAX requests, DOM or state updates, and set up event listeners in this method.

shouldComponentUpdate:

This method is used to determine whether a component will be updated or not. By default, it returns true. If the component doesn’t need to render after state or props are updated then we can return a false value. This method helps to improve performance as it allows you to prevent a re-render if a component receives a new prop.

getSnapshotBeforeUpdate:

This method executed right before the rendered output is committed to the DOM. The value returned by this method will be passed into componentDidUpdate() lifecycle method.

componentDidUpdate:

This method is used to update the DOM whenever prop or state changes. This will not fire if shouldComponentUpdate() returns false.

componentWillUnmount:

This method is called when a component is destroyed. So, we remove all event listeners associated with the component in this method.

Till now we discuss all the life cycle methods used in class components. Now let’s see how we can make our functional component dynamic.

Introducing Hooks

Hooks are a new addition in React 16.8. Before React 16.8, if you needed dynamic content and features then you had to convert the functional components into class components. Now, we can use state and other React features without writing a class component with the help of Hooks-

  • Hooks are only applicable to functional components only.
  • We can use Hooks in functional components without rewriting any existing code.
  • Hooks don’t contain any breaking changes.
  • Hooks don’t replace your knowledge of React concepts.

React does not remove classes and their concepts are still applicable. You can still use your class components-

1.      Reuse stateful logic: It’s hard to reuse stateful logic between components. Hooks allow us to reuse stateful logic without changing your component hierarchy.

2.      Split Components: Complex components become hard to understand. Hooks let us split one component into smaller functions.

3.      Get rid of classes: Classes confuse both people and machines. We can use more of React’s features without classes using hooks.

What Is A Hook?

Hooks are functions. It let us “hook into” React state and lifecycle features from function components. For example, by using useState Hook provided by React we can add React state to function components. Hooks don’t work inside classes. They let us use React without classes.

Previously while writing a function component, we needed to add some state to it and had to convert it to a class component. Now, we can use Hooks inside our existing function component.

Now, till now you have an idea about what hooks and its importance, we’ll discuss more about hooks. React has some predefined hooks and we can create our custom hooks as well.

State Hook

useState is a Hook that we call inside a function component to add some local state. React will preserve this state between re-renders. It returns a pair where the first entity represents the current value of the state and second is a function that is used to update the state value.

We can call this function via an event handler or somewhere else. It’s similar to this.setState in a class.

Effect Hook

useEffect is a hook provided by React. It is used as componentDidMount, componentDidUpdate, and componentWillUnmount combined in the functional component as we do not use lifecycle methods in functional components.

We can use these lifecycle methods alternatively by using useEffect hook.

Custom Hook

By using custom hooks, we can share our logic between components. A custom Hook is a function that starts with a “use” keyword and it may call upon other Hooks.

For example, useFriendStatus is an example of custom Hook:

Rules of Hooks

  1. Only Call Hooks at the Top Level
  2. Calling Hooks inside loops, conditions, or nested functions is not permitted
  3. Only Call Hooks from React Functions
  4. Don’t call Hooks from regular JavaScript functions

Best Practises:

  • Call Hooks from React function components.
  • Call Hooks from custom Hooks

For more details about hooks, you can visit this link:

So now you have a basic idea about the react concept and enough motivation to get started with the react project. So, keep motivated and keep learning. For more details, you can refer React documentation-

https://reactjs.org/docs/getting-started.html

Hope you liked this blog!! You can ask your queries in the comment box below.

Thanks!!

Author: Prerna Saini
Share: