React js

React-Js
Rajesh Kolla
Full-stack development ,Azure Architect
Twitter: @RajeshKolla18
LinkedIn: https://be.linkedin.com/in/razeshkolla

What is React?
• React is a JavaScript library created by Facebook.
• It is a library for creating user interfaces
• Most people think it is framework but it is library
• React is a declarative, efficient, and flexible JavaScript
library for building user interfaces. It lets you compose
complex UIs from small and isolated pieces of code called
“components”.
• React can be used in the development of single-page or
mobile applications.
• Current stable release: 16.13.1 (March 19, 2020)

React Virtual Dom
• Re-render everything on every update?
• It sounds expensive but it is not
• React creates an in-memory data structure cache,
computes the resulting differences, and then updates the browser's
displayed DOM efficiently
1. Create lightweight description of component UI
2. Diff it with the old one
3. Compute minimal set of changes to apply to the DOM

React ES6 (ECMA 6)
• React uses ES6
• ES6 will support Classes , Arrow functions( Lambda
functions), variables , interfaces , local variable , blocked
variables , constants etc
• Refer http://es6-features.org/ for more details

Create React App
• Install Node JS and Npm
Note:- To check if node.js Installed , run node –v
To check if npm Installed , run npm -v
• Following commands for Create a new React APP
( npx is not typo – its package runner tool that comes with npm 5.2+)
1. npx install -g create-react-app
2. npx create-react-app my-app
3. Cd my-app
4. npm start
Note:- It creates React Development environment (Development server , webpack , Babel)
• Following are steps to add React to Existing Web site
1. Add a DOM Container to the HTML
<div id=“container”> </div>
2. Add following script Tags to add react dom
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
3.Add elements using React DOM
const domContainer = document.querySelector('#container’);
ReactDOM.render(e(LikeButton), domContainer);
const domContainer = document.querySelector('#like_button_container');ReactDOM.render(e(LikeButton), domContainer);
const domContainer = document.querySelector('#like_button_container');ReactDOM.render(e(LikeButton), domContainer);

Adding Type script to React project
• npx create-react-app my-app --template typescript
• npm install -g react-cli react
• npm install --save typescript @types/node @types/react @types/react-dom
@types/jest
• JSX ( Java script + XML): write html tags ( in XML format) in Java script
• Run following commands to add JSX to a Project
• npm init –y
• npm install babel –cli@6 babel-preset-react-app@3
• npx babel –watch src --out-dir . --presets react-app/prod

VS Code extension
• React Native Tools
• Simple React snippets
• Debugger for chrome
• ESLint
• Material Icon Theme
• Path Intellisense
• Prettier - Code formatter
• TSLint (type script)
• Online Editor :
1. code pen
2. https://codesandbox.io/s/new

Class-based vs Functional components

React JSX
• JSX stands for Java script xml
• JSX allows to write HTML elements with combination of javascript
• JSX converts HTML tags into react elements and makes developer life
easier
Example:-1 (with JSX)
const html=<em> hi react </em>
ReactDOM.render(html, document.getElementByID(‘root’));

React Components
• React components are building components not templates
• Components are the building blocks of React.
• Very similar to Directives in Angular JS
• You can think of a component as a collection of HTML, CSS, JS
• Components can be written in pure Javascript or JSX

React Render Function
• React renders HTML to the web page by using function called ReactDOM.render()
• it takes two arguments , HTML code and an HTML element
Example-1:-
ReactDOM.render(<p>From react</p>, document.getElementById(‘title'));
<body> <heder id=“title”></header>
Example-2:-
const htmlElement=(<table>
<tr><th>Name<th></tr>
<tr><td>react person></td> </tr>
<tr><td>No Angular person></td> </tr>
</table>);
ReactDOM.render(htmlElement,document.getElement(‘personsTable'));
<body> <div id=“personsTable”></header>

Example:-1 (with out JSX)
const html=React.createElement(‘em’,{},’hi react’);
ReactDOM.render(html, document.getElementByID(‘root’));
Pure Java script

Component Lifecycle Creation
Each component in React has a lifecycle which you can monitor and manipulate
during its three main phases.
The three phases are:
• Mounting
• Updating
• Unmounting.
1.Mounting:- Mounting means putting elements into DOM.
React has four built-in methods that gets called , in this order , when mounting component
a) constructor()
b) getDerivedStateFromProps()
c) render()
d) componentDidMount()
Note:- In this phase , render method is mandatory and always be called , the others are optional and will be
called only if we declared them.

i.Constructor:- the constructor() method is called before anything else, when the component is initiated, and it is
the natural place to set up the initial state and other initial values.
The constructor() method is called with the props, as arguments, and you should always start by calling
the super(props) before anything else, this will initiate the parent's constructor method and allows the component to
inherit methods from its parent (React.Component).
Ex:-
constructor(props) {
super(props);
this.state = {counter: “1"};
}

ii. getDerivedStateFromProps:- The getDerivedStateFromProps() method is called right before rendering the
element(s) in the DOM.
This is the natural place to set the state object based on the initial props.
Ex:-
static getDerivedStateFromProps(props, state) {
return {counter: props.counter };
}
iii. render:- The render() method is required, and is the method that actual outputs HTML to the DOM.
Ex:-
render(){
return (
<div >
<p>Current Time : {this.state.curTime}</p>
</div>
);
}
iv. componentDidMount:- The componentDidMount() method is called after the component is rendered.
This is where you run statements that requires that the component is already placed in the DOM.
Example:-
state={
curTime : new Date().toLocaleString(),
}

componentDidMount() {
setTimeout(() => {
this.setState({curTime : new Date().toLocaleString() })
}, 1000)
}
2. Updating:- Updating is next phase in the lifecycle is when a component is updated.
A component is updated whenever there is a change in the component's state or props. React has five built-in
methods that gets called in the following order when a component is updated:
a) getDerivedStateFromProps()
b) shouldComponentUpdate()
c) render()
d) getSnapshotBeforeUpdate()
e) componentDidUpdate()
Note:- In this phase , render method is required and will always be called , the others are optional and will be called if
we define them.
a)getDerivedStateFromProps:- In the updating phase, the getDerivedStateFromProps method is first method is
called when a component gets updated.
Example:-
static getDerivedStateFromProps(props, state) {
return {counter: props.counter };
}

b)shouldComponentUpdate:-In the shouldComponentUpdate() method you can return a Boolean value that
specifies whether React should continue with the rendering or not. The default value is true.
Example:-
shouldComponentUpdate() {
return false;
}
c)render:- The render() method is of course called when a component gets updated, it has to re-render the HTML to
the DOM, with the new changes.
d)getSnapshotBeforeUpdate:-In the getSnapshotBeforeUpdate() method you have access to
the props and state before the update, meaning that even after the update, you can check what the values were before the
update.
If the getSnapshotBeforeUpdate() method is present, you should also include the componentDidUpdate() method,
otherwise you will get an error.
3.Unmounting:- unmounting is last phase in the life cycle . React likes to call it. when a component is removed from the
DOM, React has only one built-in method that gets called when a component is unmounted:
componentWillUnmount()

React developer tools : https://reactjs.org/blog/2015/09/02/new-react-developer-tools.html#installation
NB:- following is the command used to Install bootstrap using npm
npm install bootstrap
Following is other way of exporting component and we can call react component using component
element by using render function.
1. Creating React Component:-
if install “React code snippets” extensions in Visual code. Just type imrc and cc for react component snippets

• Following expression give compilation error . Babel doesn't know how to compile this.
• Render function needs one parent element so we can wrap up with div
Note:
1. always use parenthesis return react element
2. Use React.Fragement element to avoid rending additional div

React js

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to React js

Similar to React js (20)

More from Rajesh Kolla

More from Rajesh Kolla (6)

Recently uploaded

Recently uploaded (20)

React js