Reactjs Lanh Nguyen

ReactJS is a JavaScript library for building user interfaces React allows developers to create large web applications which can change data, without reloading the page. It was created by Jordan Walke, a software engineer at Facebook. It was first deployed on Facebooks newsfeed in 2011 and later on Instagram.com in 2012.

Author: Lanh Nguyen

Date: Fri, 23-Jun-2017

1 Overview

ReactJS is a JavaScript library for building user interfaces

Notable features

It was created by Jordan Walke, a software engineer at Facebook It was first deployed on Facebook's newsfeed in

2011 and later on Instagram.com in 2012

React allows developers to create large web applications which can change data, without reloading the page

 One-way data flow

Properties, a set of immutable values, are passed to a component's renderer as properties in its HTML tag A component cannot directly modify any properties passed to it, but can be passed callback functions that do modify values

2 Environment setup

1 Install NodeJS and NPM

2 Install global packages

In this step install babel and babel-cli to use the babel plugin

C:\Users\username>npm install -g babel

C:\Users\username>npm install -g babel-cli

3 Create Root Folder

C:\Users\username\Desktop>mkdir reactApp

C:\Users\username\Desktop\reactApp>npm init

After the folder is created, create empty pakage.json file inside by running npm init

4 Add dependencies and plugins

C:\Users\username>npm install webpack save

C:\Users\username>npm install webpack-dev-server save

C:\Users\username\Desktop\reactApp>npm install react save

C:\Users\username\Desktop\reactApp>npm install react-dom save

2 Environment setup

4 Add dependencies and plugins

C:\Users\username\Desktop\reactApp>npm install babel-core

C:\Users\username\Desktop\reactApp>npm install babel-loader

C:\Users\username\Desktop\reactApp>npm install babel-preset-react

C:\Users\username\Desktop\reactApp>npm install babel-preset-es2015

test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader', query: {

presets: ['es2015', 'react'] } }

] }}

module.exports = config;

2 Environment setup

6 Set Compiler, Server and Loaders

Open package.json inside ‘scripst’ object add the start comand

"start": "webpack-dev-server hot"

After add this command we can use npm start command to start the server

2 Environment setup

8 App.jsx and main.js

import React from 'react';

class App extends React.Component {

export default App;

import React from 'react';

import ReactDOM from 'react-dom'; import App from './App.jsx';

ReactDOM.render(

<App />, document.getElementById('app') );

3 Create React App

Create React App is a new officially supported way to create single-page React applications.It offers a modern build setup with no

configuration

Installation: npm install -g create-react-app

Create an App: create-react-app hello-world

After creating app is done

4 JSX

JSX = JS+XML

JSX is a syntax extension to Javascript It is used in React to create component tag like HTML.

import React from 'react';

class HelloComponent extends React.Component{

4 JSX

Attributes: We may use quotes to specify string literals as attributes:

class HelloComponent extends React.Component{

render(){

return <h1 tabIndex="0" >Hello React</h1>

}

}

Javascript expressions: Javascript expressions can be used inside JSX with curly brackets {}:

class App extends React.Component {

return (//note: in the case multiple must use ‘()’

<div>// one parent tag only

4 JSX

Ternary operators: We cannot use if–else statements inside JSX but we can use ternary expressions instead

class App extends React.Component {

4 JSX

Why use JSX with ReactJs

• JSX syntax is like XML, the way to write code is similar to HTML tag So that, in the case component is complex, when look at structure it is easy for us to understand the meaning of component

• JSX code is shorter than JS code and easier to understand than JS code

5 Virtual DOM

HTML DOME TREE

It finds HTML elements: document.querySelector,Document.getElementById…

Updated elements content: element.innerHTML, element.appendChild, removeChild…

=>if we update the Real DOM browser must re-render all document This is what takes time

⇒Updating the Real DOM is slow

⇒ReactJS use Virtual DOM and doesn’t use Real DOM

Virtual DOM is in-memory representation of Real DOM It is lightweight JavaScript object which is copy of Real DOM

Whenever anything may have changed, the entire UI will be re-rendered in a Virtual DOM(this mean it execute in memory) then request browser re-render in Real DOM => faster

6 Components

Components let us split the UI into independent, reusable pieces, and think about each piece in isolation

Conceptually, components are like Javascript function They accept arbitrary inputs(called “props”) and return React elements describing what should appear on the screen

The way to define a component

6 Components

Composing Components

const Content = () => <h1> Content </h1>

const Header = () => <h1> Website header</h1>

const Footer = () => <h1> Footer </h1>

const Website = () => <div>

<Header />

<Content />

<Footer />

</div>

7 React rendering

Render React component to HTML DOM : use ReactDOM.render() function

import ReactDOM from 'react-dom';

8 Props

Props is an attribute of Component

When we need immutable data in our component we can just add props to reactDOM.render() function and use it inside your

9 State

State is a property or object that only exists within a component when you are defining it

class Website extends React.Component {

constructor(props){

super(props);

this.state = {

name: "lanh.nguyen", email: "lanh.nguyen@saver.jp"

} }

9 State

How to change the value of state?

class Button extends React.Component {

constructor(props){

super(props);

this.state={

count: 0 }

background-color => backgroundColor

Note:

11 Component lifecycle

There are threes phases:

 Mounting: This phase occurs when a component is being inserted into the DOM

constructors() componentWillMount() render() componentDidMount()

 constructors(): it is called first after component is created

 componentWillMount(): It is called immediately before the component is unmounted from the DOM

 render(): Insert the component into the DOM

 componentDidMount(): It is called once and immediately after React inserts the component into the DOM

11 Component lifecycle

 Updating: This phase occurs when a component is being re-rendered into a virtual DOM to figure out if the actual DOM needs to be updatedcomponentWillReceiveProps() shouldComponentUpdate()

componentWillUpdate()render()

componentDidUpdate()

 componentWillReceiveProps(): it is called when a component is receiving new props

 shouldComponentUpdate(): allows us to decide whether the next component’s state should trigger a re-render or not This method returns a boolean value, which by default is true But we can return false and the next methods won’t be called

 componentWillUpdate(): it is called immediately before rendering, when new props or state are being received It is used to perform preparation

before an updates occurs, however is not allowed to use this.setState().

 render(): update component to DOM

 componentDidUpdate(): it is called after React updated DOM

};

setNewNumber() { this.setState({data: this.state.data + 1}) }

11 Component lifecycle

render() {

return (

<div>

<button onClick = this.setNewNumber.bind(this)}>INCREMENT</button>

<Content myNumber = {this.state.data}></Content>

10 Component lifecycle

When we click INCREMENT button, the update will occur and other lifecycle methods will be triggered.

After ten seconds, the component will unmount and the last event will be logged in console

12 Demo

This demo displays data that get from API via ajax to component

import React from 'react';

import $ from 'jquery';

class Website extends React.Component {