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,就可以看到修改过后成功的结果了。