React安装

　React的网址是https://facebook.github.io/react/,　里面介绍了使用create-react-app来创建react应用，虽然很方便，但是一个简单的程序都有一大堆各种各样的东西，初看起来不知所以然，所以我打算先使用直接在html里面嵌入script标签这种基本方法。基于这个原因，安装也就是直接下载并解压缩。
  1. 从https://github.com/facebook/react上下载zip文件，因为网速的缘故不使用git clone。然后解压缩，里面有两个文件夹,build和examples。这是第一步。
  2. 打开examples中的basic-jsx,在浏览器里面打开index.html,应该是可以正常工作的。查看页面源代码，看到源码里除了包含react.js,react-dom.js两个脚步外，还包含了一个从cdn中取得browser.min.js。依据这个地址把browser.min.js下载下来并复制到build文件夹。这样以后本地开发的时候使用cdn了。
  3. 安装完成。实际开发的时候将build文件夹复制到所在项目文件夹即可。
    　
　下面直接使用https://facebook.github.io/react/页面的两个例子测试也是学习。

简单例子

  1. 建立一个simple的文件夹，作为项目文件夹。复制build文件夹到simple下，然后改名为lib
  2. 安装下面的内容创建simple.html:
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>简单例子</title>
  </head>
  <body>
    <h1>简单例子</h1>
    <div id="container">
      <p>
        请按照
        <a href="https://github.com/facebook/react/">GitHub</a>
        的指示安装react。
      </p>
      <p>
        如果你能看到着, 则表明React <strong>尚未</strong> 正确安装
      </p>
    </div>

    <script src="lib/react.js"></script>
    <script src="lib/react-dom.js"></script>
    <script src="lib/browser.min.js"></script>
    <script type="text/babel">
      class HelloMessage extends React.Component {
        render() {
          return <div>你好 {this.props.name}</div>;
        }
      }

      ReactDOM.render(<HelloMessage name="小慧" />, container);
    </script>
  </body>
</html>
  1. 启动浏览器浏览hello.html,浏览器显示

ToDoList

  1. 在simple文件夹建立todo.html,使用下面的代码：
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>TODO</title>
    <link rel="stylesheet" href="../shared/css/base.css" />
  </head>
  <body>
    <div id="container">
      <p>
        请按照
        <a href="https://github.com/facebook/react/">GitHub</a>
        的指示安装react。
      </p>
      <p>
        如果你能看到着, 则表明React <strong>尚未</strong> 正确安装
      </p>
    </div>

    <script src="lib/react.js"></script>
    <script src="lib/react-dom.js"></script>
    <script src="lib/browser.min.js"></script>
    <script type="text/babel">
      class TodoApp extends React.Component {
        constructor(props) {
            super(props);
            this.handleChange = this.handleChange.bind(this);
            this.handleSubmit = this.handleSubmit.bind(this);
            this.state = {items: [], text: ''};
        }

        render() {
            return (
            <div>
                <h3>TODO</h3>
                <TodoList items={this.state.items} />
                <form onSubmit={this.handleSubmit}>
                <input onChange={this.handleChange} value={this.state.text} />
                <button>{'Add #' + (this.state.items.length + 1)}</button>
                </form>
            </div>
            );
        }

        handleChange(e) {
            this.setState({text: e.target.value});
        }

        handleSubmit(e) {
            e.preventDefault();
            var newItem = {
            text: this.state.text,
            id: Date.now()
            };
            this.setState((prevState) => ({
            items: prevState.items.concat(newItem),
            text: ''
            }));
        }
    }

    class TodoList extends React.Component {
        render() {
            return (
            <ul>
                {this.props.items.map(item => (
                <li key={item.id}>{item.text}</li>
                ))}
            </ul>
            );
        }
    }

    ReactDOM.render(
        <TodoApp />, document.getElementById('container')
    );
    </script>
  </body>
</html>
  1. 在浏览器里面浏览todo.html,就会显示如react网站的界面了。

将jsx建立到外部文件中

  1. 首先建立todo.js，并将todo.html中script下的所有代码移到todo.js
  2. 修改todo.html，增加src指向todo.js，直接使用浏览器测试，结果不能运行，原来react使用外部jsx的时候，需要在web服务器下，而不可以直接使用文件系统浏览。
  3. 在终端下cd 到simple目录下，然后使用下面的命令启动一个简单的web服务器
ivan@ivan-X55VDR ~/projects/react/simple $ python -m SimpleHTTPServer
  1. 打开localhost:8000,点击todo.html，就可以看到修改过后成功的结果了。