├── .gitignore ├── demo01 ├── js │ └── app.jsx └── index.html ├── demo04 ├── js │ └── app.jsx └── index.html ├── demo03 ├── js │ └── app.jsx └── index.html ├── demo13 ├── src │ ├── browser.js │ ├── app.js │ └── server.js ├── README.md ├── package.json ├── browser.js ├── server.js └── app.js ├── demo02 ├── js │ └── app.jsx └── index.html ├── demo06 ├── js │ └── app.jsx └── index.html ├── demo05 ├── index.html └── js │ └── app.jsx ├── demo07 ├── index.html └── js │ └── app.jsx ├── demo08 ├── index.html └── js │ └── app.jsx ├── demo09 ├── index.html └── js │ └── app.jsx ├── demo10 ├── index.html └── js │ └── app.jsx ├── demo11 ├── index.html └── js │ └── app.jsx ├── demo12 ├── index.html └── js │ └── app.jsx └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | example/ 2 | node_modules 3 | -------------------------------------------------------------------------------- /demo01/js/app.jsx: -------------------------------------------------------------------------------- 1 | ReactDOM.render( 2 |

Hello, world!

, 3 | document.getElementById('example') 4 | ); 5 | -------------------------------------------------------------------------------- /demo04/js/app.jsx: -------------------------------------------------------------------------------- 1 | const HelloMessage=({name})=>

Hello {name}

2 | ReactDOM.render( 3 | , 4 | document.getElementById('example') 5 | ); 6 | -------------------------------------------------------------------------------- /demo03/js/app.jsx: -------------------------------------------------------------------------------- 1 | const arr = [ 2 |

Hello world!

, 3 |

React is awesome

, 4 | ]; 5 | ReactDOM.render( 6 |
{arr}
, 7 | document.getElementById('example') 8 | ); 9 | -------------------------------------------------------------------------------- /demo13/src/browser.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './app'; 4 | 5 | ReactDOM.render(, document.getElementById('content')); 6 | -------------------------------------------------------------------------------- /demo02/js/app.jsx: -------------------------------------------------------------------------------- 1 | const names = ['Alice', 'Emily', 'Kate']; 2 | 3 | ReactDOM.render( 4 |
5 | { 6 | names.map(function (name) { 7 | return
Hello, {name}!
8 | }) 9 | } 10 |
, 11 | document.getElementById('example') 12 | ); 13 | -------------------------------------------------------------------------------- /demo06/js/app.jsx: -------------------------------------------------------------------------------- 1 | const data = 123; 2 | class MyTitle extends React.Component{ 3 | propTypes: { 4 | title: React.PropTypes.string.isRequired, 5 | } 6 | render(){ 7 | return

{this.props.title}

; 8 | } 9 | } 10 | ReactDOM.render( 11 | , 12 | document.body 13 | ); 14 | -------------------------------------------------------------------------------- /demo06/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /demo13/README.md: -------------------------------------------------------------------------------- 1 | This demo is copied from [github.com/mhart/react-server-example](https://github.com/mhart/react-server-example), but I rewrote it with JSX syntax. 2 | 3 | ```bash 4 | # install the dependencies in demo12 directory 5 | $ npm install 6 | 7 | # translate all jsx file in src subdirectory to js file 8 | $ npm run build 9 | 10 | # launch http server 11 | $ node server.js 12 | ``` 13 | -------------------------------------------------------------------------------- /demo01/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 7 | 8 | 9 | 11 | 12 | 13 |
14 |
15 | 16 | 17 | -------------------------------------------------------------------------------- /demo02/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 7 | 8 | 9 | 11 | 12 | 13 |
14 |
15 | 16 | 17 | -------------------------------------------------------------------------------- /demo03/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 7 | 8 | 9 | 11 | 12 | 13 |
14 |
15 | 16 | 17 | -------------------------------------------------------------------------------- /demo04/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 7 | 8 | 9 | 11 | 12 | 13 |
14 |
15 | 16 | 17 | -------------------------------------------------------------------------------- /demo05/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 7 | 8 | 9 | 11 | 12 | 13 |
14 |
15 | 16 | 17 | -------------------------------------------------------------------------------- /demo07/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 7 | 8 | 9 | 11 | 12 | 13 |
14 |
15 | 16 | 17 | -------------------------------------------------------------------------------- /demo08/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 7 | 8 | 9 | 11 | 12 | 13 |
14 |
15 | 16 | 17 | -------------------------------------------------------------------------------- /demo09/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 7 | 8 | 9 | 11 | 12 | 13 |
14 |
15 | 16 | 17 | -------------------------------------------------------------------------------- /demo10/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 7 | 8 | 9 | 11 | 12 | 13 |
14 |
15 | 16 | 17 | -------------------------------------------------------------------------------- /demo05/js/app.jsx: -------------------------------------------------------------------------------- 1 | class NotesList extends React.Component{ 2 | render(){ 3 | return ( 4 |
    5 | { 6 | React.Children.map(this.props.children, function (child) { 7 | return
  1. {child}
    2. ; 8 | }) 9 | } 10 |
11 | ); 12 | } 13 | } 14 | ReactDOM.render( 15 | 16 | hello 17 | world 18 | , 19 | document.body 20 | ); 21 | -------------------------------------------------------------------------------- /demo11/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 7 | 8 | 9 | 10 | 12 | 13 | 14 |
15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /demo12/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 7 | 8 | 9 | 10 | 12 | 13 | 14 |
15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /demo07/js/app.jsx: -------------------------------------------------------------------------------- 1 | class MyComponent extends React.Component{ 2 | handleClick(ev){ 3 | console.log(ev) 4 | this.refs.myTextInput.focus() 5 | } 6 | render(){ 7 | return ( 8 |
9 | 10 | {this.handleClick(ev)}} /> 11 |
12 | ); 13 | } 14 | } 15 | ReactDOM.render( 16 | , 17 | document.getElementById('example') 18 | ); 19 | -------------------------------------------------------------------------------- /demo09/js/app.jsx: -------------------------------------------------------------------------------- 1 | class Input extends React.Component{ 2 | constructor(props) { 3 | super(props); 4 | this.state= { 5 | value: 'Hello!' 6 | } 7 | } 8 | handleChange(event) { 9 | this.setState({value: event.target.value}); 10 | } 11 | render(){ 12 | const value = this.state.value; 13 | return ( 14 |
15 | {this.handleChange(ev)}} /> 16 |

{value}

17 |
18 | ); 19 | } 20 | } 21 | ReactDOM.render(, document.body); 22 | -------------------------------------------------------------------------------- /demo13/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-server", 3 | "version": "1.0.0", 4 | "description": "an example of react.js in server", 5 | "main": "server.js", 6 | "scripts": { 7 | "build": "babel -d . src/", 8 | "test": "echo \"Error: no test specified\" && exit 1" 9 | }, 10 | "author": "zhuangtongfa", 11 | "license": "ISC", 12 | "dependencies": { 13 | "browserify": "~9.0.3", 14 | "literalify": "~0.4.0", 15 | "react": "^0.14.0", 16 | "react-dom": "^0.14.0" 17 | }, 18 | "devDependencies": { 19 | "babel": "~5.8.21" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /demo13/browser.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } 4 | 5 | var _react = require('react'); 6 | 7 | var _react2 = _interopRequireDefault(_react); 8 | 9 | var _reactDom = require('react-dom'); 10 | 11 | var _reactDom2 = _interopRequireDefault(_reactDom); 12 | 13 | var _app = require('./app'); 14 | 15 | var _app2 = _interopRequireDefault(_app); 16 | 17 | _reactDom2['default'].render(_react2['default'].createElement(_app2['default'], { items: window.APP_PROPS.items }), document.getElementById('content')); -------------------------------------------------------------------------------- /demo08/js/app.jsx: -------------------------------------------------------------------------------- 1 | class LikeButton extends React.Component{ 2 | constructor(props) { 3 | super(props); 4 | this.state= { 5 | liked:false 6 | } 7 | } 8 | 9 | handleClick (event) { 10 | console.log(event) 11 | this.setState({liked: !this.state.liked}); 12 | } 13 | render() { 14 | var text = this.state.liked ? 'like' : 'haven\'t liked'; 15 | return ( 16 |

{this.handleClick(event)}}> 17 | You {text} this. Click to toggle. 18 |

19 | ); 20 | } 21 | } 22 | ReactDOM.render( 23 | , 24 | document.getElementById('example') 25 | ); 26 | -------------------------------------------------------------------------------- /demo10/js/app.jsx: -------------------------------------------------------------------------------- 1 | class Hello extends React.Component{ 2 | constructor(props) { 3 | super(props); 4 | this.state= { 5 | opacity: 1.0 6 | } 7 | } 8 | componentDidMount() { 9 | this.timer = setInterval(function () { 10 | var opacity = this.state.opacity; 11 | opacity -= .05; 12 | if (opacity < 0.1) { 13 | opacity = 1.0; 14 | } 15 | this.setState({ 16 | opacity: opacity 17 | }); 18 | }.bind(this), 100); 19 | } 20 | render () { 21 | return ( 22 |
23 | Hello {this.props.name} 24 |
25 | ); 26 | } 27 | } 28 | ReactDOM.render( 29 | , 30 | document.body 31 | ); 32 | -------------------------------------------------------------------------------- /demo11/js/app.jsx: -------------------------------------------------------------------------------- 1 | class UserGist extends React.Component{ 2 | constructor(props) { 3 | super(props); 4 | this.state= { 5 | username: '', 6 | lastGistUrl: '' 7 | } 8 | } 9 | componentDidMount () { 10 | $.get(this.props.source, function(result) { 11 | var lastGist = result[0]; 12 | // if (this.isMounted()) { 13 | this.setState({ 14 | username: lastGist.owner.login, 15 | lastGistUrl: lastGist.html_url 16 | }); 17 | // } 18 | }.bind(this)); 19 | } 20 | 21 | render () { 22 | return ( 23 |
24 | {this.state.username}'s last gist is here. 25 |
26 | ); 27 | } 28 | } 29 | ReactDOM.render( 30 | , 31 | document.body 32 | ); 33 | -------------------------------------------------------------------------------- /demo13/src/app.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default class App extends React.Component{ 4 | 5 | constructor(props) { 6 | super(props); 7 | this.render = this.render.bind(this); 8 | this.state = { 9 | items: this.props.items, 10 | disabled: true 11 | }; 12 | } 13 | 14 | componentDidMount() { 15 | this.setState({ 16 | disabled: false 17 | }) 18 | } 19 | 20 | handleClick() { 21 | this.setState({ 22 | items: this.state.items.concat('Item ' + this.state.items.length) 23 | }) 24 | } 25 | 26 | render() { 27 | return ( 28 |
29 | 30 |
    31 | { 32 | this.state.items.map(function(item) { 33 | return
  • {item}
    • 34 | }) 35 | } 36 |
37 |
38 | ) 39 | } 40 | }; 41 | -------------------------------------------------------------------------------- /demo12/js/app.jsx: -------------------------------------------------------------------------------- 1 | class RepoList extends React.Component{ 2 | constructor(props) { 3 | super(props); 4 | this.state= { 5 | loading: true, 6 | error: null, 7 | data: null 8 | } 9 | } 10 | componentDidMount() { 11 | this.props.promise.then( 12 | value => this.setState({loading: false, data: value}), 13 | error => this.setState({loading: false, error: error})); 14 | } 15 | render() { 16 | if (this.state.loading) { 17 | return Loading...; 18 | } 19 | else if (this.state.error !== null) { 20 | return Error: {this.state.error.message}; 21 | } 22 | else { 23 | const repos = this.state.data.items; 24 | const repoList = repos.map(function (repo) { 25 | return ( 26 |
  • {repo.name} ({repo.stargazers_count} stars)
    {repo.description}
    • 27 | ); 28 | }); 29 | return ( 30 |
    31 |

    Most Popular JavaScript Projects in Github

    32 |
      {repoList}
    33 |
    34 | ); 35 | } 36 | } 37 | } 38 | ReactDOM.render( 39 | , 40 | document.body 41 | ); 42 | -------------------------------------------------------------------------------- /demo13/src/server.js: -------------------------------------------------------------------------------- 1 | var http = require('http'), 2 | browserify = require('browserify'), 3 | literalify = require('literalify'), 4 | React = require('react'), 5 | ReactDOMServer = require('react-dom/server'); 6 | 7 | var App = require('./app'); 8 | 9 | http.createServer(function(req, res) { 10 | if (req.url == '/') { 11 | res.setHeader('Content-Type', 'text/html'); 12 | var props = { 13 | items: [ 14 | 'Item 0', 15 | 'Item 1' 16 | ] 17 | }; 18 | var html = ReactDOMServer.renderToStaticMarkup( 19 | 20 |
    ) 22 | }} /> 23 | 24 | 31 | 32 | 33 | 35 | 36 | 37 |
    38 |
    39 | 40 | 41 | ``` 42 | # Class 43 | ```js 44 | //ES5 45 | var NotesList = React.createClass({ 46 | render: function() { 47 | return ( 48 |
      49 | { 50 | React.Children.map(this.props.children, function (child) { 51 | return
    1. {child}
      2. ; 52 | }) 53 | } 54 |
    55 | ); 56 | } 57 | }); 58 | ``` 59 | 60 | ```js 61 | //ES6 62 | class NotesList extends React.Component{ 63 | render(){ 64 | return ( 65 |
      66 | { 67 | React.Children.map(this.props.children, function (child) { 68 | return
    1. {child}
      2. ; 69 | }) 70 | } 71 |
    72 | ); 73 | } 74 | } 75 | ``` 76 | # State 77 | ```js 78 | //ES5 79 | getInitialState: function() { 80 | return {liked: false}; 81 | } 82 | ``` 83 | 84 | ```js 85 | //ES6 86 | constructor(props) { 87 | super(props); 88 | this.state= { 89 | liked:false 90 | } 91 | } 92 | ``` 93 | # isMounted 94 | ES6 is no support `this.isMounted()` 95 | 96 | # Event 97 | ```js 98 | //ES5 99 | 100 | ``` 101 | ```js 102 | //ES6 103 | {this.handleChange(e)}} /> 104 | ``` 105 | 106 | # This is also hava a React-webpack-ES6 demo 107 | [github](https://github.com/zhuangtongfa/react-webpack-ES6-demo) 108 | 109 | Try it! 110 | -------------------------------------------------------------------------------- /demo13/app.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | Object.defineProperty(exports, '__esModule', { 4 | value: true 5 | }); 6 | 7 | var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })(); 8 | 9 | var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; desc = parent = undefined; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } }; 10 | 11 | function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } 12 | 13 | function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } } 14 | 15 | function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } 16 | 17 | var _react = require('react'); 18 | 19 | var _react2 = _interopRequireDefault(_react); 20 | 21 | var App = (function (_React$Component) { 22 | _inherits(App, _React$Component); 23 | 24 | function App(props) { 25 | _classCallCheck(this, App); 26 | 27 | _get(Object.getPrototypeOf(App.prototype), 'constructor', this).call(this, props); 28 | this.render = this.render.bind(this); 29 | this.state = { 30 | items: this.props.items, 31 | disabled: true 32 | }; 33 | } 34 | 35 | _createClass(App, [{ 36 | key: 'componentDidMount', 37 | value: function componentDidMount() { 38 | this.setState({ 39 | disabled: false 40 | }); 41 | } 42 | }, { 43 | key: 'handleClick', 44 | value: function handleClick() { 45 | this.setState({ 46 | items: this.state.items.concat('Item ' + this.state.items.length) 47 | }); 48 | } 49 | }, { 50 | key: 'render', 51 | value: function render() { 52 | return _react2['default'].createElement( 53 | 'div', 54 | null, 55 | _react2['default'].createElement( 56 | 'button', 57 | { onClick: this.handleClick.bind(this), disabled: this.state.disabled }, 58 | 'Add Item' 59 | ), 60 | _react2['default'].createElement( 61 | 'ul', 62 | null, 63 | this.state.items.map(function (item) { 64 | return _react2['default'].createElement( 65 | 'li', 66 | null, 67 | item 68 | ); 69 | }) 70 | ) 71 | ); 72 | } 73 | }]); 74 | 75 | return App; 76 | })(_react2['default'].Component); 77 | 78 | exports['default'] = App; 79 | ; 80 | module.exports = exports['default']; --------------------------------------------------------------------------------