Application Framework with React.js and how to create frontend using React.js

5 min readMay 14, 2022

Overview of this blog?

This is written to get knowledge about React.js ,component life cycle and create frontend.

React.js

React.js is an open-source, declarative, and flexible JavaScript library that developers love using to build scalable, simple, and fast frontend interfaces for single — page apps or multi page web apps.

React is responsible for the UI design React makes code easier to debug by dividing them into components.

Features of React

· One way data binding

· Performance

· Extensions

· Conditional statements

· Components

· Simplicity

· Virtual DOM

· JSX (JavaScript syntax Extension)

Benefits of react.js for frontend development

Speed, Flexibility, Performance, Usability, Reusable Components,
It’s easy to learn.
It helps to build rich user Interface.
It allows writing custom performance.

Props Vs State

props

Props are read only.
Props cannot be modified.

state

State changes can be asynchronous.
State can be modified using this. setState.

Key difference between props and state is that state is internal and controlled by the component itself while props are external and controlled by whatever renders the component.

Component Life Cycle

Each component in React has a lifecycle which you can monitor and manipulate during its three main phases.

· Monitoring

· Updating

· Unmounting

React has four built-in methods that gets called, in this order, when mounting a component:

1. constructor ()

2. getDerivedStateFromProps ()

3. render ()

4. componentDidMount ()

React has five built-in methods that gets called, in this order, when a component is updated:

1. getDerivedStateFromProps ()

2. shouldComponentUpdate ()

3. render ()

4. getSnapshotBeforeUpdate ()

5. componentDidUpdate ()

React has only one built-in method that gets called when a component is unmounted:

componentWillUnmount ()

React Constructor

The React constructor is a method that’s automatically called during the creation of an object from a class.

Constructors are used for two key objectives.

o To initialize the local state of the component by assigning an object to this. State.

o To bind event handlers that occur in the component.

Call Super(props) Before using this. Props.

Never call setState () Inside constructor ().

Purpose of render ()

· React renders HTML to the web page by using a function called render ().

· The purpose of the function is to display the specified HTML code inside the specified HTML element.

· In the render () method, we can read props and state and return our jsx code to the root component of our app.

· In the render () method, we cannot change the state, and we cannot cause side effects. (Such as making an HTTP request to the webserver)

React Context API

Context provides a way to pass data through the component tree without having to pass props down manually at every level.

What are React Hooks?

With the new addition of hooks (along with React 16.8), functional components could maintain states and lifecycle features without using classes. Simply hooks are features that allow you to “hook into “React state and lifecycle features from functional components.

Advantages of React hooks

More flexibility in reusing an existing piece of code.
There is no need to refactor the functional component into a class component when it grows complex.
You don’t have to worry about this at all.
No more binding for methods.
It is simpler to distinguish logic and UI using hooks.

Babel

Babel acts as this compiler allowing us to leverage all the benefits of jsx while building React components.

Webpack

Webpack is a popular module bundling system build on top of Node.js. It can handle not only combination and minification of JavaScript and CSS files, but also other assets such as image files through the use of plugins.

What is Parcel in React.js?

Parcel is a “Blazing fast, Zero configuration web application bundler”.

How to setup a React App with Parcel

* Step 1: Create a new folder for project.

* Step 2: Create Package. Json file.

In terminal, cd into the new folder and run.

npm init -y

This automatically creates the package.json files.

* Step 3: Install parcel, React and ReactDOM

npm install –save -dev parcel -bundler

npm install react react-dom

* Step 4: Add a “start” script to package. Json

In a package.json file, in the “script” section add the following “start” script.

“start”:” parcel index.html — open”

Step 5: Create the index.html file and add a couple of lines.

In vs code, you can create a new file called index.html and use the built-in emmet shortcut to create a standard boilerplate HTML file by typing an exclamation point and hitting the Tab key on your keyboard.