开始
在浏览器上运行 React 应用
- 新建一个浏览器页面:
index.html
index.html1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head>
<body> <div id="like_button_container"></div> <script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script> <script src="./js/button.js"></script> </body> </html>
|
- 新建一个组件:
js/button.js
js/button.js1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
| "use strict";
const e = React.createElement;
class LikeButton extends React.Component { constructor(props) { super(props); this.state = { liked: false }; }
render() { if (this.state.liked) { return "You liked this."; }
return e( "button", { onClick: () => this.setState({ liked: true }) }, "Like" );
} }
const domContainer = document.querySelector("#like_button_container"); ReactDOM.render(e(LikeButton), domContainer);
|
- 在浏览器上打开网页,就会发现有一个
like
按钮

当你点击这个按钮时,按钮便会变成这样:

这种方法只使用了浏览器内置的语法,并没有使用第三方的语法。
那这段 js
代码做了什么事情呢?
首先,定义了一个组件,并编写了它的渲染方法。
然后编写了一段在 #like_button_container
中渲染组件的代码。
但是 render
里面的代码并不直观,它使用了复杂的函数调用和嵌套,如果我们希望它直接返回 html
,或许就好懂多了。
jsx
就是干这个的。
至于对 jsx
的深度理解,可以参考官网上 为什么使用 JSX。
使用 jsx
首先,我们把 button.js
改成 button.jsx
,然后按照下面高亮的代码修改 render
函数:
js/button.jsx1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
| "use strict";
class LikeButton extends React.Component { constructor(props) { super(props); this.state = { liked: false, }; }
render() { if (this.state.liked) { return "You liked this."; } return ( <button onClick={() => this.setState({ liked: true })}>Like </button> ); } }
const domContainer = document.querySelector("#like_button_container"); ReactDOM.render(<LikeButton></LikeButton>, domContainer);
|
但是浏览器并不支持 jsx
,所以我们需要在 index.html
文件中引入 babel
:
index.html1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
| <!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head>
<body> <div id="like_button_container"></div> <script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> <script type="text/babel" src="./js/button.jsx"></script> </body>
</html>
|
接下来我们可以再前往浏览器运行代码。
我们仔细康康这段 jsx
代码,这些代码和我们写的 js
文件有很大的不同。
首先一看这代码,可能直观上就觉得,这个代码是错的。似乎 html
标签并没有带引号。但别忘了,这并不是原生的 js
,而是基于 js
的一种新写法。
那它和 html
字符串有什么区别呢?
- 简洁多了,引号省掉了。
- 它比
html
更安全,因为它会过滤 XSS
(跨站脚本注入)。 - 它表示了一个
React DOM
对象,可以做一些字符串之外的操作。
当我们使用 <button onClick={() => this.setState({ liked: true })}>Like </button>
时,babel
编译器便会自动将代码编译为:
1 2 3 4 5
| React.createElement( "button", { onClick: () => this.setState({ liked: true }) }, "Like" );
|
这便是使用 jsx
之前的代码。
创建 React 项目
当代码规模越来越大时,直接编写浏览器的代码会显得十分复杂,且难以维护。
这时候我们就需要使用工具链来管理和维护我们的项目了。
脚手架是就是一个工具,可以帮助我们快速的搭建出一个项目的架构,并安装相应的依赖。
运行以下命令安装脚手架:
1 2
| cnpm install create-react-app -g create-react-app .
|
稍等一会儿,一个 React
项目便会出现在当前目录。
你可以运行下面的命令来康康你的项目:

接下来,我们可以尝试修改 App.js
,例如修改第十行:
src/App.js1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
| import logo from './logo.svg'; import './App.css';
function App() { return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p> hello world! </p> <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer" > Learn React </a> </header> </div> ); }
export default App;
|
你可以在浏览器中直接看到内容的改变,而无需手动刷新浏览器,这便是 热更新 的魅力。
生态圈
VSCode 插件:ES7 React/Redux/GraphQL/React-Native snippets
Chrome 插件: React Develop tools、Redux DevTools
路由:React Router
状态管理:Redux、Mobx、Recoil