React.js

https://www.kirupa.com/react/simple_todo_app_react.htm

https://www.kirupa.com/react/simple_todo_app_react.htm

hello world...

()

Virtual DOM

JSX

Javascript ES 6

VirtualDOM

JSX

JSX React

JSX

{ } js

BabelES5, ES6

20092015

ECMAScript 5ECMAScript 6

ES 5

BabelES 6ES 5

Hello world 1. 2.

1. CDN

2. Browserify + Gulp + Babelify

3. Webpack

React Webpack http://blog.techbridge.cc/2016/07/30/react-dev-enviroment-webpack-browserify/

http://blog.techbridge.cc/2016/07/30/react-dev-enviroment-webpack-browserify/

CDN

ES5 only

Create React App hot reload

Github Page

https://github.com/facebookincubator/create-react-app

https://github.com/facebookincubator/create-react-app

node.js npm

React.js

(npm, -g)

github.io

http://github.io

React App

import React from 'react'; import ReactDOM from 'react-dom';

ReactDOM.render( Hello world, document.getElementById('root') );

Todo List app

https://www.kirupa.com/react/simple_todo_app_react.htm

CSSbody { padding: 50px; background-color: #66CCFF; font-family: sans-serif; } .todoListMain .header input { padding: 10px; font-size: 16px; border: 2px solid #FFF; } .todoListMain .header button { padding: 10px; font-size: 16px; margin: 10px; background-color: #0066FF; color: #FFF; border: 2px solid #0066FF; } .todoListMain .header button:hover { background-color: #003399; border: 2px solid #003399; cursor: pointer; }

import React, { Component } from 'react';

class App extends Component {

render() { return (

); } }

export default App;

1. 2.import React, { Component } from 'react';

class App extends Component { constructor(props){ super(props); this.state = { text : "", item: [] } this.handleChange = this.handleChange.bind(this); } handleChange(event){ console.log(event.target.value); this.setState({text: event.target.value});

} render() { return (

); }

onChangebind state

state()

()

statestate

state

state

bind

key

handleAdd() { var itemArray = this.state.items;

itemArray.push( { text: this.state.text, key: Date.now() } );

this.setState({ items: itemArray });

this.setState({text : ""});

console.log(this.state.items);

}

import TodoItems from './TodoItems.js';

props

TodoItems

map

key

map ()

ex

map

.todoListMain .theList {

list-style: none;

padding-left: 0;

width: 255px;

}

.todoListMain .theList li {

color: #333;

background-color: rgba(255,255,255,.5);

padding: 15px;

margin-bottom: 15px;

border-radius: 5px;

}

React.jsgithub.io

1. build() 2. Github Page

3.

React.jsGithub Pagehttp://dingding.logdown.com/posts/1110773-method-of-

reactjs-publishes-the-project-to-github-page

http://github.iohttp://dingding.logdown.com/posts/1110773-method-of-reactjs-publishes-the-project-to-github-pagehttp://dingding.logdown.com/posts/1110773-method-of-reactjs-publishes-the-project-to-github-page