React basics

Intro
ReactJS is a declarative, efficient, and flexible JavaScript library for
building reusable UI components. It is an open-source, component-
based front end library responsible only for the view layer of the
application.It lets you compose complex UIs from small and isolated
pieces of code called “components”
Latest Version: 16.13.1 (March, 2020)

Ways To Install ReactJs
● Using the npm command
● Using the create-react-app command

React Features
● JSX
● Components
● One way data binding
● Virtual Dom
● Simplicity
● Performance

React
Components
● Functional Component
● Class Component

Class Component
class ShoppingList extends React.Component {
render() {
return (
<div className="shopping-list">
<h1>Shopping List for
{this.props.name}</h1>
<ul>
<li>Instagram</li>
<li>WhatsApp</li>
<li>Oculus</li>
</ul>
</div>
);
}
}
A class component takes
in parameters, called
props (short for
“properties”), and returns a
hierarchy of views to
display via the render
method.

Function
Component
function Welcome(props) {
return <h1>Welcome to the ,{props.name}</h1>;
}
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.

“React State”
The state is an updatable structure that is used to contain data or information about the
component. They are also responsible for making a component dynamic and interactive.
It can be set by using the setState() method and calling setState() method triggers UI updates.
this.state = { displayBio: true };
this.setState({displayBio: !this.state.displayBio});

“React Props”
Props stand for "Properties." They are read-only components.It gives a way to pass data from
one component to other components.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.
These attributes are available in the component as this.props and can be used to render
dynamic data in our render method.

React Keys
A key is a unique identifier. In React, it is used to identify which items have
changed, updated, or deleted from the Lists. It is useful when we dynamically
created components or when the users alter the lists. It also helps to determine
which components in a collection needs to be re-rendered instead of re-
rendering the entire set of components every time.
const stringLists = [ 'Peter', 'Sachin', 'Kevin', 'Dhoni', 'Alisa' ];
const updatedLists = stringLists.map((strList, index)=>{
<li key={index}> {strList} </li>;
});

React Refs
Refs is the shorthand used for references in React. It is similar to keys in React.
It is an attribute which makes it possible to store a reference to particular DOM
nodes or React elements. It provides a way to access React DOM nodes or
React elements and how to interact with it.
In React, Refs can be created by using React.createRef();

When To Use Refs
● When we need DOM
measurements such as
managing focus, text
selection, or media
playback.
● It is used in triggering
imperative animations.
● When integrating with third-
party DOM libraries.

Thanks!
Lets Move To Example...

React basics

More Related Content

What's hot (20)

Similar to React basics (20)

Recently uploaded (20)

React basics