Đang tải... (xem toàn văn)
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.
REACTJS Author: Lanh Nguyen Date: Fri, 23-Jun-2017 Agenda Overview Environment setup Create React App JSX Virtual DOM Components React rendering Props State 10.Styling component 11.Component lifecycle 12.Demo 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 modify values 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 Environment setup Install NodeJS and NPM 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 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 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 Environment setup 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 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 Environment setup 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; Environment setup 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 index.html React App Environment setup 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 ( ReactDOM.render( Hello World aaa!!! , ); } } export default App; document.getElementById('app') ); Environment setup Running the Server C:\Users\username\Desktop\reactApp>npm start webpack-dev-server host 192.168.64.132 port 8181 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 ( I'm {this.props.name} Email: {this.props.email} ); } } ReactDOM.render( , ); document.getElementById('root') Props Default props class Website extends React.Component { render() { return ( I'm {this.props.name} Email: {this.props.email} ); } } Website.defaultProps = { name: "lanh.nguyen", email: "lanh.nguyen1@saver.jp" } 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: "lanh.nguyen@saver.jp" } } render() { return ( I'm {this.state.name} Email: {this.state.email} } } ); State How to change the value of state? class Button extends React.Component { constructor(props){ super(props); this.state={ count: } } handClick(){ this.setState({count: this.state.count + 1}); } render(){ return {this.state.count} } } 10 Styling component render() { return ( Hello World!!! ); } If you want to make inline styling, you must use Javascript object render() { return ( Hello World!!! ); } Note: font-size => fontSize color => color background-color => backgroundColor 10 Styling component Styling by use class name import './style.css'; render() { return ( Hello World!!! ); } /*style.css*/ textSyle{ background-color: #ccc; color:'red'; } 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 updated componentWillReceiveProps() componentDidUpdate() shouldComponentUpdate() render() componentWillUpdate() 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 11 Component lifecycle Unmounting: This phase occurs when a component is being removed from the DOM componentWillUnmount() Demo: class App extends React.Component { constructor(props) { super(props); this.state = { data: } }; setNewNumber() { this.setState({data: this.state.data + 1}) } 11 Component lifecycle render() { return ( INCREMENT ); } } class Content extends React.Component { componentWillMount() { console.log('Component WILL MOUNT!') } componentDidMount() { console.log('Component DID MOUNT!') } shouldComponentUpdate(newProps, newState) { return true; } 11 Component lifecycle shouldComponentUpdate(newProps, newState) { return true; } componentWillUpdate(nextProps, nextState) { console.log('Component WILL UPDATE!'); } componentDidUpdate(prevProps, prevState) { console.log('Component DID UPDATE!') } componentWillUnmount() { console.log('Component WILL UNMOUNT!') } render() { return ( {this.props.myNumber} ); }} 11 Component lifecycle ReactDOM.render(, document.getElementById('app')); setTimeout(() => { ReactDOM.unmountComponentAtNode(document.getElementById('app'));}, 10000); After the initial render, Only componentWillMount and componentDidMount will be logged in console since we didn't update anything yet 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 { constructor(props) { super(props); this.state = {person: []}; } componentDidMount() { this.Website(); } Website() { var that = this; $.get("http://192.168.64.132/lanh/demo1/public/index.php/api/news/listnews",function(data){ that.setState({ person: data }); }); } render() { const persons = this.state.person.map((item, i) => { return {item.id} {item.content}, {item.updated} }); return { persons } } } export default Website ... {this.props.name} Email: {this.props.email} ); } } ReactDOM.render( , ); document.getElementById('root') Props Default props class Website... {this.props.name} Email: {this.props.email} ); } } Website.defaultProps = { name: "lanh. nguyen" , email: "lanh. nguyen1 @saver.jp" } State State is a property or object that only exists within a... extends React.Component { constructor(props){ super(props); this.state = { name: "lanh. nguyen" , email: "lanh. nguyen@ saver.jp" } } render() { return ( I'm {this.state.name} Email: {this.state.email}