Reactjs Lanh Nguyen
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (963.78 KB, 35 trang )
REACTJS
Author: Lanh Nguyen
Date: Fri, 23-Jun-2017
Agenda
1. Overview
2. Environment setup
3. Create React App
4. JSX
5. Virtual DOM
6. Components
7. React rendering
8. Props
9. State
10.Styling component
11.Component lifecycle
12.Demo
1. Overview
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 Facebook's newsfeed in
2011 and later on Instagram.com in 2012.
Notable features
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.
1. Overview
Notable features
Virtual DOM :
React creates an in-memory data structure cache, computes the resulting differences, and then updates the browser's
displayed DOM efficiently.
JSX:
React components are typically written in JSX, a JavaScript extension syntax allowing quoting of HTML and using
HTML tag syntax to render subcomponents.
React Native:
React Native libraries were announced by Facebook in 2015,providing the React architecture to native iOS, Android
and UWP applications.
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
After the folder is created, create empty pakage.json file inside by running npm init
C:\Users\username\Desktop\reactApp>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
5. Create files
C:\Users\username\Desktop\reactApp>touch index.html
C:\Users\username\Desktop\reactApp>touch App.jsx
C:\Users\username\Desktop\reactApp>touch main.js
C:\Users\username\Desktop\reactApp>touch webpack.config.js
2. Environment setup
6. Set Compiler, Server and Loaders
Open webpack-config.js file and add the this below.
var config = {
module: {
entry: ‘./main.js',
loaders: [
output: {
{
path:‘./',
test: /\.jsx?$/,
filename: 'index.js',
exclude: /node_modules/,
},
loader: 'babel-loader',
devServer: {
query: {
presets: ['es2015', 'react']
inline: true,
port: 8383
},
}}
]
}}
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
7. index.html
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>React App</title>
</head>
<body>
<div id = "app"></div>
<script src = "index.js"></script>
</body>
</html>
2. Environment setup
8. App.jsx and main.js
import React from 'react';
import React from 'react';
class App extends React.Component {
import ReactDOM from 'react-dom';
render() {
import App from './App.jsx';
return (
<div>
ReactDOM.render(
Hello World aaa!!!
<App />,
</div>
);
}
}
export default App;
document.getElementById('app')
);
2. Environment setup
9. Running the Server
C:\Users\username\Desktop\reactApp>npm start
webpack-dev-server --host 192.168.64.132 --port 8181
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:
After creating app is done
create-react-app hello-world
4. JSX
JSX = JS+XML
JSX is a syntax extension to Javascript. It is used in React to create component tag like HTML.
To use JSX need to import React lib at the top of file
Example:
import React from 'react';
class HelloComponent extends React.Component{
render(){
return
Hello React
// JSX, it is not HTML}
}
4. JSX
Attributes: We may use quotes to specify string literals as attributes:
class HelloComponent extends React.Component{
render(){
return
Hello
React
}
}
Javascript expressions: Javascript expressions can be used inside JSX with curly brackets {}:
class App extends React.Component {
render() {
return (
<div>
{10+1}
</div>
); }
}
4. JSX
Nested elements: If you want to return more elements, you will need to wrap it in a single container element like
the <div> element shown above.
class HelloComponent extends React.Component{
render(){
return (//note: in the case multiple must use ‘()’
<div>//one parent tag only
Hello!
Good to see you here.
</div>
)
}
}
4. JSX
Ternary operators: We cannot use if–else statements inside JSX but we can use ternary expressions instead.
class App extends React.Component {
render() {
var i = 1;
return (
<div>
{ i === 1 ? 'true' : 'false' }
</div>
);
}
}
Naming Convention: React components starts with Uppercase.
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
class HelloComponent extends React.Component{
render(){
return
Hello React
}
}
function Welcome(props) {
return
Hello,{props.name}
;}
const HelloComponent = () =>
Hello React.
6. Components
Composing Components
const Header = () =>
Website header
const Content = () =>
Content
const Footer = () =>
Footer
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';
ReactDOM.render(
<HelloComponent />,
document.getElementById('root')
);
<div id="root"></div>
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
component
class Website extends React.Component {
render() {
return (
<div>
I'm {this.props.name}. Email: {this.props.email}
</div>
);
}
}
ReactDOM.render(
<Website name="lanh.nguyen" email="" />,
);
document.getElementById('root')
8. Props
Default props
class Website extends React.Component {
render() {
return (
<div>
I'm {this.props.name}. Email: {this.props.email}
</div>
);
}
}
Website.defaultProps = {
name: "lanh.nguyen",
email: ""
}
9. State
State is a property or object that only exists within a component when you are defining it.
State is mutable
class Website extends React.Component {
constructor(props){
super(props);
this.state = {
name: "lanh.nguyen",
email: ""
}
}
render() {
return (
I'm {this.state.name}. Email: {this.state.email}
}
}
);
9. State
How to change the value of state?
class Button extends React.Component {
constructor(props){
super(props);
this.state={
count: 0
}
}
handClick(){
this.setState({count: this.state.count + 1});
}
render(){
return <button onClick={this.handClick.bind(this)}>{this.state.count} </button>
}
}
10. Styling component
render() {
return (
<div style="color: red; font-size: 24px;">
Hello World!!!
</div>
);
}
If you want to make inline styling, you must use Javascript object
render() {
return (
<div style={{backgroundColor: '#ccc',color:'red'}}>
Hello World!!!
</div>
);
}
Note:
font-size => fontSize
color => color
background-color => backgroundColor
