ReactJS

Introduction
● ReactJS is one of the most popular JavaScript front-end libraries which has a strong foundation and a
large community.
● ReactJS is a declarative, efficient, and flexible JavaScript library for building reusable UI
components.
● It is an open-source, component-based front end library which is responsible only for the view layer of
the application.
● The main objective of ReactJS is to develop User Interfaces (UI) that improves the speed of the apps
● It uses virtual DOM (JavaScript object), which improves the performance of the app.
● The JavaScript virtual DOM is faster than the regular DOM.
● We can use ReactJS on the client and server-side as well as with other frameworks.
React Features

Currently, ReactJS gaining quick popularity as the best JavaScript framework among web developers. It is playing an
essential role in the front-end ecosystem. The important features of ReactJS are as following.
JSX

JSX stands for JavaScript XML. It is a JavaScript syntax extension. Its an XML or HTML like syntax used by
ReactJS. This syntax is processed into JavaScript calls of React Framework. It extends the ES6 so that HTML like
text can co-exist with JavaScript react code. It is not necessary to use JSX, but it is recommended to use in ReactJS.

Components

ReactJS is all about components. ReactJS application is made up of multiple components, and each component has
its own logic and controls. These components can be reusable which help you to maintain the code when working on
larger scale projects.

One-way Data Binding

ReactJS is designed in such a manner that follows unidirectional data flow or one-way data binding. The benefits of
one-way data binding give you better control throughout the application. If the data flow is in another direction, then
it requires additional features. It is because components are supposed to be immutable and the data within them
cannot be changed. Flux is a pattern that helps to keep your data unidirectional. This makes the application more
flexible that leads to increase efficiency.
Virtual DOM

A virtual DOM object is a representation of the original DOM object. It works like a one-way data binding.
Whenever any modifications happen in the web application, the entire UI is re-rendered in virtual DOM
representation. Then it checks the difference between the previous DOM representation and new DOM. Once it has
done, the real DOM will update only the things that have actually changed. This makes the application faster, and
there is no wastage of memory.

Simplicity

ReactJS uses JSX file which makes the application simple and to code as well as understand. We know that ReactJS
is a component-based approach which makes the code reusable as your need. This makes it simple to use and learn.

Performance

ReactJS is known to be a great performer. This feature makes it much better than other frameworks out there today.
The reason behind this is that it manages a virtual DOM. The DOM is a cross-platform and programming API which
deals with HTML, XML or XHTML. The DOM exists entirely in memory. Due to this, when we create a component,
we did not write directly to the DOM. Instead, we are writing virtual components that will turn into the DOM
leading to smoother and faster performance.
Pros and Cons of ReactJS

Advantage of ReactJS
● Easy to Learn and USe
● Creating Dynamic Web Applications Becomes Easier
● Reusable Components
● Performance Enhancement
● The Support of Handy Tools
● Known to be SEO Friendly

The search engines generally having trouble in reading JavaScript-heavy applications.ReactJS

overcomes this problem that helps developers to be easily navigated on various search engines. It is because
React.js applications can run on the server, and the virtual DOM will be rendering and returning to the browser
as a regular web page.

● The Benefit of Having JavaScript Library

● Scope for Testing the Codes
Disadvantage of ReactJS
1. The high pace of development

2. Poor Documentation

3.View Part

ReactJS Covers only the UI Layers of the app and nothing else.

4. JSX as a barrier
functional

React Component class

● Earlier, the developers write more than thousands of lines of code for developing a single page
application. These applications follow the traditional DOM structure, and making changes in them was
a very challenging task. If any mistake found, it manually searches the entire application and update
accordingly. The component-based approach was introduced to overcome an issue. In this approach,
the entire application is divided into a small logical group of code, which is known as components.
● A Component is considered as the core building blocks of a React application. It makes the task of
building UIs much easier. Each component exists in the same space, but they work independently from
one another and merge all in a parent component, which will be the final UI of your application.
● In ReactJS, we have mainly two types of components. They are
● Functional Components
● Class Components
● Every React component have their own structure, methods as well as APIs. They can be reusable as per
your need. For better understanding, consider the entire UI as a tree.
UI as a tree.
Functional Components

stateless component
In React, function components are a way to write components that only contain a render method and don't have
their own state. They are simply JavaScript functions that may or may not receive data as parameters. We can
create a function that takes props(properties) as input and returns what should be rendered. A valid functional
component can be shown in the below example.

1. function WelcomeMessage(props) {
2. return <h1>Welcome to the , {props.name}</h1>;
3. }

The functional component is also known as a stateless component because they do not hold or manage state. It can
be explained in the below example.
1. import React, { Component } from 'react';
2. class App extends React.Component {
3. render() {
4. return (
5. <div>
6. <First/>
7. <Second/> Output:
8. </div>
9. );
10. }
11. }
12. class First extends React.Component {
13. render() {
14. return (
15. <div>
16. <h1>JavaTpoint</h1>
17. </div>
18. );
19. }
20. }
21. class Second extends React.Component {
22. render() {
23. return (
24. <div>
25. <h2>www.javatpoint.com</h2>
26. <p>This websites contains the great CS tutorial.</p>
27. </div>
28. );
29. }
30. }
31. export default App;
Class Components
stateful component

Class components are more complex than functional components. It requires you to extend from React.
Component and create a render function which returns a React element. You can pass data from one class to
other class components. You can create a class by defining a class that extends Component and has a render
function. Valid class component is shown in the below example.

1. class MyComponent extends React.Component {

2. render() {
3. return (
4. <div>This is main component.</div>
5. );
6. }
7. }
The class component is also known as a stateful component because they can hold or manage local state. It can be
explained in the below example.

Example

In this example, we are creating the list of unordered elements, where we will dynamically insert StudentName for
every object from the data array. Here, we are using ES6 arrow syntax (=>) which looks much cleaner than the old
JavaScript syntax. It helps us to create our elements with fewer lines of code. It is especially useful when we need to
create a list with a lot of items.
1. import React, { Component } from 'react';
2. class App extends React.Component {
3. constructor() {
4. super();
5. this.state = {
6. data:
7. [
8. {
9. "name":"Abhishek"
10. },
11. {
12. "name":"Saharsh"
13. },
14. {
15. "name":"Ajay"
16. }
17. ]
18. }
19. }
20. render() {
21. return (
22. <div>
23. <StudentName/>
24. <ul>
25. {this.state.data.map((item) => <List data = {item} />)}
26. </ul>
27. </div>
28. );
29. }
30. }
31. class StudentName extends React.Component {
32. render() {
33. return (
34. <div>
35. <h1>Student Name Detail</h1>
36. </div>
37. );
38. }
39. }
40. class List extends React.Component {
41. render() {
42. return (
43. <ul>
44. <li>{this.props.data.name}</li>
45. </ul>
46. );
47. }
48. }
49. export default App;
React Component API

reactJS component is a top-level API. It makes the code completely individual and reusable in the application. It
includes various methods for:

○ Creating elements
○ Transforming elements
○ Fragments

Three most important methods available in the React component API.

1. setState()
2. forceUpdate()
3. findDOMNode()
React JSX

React components have a render function. The render function specifies the HTML output of a React component.
JSX(JavaScript Extension), is a React extension which allows writing JavaScript code that looks like HTML

JSX provides you to write HTML/XML-like structures (e.g., DOM-like tree structures) in the same file where you
write JavaScript code, then preprocessor will transform these expressions into actual JavaScript code. Just like
XML/HTML, JSX tags have a tag name, attributes, and children.
React State

The state in a component can change over time.

A component with the state is known as stateful components.

It is the heart of the react component which determines the behavior of the component and how it will render.

They are also responsible for making a component dynamic and interactive.

A state must be kept as simple as possible. It can be set by using the setState() method and calling setState() method
triggers UI updates. A state represents the component's local state or information. It can only be accessed or modified
inside the component or by the component directly. To set an initial state before any interaction occurs, we need to
use the getInitialState() method.

For example, if we have five components that need data or information from the state, then we need to create
one container component that will keep the state for all of them.
React Props

Props stand for "Properties." They are read-only components. It is an object which stores the value of attributes of a
tag and work similar to the HTML attributes. It gives a way to pass data from one component to other components. It
is similar to function arguments. Props are passed to the component in the same way as arguments passed in a
function.

Props are immutable so we cannot modify the props from inside the component. Inside the components, we can add
attributes called props. These attributes are available in the component as this.props and can be used to render
dynamic data in our render method.
React Forms

React offers a stateful, reactive approach to build a form. The component rather than the DOM usually handles the
React form. In React, the form is usually implemented by using controlled components.

There are mainly two types of form input in React.

1. Uncontrolled component

The uncontrolled input is similar to the traditional HTML form inputs. The DOM itself handles the form data. Here,
the HTML elements maintain their own state that will be updated when the input value changes.

2. Controlled component

In the controlled component, the input form element is handled by the component rather than the DOM. Here,
the mutable state is kept in the state property and will be updated only with setState() method.