REACT - A JAVASCRIPT FRAMEWORK

Summary

Introduction

React, or ReactJS, is a JavaScript library for building user interfaces or UI components. It is fast, scalable, and straightforward. It is maintained by Facebook and a group of other individual developers. React is used as a base for many single-page and mobile applications. React also requires the use of some other libraries for state management and routing.

 

Many famous companies like Instagram, Netflix, and Uber use React.

WHAT IS JSX?

JSX stands for JavaScript XML. It allows us to write HTML code inside React and place them in DOM without using the createElement() and appendChild() method. It is not necessary to write in JSX, but it makes it easier to work with React.

It looks like:

        const a = <h6>Hello World</h6>;

The JSX expressions can be embedded this way:

        const example = <h6>Hello World</h6>;

    ReactDOM.render(

            example,

            Document.getElementById('Example')

    );

 

FUNCTIONAL COMPONENTS AND PROPS:

The Components in React allow us to split the code into different parts. We can work on these different components independently and these components can be reused later in any other program.

Components are like functions that accept inputs and return React elements indicating what to appear on the screen.

Functions like these components, which accept parameters/inputs are known as 'functional components.'

Props are the inputs provided, which we have mentioned earlier.

We can pass one or more props into a component.

These props should be read-only regardless of whether the components are functional or class-based. These are known as pure as they do not change their output given the same inputs.

 

State and useState():

React components have their built-in state object. The state object is where we store the property values that belong to the component. When the state object changes, the component reRenders.

The state object can be initialized in the constructor method, and we can include any number of properties. These states can be used anywhere in the component using 'this.state.propertyname'. We can also set these states using the setState() method.

The useState() is a React hook that enables us to use state variables in functional components. The useState() returns a state and a function that does the work of setState().

e.g.

 

    const [set,setState] = useState(‘value’)

 

Here, the set stores the 'value' and the setState is the function that allows us to change the state of the set.

 

LIFECYCLE:

The components in React have a life cycle. This can be monitored and modifications can be done in three essential phases.

The three phases are:

Mounting:

Mounting refers to the showing up the elements in the DOM. It consists of some built-in methods like constructor(), getDerivedStateFromProps(), render() and componentDidMount()

Here, the render() method is always called, and other methods are optional.

Updating:

The next phase is the stage when the component is updated. The update takes place whenever there is a change in the state or props. This also has some built-in methods like getDerivedStateFromProps(), shouldComponentUpdate(), render(), getSnapshotBeforeUpdate() and componentDidUpdate().

Here also, the render() method is always called, and others are optional.

Unmounting:

The next phase in the life cycle is when a component is removed from the DOM or Unmounted as React likes to call it. React has only one built-in method that gets called when a component is unmounted: componentWillUnmount()

 

REACT HOOKS:

Hooks are a new addition to React, which helps to improve the performance of the app. These hooks allow us to use the state and different other features in functional components without writing classes.

useState() mentioned earlier is one of the hooks. It lets us add React state to the 'function components.' It takes a parameter, which is the current state that returns a pair of values: the current state and a function that updates it.

Similarly, useEffect() is another hook. By using this Hook, we tell React that our component needs to do something after rendering. React remembers the passed function and calls it later after performing the DOM updates.

There are many other react hooks like useRef, useCallBack, useMemo, useReducer, and useContext. Even these are used in combinations to perform different types of tasks.

Also, along with these hooks, we can even set up our own react hooks and extract the component's logic to make them into reusable functions.

 

REACT ROUTER:

React Router is the standard routing library for React. It keeps the UI in sync with the URL. It has a simple API with powerful features like location transition handling, dynamic route matching, and code loading built right in.

You can install React Router from the public npm registry.

npm install react-router-dom

For this, we can import the BrowserRouter, Switch, Route, and links from the react-router-dom.

import {

  BrowserRouter as Router,

  Switch,

  Route,

  Link

} from "react-router-dom";

• A <Link> renders a <a> with a real 'href'.
• The <Switch> looks through all its children <Route>’s (containing path attribute) and renders the first one that matches the current URL.
• And all of these are included under the <BrowserRouter> tag.

e.g.

WHY REACT:

Simplicity

ReactJS is just simpler to grasp right away. The component-based approach, well-defined life cycle, and the use of plain JavaScript make React very simple to learn, build professional web and mobile applications. React uses special syntax, JSX, which allows us to mix HTML with JavaScript.

Easy to learn

Anyone with basic knowledge of programming can easily understand React. In contrast, other frameworks like Angular and Ember are referred to as 'Domain-specific Languages,' implying that they are challenging to learn. For React, we need nothing but basic knowledge of CSS and HTML.

Native Approach

React can be used to create mobile applications (React Native). React is reusable, meaning extensive code re-usability is supported. So we can make IOS, Android, and Web applications at the same time.

Testability

ReactJS applications are super easy to test. React views are treated as functions of the state so that we can manipulate the state that we pass to the ReactJS view and look at the output, triggered actions, events and functions.

This blog has been submitted by Cyborg, NIT Rourkela under the Robocraze Club Outreach Program.