React安装：在现有项目上使用React

下一节：创建React应用

简单介绍

（本文根据react官网翻译，并加入了部分个人想法，如有遗漏请联系作者）

react是希望被大众逐步接受为初衷所设计的框架，因此你可以在项目中按照需求来使用react，即使知识添加一些零星的交互也是可行的。

大部分的网站项目都不是一个单一页面的应用，你可以在项目中通过几行代码使用react来扩展你的项目或者制作一些可动态使用的组件。

即添即用

在本节中将会展示如何在一个已有html页面中使用react组件，你可以在你的web页面中或者新创建一个html文件来尝试。

1.在html中添加DOM容器

首先，打开你想要编辑的html页面，添加一个空

标签作为你想要以react来展示的标签，如下所示

此处使用id=“button_container”来标记该

以便之后再js代码中找到该

并在其中展示react组件。

提示：你可以在标签内的任何地方放置DOM容器。你也可以在一个页面中放置多个DOM容器，当然这些容器通常需要为空，因为react在渲染时会把容器内的内容全部替换掉。

2.添加script标签

接下来，添加以下三个script标签到标签底部

3.创建react组件

创建一个名为button.js的文件在你的html文件目录下。
复制以下代码

'use strict';

const e = React.createElement;

class ReactButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = { liked: false };
  }

  render() {
    if (this.state.liked) {
      return 'React Button';
    }

    return e(
      'button',
      { onClick: () => this.setState({ liked: true }) },
      '点我'
    );
  }
}

const domContainer = document.querySelector('#button_container');
ReactDOM.render(e(ReactButton), domContainer);

这两行代码的作用是找到我们在第一步中添加的DOM容器并在其中展示我们已经编写好的react组件ReactButton。

const domContainer = document.querySelector('#button_container');
ReactDOM.render(e(ReactButton), domContainer);

提示：代码看不懂没有关系，我们将会在之后的章节讲解代码中各部分的概念，现在，只要把它展示在页面上就行了。

4.搞定了

你已经在你得项目中添加了第一个react组件了，运行你的项目看看吧。

提示：部署须知
处于开发环境下的js代码会严重降低页面运行速度，给用户带来不良的用户体验。
因此在部署项目之前需要将之前添加的react资源文件替换成以下资源

使用JSX

1.简单地使用JSX

在上面的例子中，我们使用的是JavaScript代码来通知react展示我们编写好的组件。

const e = React.createElement;
return e(
      'button',
      { onClick: () => this.setState({ liked: true }) },
      '点我'
    );

当然，react提供了另外一种选择来代替JavaScript代码，那就是JSX，上例代码可以用JSX替换，如下

return (
       this.setState({ liked: true })}>
        点我
      
    );

以上两例代码是等价的，你可以自由地选择使用JavaScript代码或者JSX来进行代码编写。

如果使用JSX的话，需要引入babel.js讲JSX转换成浏览器可以识别的JavaScript代码才能正常编译。接下来讲述如何在现有网页中使用JSX。

要在网页中使用JSX很简单，只需要引入如下资源文件即可

接下来你只要在包含有type="text/babel"的script标签中使用JSX就行了。

之后只要在html中引入编写好的js文件即可

这是一个学习react和编写简单的demo的非常好的途径。但是请注意，使用babel会降低浏览器的编译速度，因此不推荐把包含有babel的网页作为产品发布部署。

当你需要发布部署你的网站时，请记得删除删除带有type="text/babel"的script标签及他的内容，在下一节，我们将讲述如何安装JSX预处理器来自动编译你写好的JSX代码。

2.在项目中使用JSX

在项目中使用JSX不需要向打包器或者开发者工具等复杂的工具。实际上，添加JSX预处理器就像添加CSS预处理器一样简单。唯一的要求就是需要在你的电脑上安装Node.js。

现在在你的项目目录下打开终端，并输入以下命令：

1.	npm init -y
2.	npm install babel-cli@6 babel-preset-react-app@3

提示：我们只使用npm来安装JSX预处理器，之后你将不会用到再使用到它。react代码和你的项目代码无需改动，只需要保持原样即可。

3.运行JSX预处理器

创建一个src文件夹并把你编写好的js文件放在这个文件夹下。
在终端运行以下命令

npx babel --watch src --out-dir . --presets react-app/prod 

你可以看到，src文件夹下你编写好的代码已经被自动处理好了并且创建了一个新的button.js文件，对比以两者你可以看到新出现的js文件是以Javascript代码编写的。

就像简单使用JSX中一样，在html中引入预处理好的js文件即可。
你不用等待这个命令结束，它设立了一个对JSX代码的监听器，只要你在src目录现编写了JSX代码，监听器就会自动处理你编写的文件。

以上，就是所有的在现有项目中使用react的操作。

下一节：创建React应用