React JS

Overview
• 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.
• It was initially developed and maintained by
Facebook and later used in its products like
WhatsApp & Instagram.
 Overview
• 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.
• It uses component and data patterns that improve
readability and helps to maintain larger apps.
 React Environment Setup

Pre-requisite for ReactJS

• NodeJS and NPM
• React and React DOM
• Webpack
• Babel
• If you have npx and Node.js installed, you can
create a React application by using create-react-
app.
– npx create-react-app my-react-app
– cd my-react-app
– npm start
In React application, there are several files and folders in the root
directory. Some of them are as follows:
• node_modules: It contains the React library and any other third
party libraries needed.
• public: It holds the public assets of the application. It contains the
index.html where React will mount the application by default on
the <div id="root"></div> element.
• src: It contains the App.css, App.js, App.test.js, index.css, index.js,
and serviceWorker.js files. Here, the App.js file always responsible
for displaying the output screen in React.
• package-lock.json: It is generated automatically for any
operations where npm package modifies either the
node_modules tree or package.json. It cannot be published. It will
be ignored if it finds any other place rather than the top-level
package.
• package.json: It holds various metadata required for the project.
It gives information to npm, which allows to identify the project
as well as handle the project?s dependencies.
• README.md: It provides the documentation to read about React
topics.
 Important features of ReactJS
• 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.
•
React JSX
All of the 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. In other words,
JSX is an HTML-like syntax used by React that extends
ECMAScript so that HTML-like syntax can co-exist with
JavaScript/React code.
• The syntax is used by preprocessors (i.e., transpilers like
babel) to transform HTML-like syntax into standard
JavaScript objects that a JavaScript engine will parse.
• 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.
 – <div>Hello JavaTpoint</div>

– React.createElement("div", null, "Hello World");

• The above line creates a react element and
passing three arguments inside where the first is
the name of the element which is div, second is
the attributes passed in the div tag, and last is
the content you pass which is the "Hello World."
 Why use JSX?
• It is faster than regular JavaScript because it
performs optimization while translating the code
to JavaScript.
• Instead of separating technologies by putting
markup and logic in separate files, React uses
components that contain both. We will learn
components in a further section.
• It is type-safe, and most of the errors can be
found at compilation time.
• It makes easier to create templates.
 Nested Elements in JSX
import React, { Component } from 'react';
class App extends Component{
render(){
return(
<div>
<h1>React JS </h1>
<h2>Tutorial</h2>
<p>This website contains the best tutorials.</p>
</div>
);
}
}
export default App;
 JSX Attributes
• JSX use attributes with the HTML elements same
as regular HTML.
• JSX uses camelcase naming convention for
attributes rather than standard naming
convention of HTML such as a class in HTML
becomes className in JSX because the class is the
reserved keyword in JavaScript.
• We can also use our own custom attributes in JSX.
– For custom attributes, we need to use data- prefix.
– In the below example, we have used a custom
attribute data-demoAttribute as an attribute for
the <p> tag.
import React, { Component } from 'react';
class App extends Component{
render(){
return(
<div>
<h1>React JS</h1>
<h2>Tutorial</h2>
<p data-demoAttribute = "demo">This website contains the best tutorials.</p>
</div>
);
}
}
export default App;
 React Components
• 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.
• 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. Here, the root is
the starting component, and each of the other pieces becomes
branches, which are further divided into sub-branches.
Functional Components
• 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.
function WelcomeMessage(props) {
return <h1>Welcome to the , {props.name}</h1>;
}
• The functional component is also known as a stateless
component because they do not hold or manage state.
Class Components
• 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.
class MyComponent extends React.Component {
render() {
return (
<div>This is main component.</div>
);
}
}
• The class component is also known as a stateful component
because they can hold or manage local state.
 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.
• When you need immutable data in the component, you have
to add props to reactDom.render() method in the main.js file
of your ReactJS project and used it inside the component in
which you need. It can be explained in the below example.
 App.js
import React, { Component } from 'react';
class App extends React.Component {
render() {
return (
<div>
<h1> Welcome to { this.props.name } </h1>
<p> <h4> Contact Us </h4> </p>
</div>
);
}
}
export default App;

Main.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';

ReactDOM.render(<App name = “React JS" />, document.getElementById('app'));