Step to ReactJS

What is React?

ReactJS is an open-source most popular front-end JavaScript library for building Web applications. It used for building user interfaces specifically for single page applications. React was created by Jordan Walke. He is a Facebook software engineer. React deployed on Facebook’s newsfeed(2011) and on Instagram(2012).Main features are speed, simplicity and scalability. So, react is suitable for large web application which use data and change over the time without reloading entire page.

React have number of features that help speed up workflow. We can create and use components without having to copy and paste the same code each time. Reading this document, you can get an understanding of React’s most essential concepts such as virtual DOM, JSX, props & state, lifecycle methods, webpack and react hook.

Why Learn ReactJS?

ReactJS offers graceful solutions to some of front-end programming’s most persistent issues, allowing you to build dynamic and interactive web apps with ease. It’s fast, scalable, flexible, powerful, and has a robust developer community that’s rapidly growing. There’s never been a better time to learn React.

To configure app with ‘create-react-app’, you’ll save time setting up your app, as the terminal does it for you. It not only sets up the basic file structure, but also comes with built-in features like service workers, meaning your website will be automatically cached so it works offline as well.

Notable features

Single-Way data flow

In React immutable values are passed to the components renderer as properties in its HTML tags. Data flow from the parent component to the child component. The component cannot directly modify any properties. But it can pass a call back function with the help of which we can do modification. This process is known as “properties flow down; actions flow up”.

Virtual DOM

Another notable feature is the use of a virtual Document Object Model, DOM. React creates an in-memory data structure cache, computes resulting differences and then updates the browser’s displayed DOM efficiently. This process called as reconciliation. It allows programmer to write code as if the entire page is rendered on each change, while React libraries only render subcomponents that actually change. It saves the effort of recalculating the CSS style, layout for the page and rendering for the entire page.

JSX

In React, instead of using regular JavaScript for templating, it uses JSX(JavaScript Syntax Extension). Similar in appearance to HTML/XML, JSX provides a way to structure component rendering using syntax familiar to many developers. React components are usually written using JSX. Also it Prevents cross-site scripting attacks(converting expressions to strings). Also this is similar to another extension syntax created by Facebook for PHP(XHP).

Props & state

Props used to pass data & behavior from container components to child components. Also, Props are read only, and State is read write enabled. State used to keep data which can be updated. To update state we can use “setState({})”. But “setState({})” method is asynchronous.So, to use state and props inside setState we need to use “setState((state,props)=>{})” method.

React Hooks

Hooks are functions that let developers “hook into” React state and lifecycle features from function components. Hooks do not work inside classes. It let use React without classes.React give a few built-in hooks. As a example, useState, useContext, useReducer, useMemo, useEffect). Others are documented in the Hooks API.

There are rules of hooks which describe the characteristic code pattern that hooks rely on. Those are the modern way to handle state with React.

1. Hooks should only be called at the top level (not inside loops or if statements).

2. Hooks should only be called from React function components and custom hooks, not normal functions or class components.

The rules apply to both usage of hooks and the implementation of custom hooks, which may call other hooks.

Lifecycle methods

Lifecycle methods for class-based components use a form of hooking. It allows the execution of code at set points during the component’s lifetime.

● Constructor : Declare state and bind context to life cycle events, Do not call setState, Always call super(props) to bind this.props.

● render : This is the most important lifecycle method. and the only required one in any component. It is usually called every time the component’s state is updated, which should be reflected in the user interface. Render return JSX, Portal, Fragments, Strings, boolean etc.

● componentDidMount : This is called once the component has “mounted” (the component has been created in the user interface, often by associating it with a DOM node). This is commonly used to trigger data loading from a remote source via an API. Fires after component is mount to DOM.

● componentDidUpdate : Allows the developer to prevent unnecessary re-rendering of a component by returning false if a render is not required. Use to interact with DOM after a Component update.

● componentWillUnmount : This is called immediately before the component is torn down or “unmounted”. This is commonly used to clear resource-demanding dependencies to the component that will not simply be removed with the unmounting of the component

● componentDidCatch : componentDidCatch for logging and side effects.

Webpack

Webpack is the most famous module bundler. It Support for build system as well as module bundling. This is easy to configure with 4 steps.( entry -> loaders -> plugins -> output)

Create a React App

To create the React project using ‘create-react-app’, we need to have Node.js and NPM installed. then opened the terminal and run the following steps:

• Type following command on terminal and it will create react app for you.

npx create-react-app my_app

• Navigate to the react project folder.

cd my_app

· When the terminal announces it’s finished, you’ll see a folder on your selected path. Following command open the react project in the browser so you can preview your changes.

npm start