React

A JavaScript library for building user interface

What is React ?

• A declarative, efficient, and flexible JavaScript library for building user interfaces

• React is a JavaScript library created by Facebook

• It helps us to build fast and interactive user interface for the web as well as mobile application.

• It is an open source component-based frontend library

• In MVC architecture, the react is the "View" which is responsible for how the app looks and feels.

• React is mainly used for creating SPA(single page application)

what is SPA and MPA

In MPA there are multiple pages.

In SPA there is only one main page

Why React?

• Easy Creation of dynamic web application

• Performance enhancement

• Reusable component

• small Learning Curve

• can be used for mobile apps

features of JSX

JSX

• JSX is syntax extension to the JavaScript. It is used with react to describe what the user interface looks like.

• By using JSX, you can write html structure in the same file that contains JavaScript code.

• JSX helps in making the code easier to understand and debug as it avoids usage of DOM structures which are rather complex.

Performance

• React uses VDOM, which makes the web applications run much faster than those developed with alternate front-end frameworks.

• React breaks a complex user interface into individual components, allowing multiple users to work on each component simultaneously, thereby speeding up the development time.

Debugging

• React applications are easy to test due to a large developer community.

• Facebook even provides a small browser extension that makes React debugging faster and easier.

BABEL

• Babel is a JavaScript compiler that can translate markup or programming languages into JavaScript.

• With Babel, you can use the newest features of JavaScript (ES6 - ECMAScript 2015).

• Babel is available for different conversions. React uses Babel to convert JSX into JavaScript.

• NOTE: <script type="text/babel"> is needed for using Babel.

Create-react-app cli

• library provides a command you can use to initiate a new Webpack- powered React app

• configure a "black box" Webpack setup for you. It provides you with the benefits of a Webpack setup while abstracting away the configuration details.

Create-react-app cli

• library provides a command you can use to initiate a new Webpack- powered React app

• configure a "black box" Webpack setup for you. It provides you with the benefits of a Webpack setup while abstracting away the configuration details.

Folder Structure

npm basic commands

• $ npm init

• $ npm init —y

• $ npm i <package-name>/ -g <package-name>/ <package-name> -- save-dev

• $ npm test

Components

• Building blocks of any React application, and a single app usually consists of multiple components

• A piece of the user interface

• React splits the Ul into independent, reusable parts that can be processed separately.

2 types of component are

stateless Functional components

Stateful class components

Functional Components

• Have no state of their own and only contain a render method ,so they are also called stateless components

• They may derive data from other components as props (properties).

function Greeting(props) {

return(

<div>

<h1>Hello, {props.name} Welcome to React</h1>

</div>

)

}

Class based Components

• can hold and manage their state and have a separate render method for returning JSX on the screen

• Also called stateful components, as they can have a state.

class Greeting extends React.Component {

render() {

return(

<div>

<h1>Hello {this.props.name}, Welcome to React</h1>

</div>

)

}

Functional vs class-based component

State

• built-in React object that is used to contain data or information about the component

• A component's state can change over time; whenever it changes, the component re-renders

• The change in state can happen as a response to user action or system-generated events, and these changes determine the behavior of the component and how it will render.

props

• Props are short for properties

• It is a React built-in object which stores the value of a tag's attributes and works similar to the HTML attributes.

• It provides a way to pass data from one component to other components in the same way as arguments are passed in a function.

setSate() method

• This is the primary method you use to update the user interface in response to event handlers and server responses

• enqueues changes to the component state and tells React that this component and its children need to be re-rendered with the updated state

syntax: setState(updater, [callback])

Component lifecycle method

Conditional Rendering

• you can create distinct components that encapsulate behavior you need. Then, you can render only some of them, depending on the state of your application.