React安装与简单使用

来源：互联网发布：衣裤尺码软件编辑：程序博客网时间：2024/06/12 06:46

React安装

　React的网址是https://facebook.github.io/react/,　里面介绍了使用create-react-app来创建react应用，虽然很方便，但是一个简单的程序都有一大堆各种各样的东西，初看起来不知所以然，所以我打算先使用直接在html里面嵌入script标签这种基本方法。基于这个原因，安装也就是直接下载并解压缩。

从https://github.com/facebook/react上下载zip文件，因为网速的缘故不使用git clone。然后解压缩，里面有两个文件夹,build和examples。这是第一步。
打开examples中的basic-jsx,在浏览器里面打开index.html,应该是可以正常工作的。查看页面源代码，看到源码里除了包含react.js,react-dom.js两个脚步外，还包含了一个从cdn中取得browser.min.js。依据这个地址把browser.min.js下载下来并复制到build文件夹。这样以后本地开发的时候使用cdn了。
安装完成。实际开发的时候将build文件夹复制到所在项目文件夹即可。

　下面直接使用https://facebook.github.io/react/页面的两个例子测试也是学习。

简单例子

建立一个simple的文件夹，作为项目文件夹。复制build文件夹到simple下，然后改名为lib
安装下面的内容创建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>

启动浏览器浏览hello.html,浏览器显示

ToDoList

在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>

在浏览器里面浏览todo.html,就会显示如react网站的界面了。

将jsx建立到外部文件中

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

0 0