你好赵伟

这个屌丝很懒，什么也没留下！

热门标签

React安装：在现有项目上使用React_已有项目添加react

作者：你好赵伟 | 2024-04-19 18:04:36

踩

已有项目添加react

下一节：创建React应用

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

简单介绍
即添即用
使用JSX

简单介绍

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

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

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

即添即用

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

1.在html中添加DOM容器

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

<body>
    <!--已有的HTML-->
    <div id="button_container"></div>
    <!--已有的HTML-->
</body>
1
2
3
4
5

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

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

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>
1
2
3
4
5
6

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);
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

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

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

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

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>
1
2

使用JSX

1.简单地使用JSX

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

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

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

return (
      <button onClick={() => this.setState({ liked: true })}>
        点我
      </button>
    );
1
2
3
4
5

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

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

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

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
1

接下来你只要在包含有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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

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

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

这是一个学习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
1
2

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

3.运行JSX预处理器

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

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

你可以看到，src文件夹下你编写好的代码已经被自动处理好了并且创建了一个新的button.js文件，对比以两者你可以看到新出现的js文件是以Javascript代码编写的。
在这里插入图片描述
就像简单使用JSX中一样，在html中引入预处理好的js文件即可。
你不用等待这个命令结束，它设立了一个对JSX代码的监听器，只要你在src目录现编写了JSX代码，监听器就会自动处理你编写的文件。

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

下一节：创建React应用

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/你好赵伟/article/detail/453025