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

时间 2019-11-07

标签 react 安装现有项目使用栏目 React 繁體版

原文原文链接

原文连接：reactjs.org/docs/add-re…html

简单介绍

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

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

即添即用

在本节中将会展现如何在一个已有html页面中使用react组件，你能够在你的web页面中或者新建立一个html文件来尝试。npm

1.在html中添加DOM容器

首先，打开你想要编辑的html页面，添加一个空<div>标签做为你想要以react来展现的标签，以下所示浏览器

<body>
    <!--已有的HTML-->
    <div id="button_container"></div>
    <!--已有的HTML-->
</body>
复制代码

此处使用id=“button_container”来标记该<div>以便以后再js代码中找到该<div>并在其中展现react组件。babel

提示：你能够在<body>标签内的任何地方放置DOM容器。你也能够在一个页面中放置多个DOM容器，固然这些容器一般须要为空，由于react在渲染时会把容器内的内容所有替换掉。app

2.添加script标签

接下来，添加如下三个script标签到<body>标签底部框架

<!-- 前两个script用来加载react所须要的资源 -->
<!-- 注意：当你须要部署项目时,须要将开发环境换成生产环境， 将 "development.js" 替换成 "production.min.js"便可 -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
 <!-- 此标签用来加载编写好的react组件 -->
 <script src="button.js"></script>
复制代码

3.建立react组件

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

'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资源文件替换成如下资源

<script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
复制代码

使用JSX

1.简单地使用JSX

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

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

固然，react提供了另一种选择来代替JavaScript代码，那就是JSX，上例代码能够用JSX替换，以下

return (
      <button onClick={() => this.setState({ liked: true })}>
        点我
      </button>
    );
复制代码

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

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

要在网页中使用JSX很简单，只须要引入以下资源文件便可

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
复制代码

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    
    <!-- Don't use this in production: -->
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">

      ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById('root')
      );

</script>
  </body>
</html>
复制代码

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

<!-- 此标签用来加载编写好的react组件 -->
 <script src="button.js"></script>
复制代码

这是一个学习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的操做。