React(1)：开始

开始

在浏览器上运行 React 应用

新建一个浏览器页面： index.html

index.html<!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://cdn.jsdelivr.net/npm/react@17.0.2/umd/react.development.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/react-dom@17.0.2/umd/react-dom.development.js"></script>
    <script src="./js/button.js"></script>
  </body>
</html>

新建一个组件： js/button.js

js/button.js"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.jsx"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
<!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://cdn.jsdelivr.net/npm/react@17.0.2/umd/react.development.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/react-dom@17.0.2/umd/react-dom.development.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/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编译器便会自动将代码编译为：

React.createElement(
  "button",
  { onClick: () => this.setState({ liked: true }) },
  "Like"
);

这便是使用 jsx 之前的代码。

创建 React 项目

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

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

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

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

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

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

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

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

npm run start

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

src/App.jsimport 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