抱歉,您的浏览器无法访问本站
本页面需要浏览器支持(启用)JavaScript
了解详情 >

开始

在浏览器上运行 React 应用

  1. 新建一个浏览器页面: index.html
index.html
1
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>
  1. 新建一个组件: js/button.js
js/button.js
1
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);
  1. 在浏览器上打开网页,就会发现有一个 like 按钮

mark

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

mark

这种方法只使用了浏览器内置的语法,并没有使用第三方的语法。

那这段 js 代码做了什么事情呢?

首先,定义了一个组件,并编写了它的渲染方法。
然后编写了一段在 #like_button_container 中渲染组件的代码。

但是 render 里面的代码并不直观,它使用了复杂的函数调用和嵌套,如果我们希望它直接返回 html,或许就好懂多了。

jsx 就是干这个的。

至于对 jsx 的深度理解,可以参考官网上 为什么使用 JSX

使用 jsx

首先,我们把 button.js 改成 button.jsx,然后按照下面高亮的代码修改 render 函数:

js/button.jsx
1
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

注意一下 jsx 文件的引用

index.html
1
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 项目

当代码规模越来越大时,直接编写浏览器的代码会显得十分复杂,且难以维护。

这时候我们就需要使用工具链来管理和维护我们的项目了。

执行接下来的操作前,你需要安装 nodejs

脚手架是就是一个工具,可以帮助我们快速的搭建出一个项目的架构,并安装相应的依赖。

运行以下命令安装脚手架:

1
2
cnpm install create-react-app -g
create-react-app .

稍等一会儿,一个 React 项目便会出现在当前目录。

你可以运行下面的命令来康康你的项目:

1
npm run start

mark

接下来,我们可以尝试修改 App.js,例如修改第十行:

src/App.js
1
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 toolsRedux DevTools

路由:React Router

状态管理:ReduxMobxRecoil

评论