文档首页 > > 移植指南> 安装React

安装React

分享
更新时间:2020/11/30 GMT+08:00

介绍

简要介绍

React(有时叫“React.js”或ReactJS一个为数据提供渲染为HTML视图的开源JavaScript库。

语言:Ruby

一句话描述:React是一个JavaScript库

建议的版本

建议使用版本为“React-16.8.6 ”

环境要求

云服务器要求

本文以云服务器KC1实例测试,云服务器配置如表1所示。

表1 云服务器配置

项目

说明

规格

kc1.xlarge.2 | 4vCPUs | 8GB

磁盘

系统盘:高IO(40GB)

操作系统要求

操作系统要求如表2所示。

表2 操作系统要求

项目

版本

下载地址

CentOS

7.6

在公共镜像中已提供。

Kernel

4.14.0

在公共镜像中已提供。

配置安装环境

  1. 安装cnpm工具。

    推荐使用cnpm快速搭建React开发环境,通过npm工具来安装cnpm工具。

    因为npm是NodeJS的包管理工具,所以需要预先安装好NodeJS,才可以使用npm工具。

    npm install -g cnpm --registry=https://registry.npm.taobao.org

  2. (可选)创建全局软链接。

    cnpm安装完成后,如果cnpm命令没有存放在全局路径下,则需要创建全局软链接,如已存在,则跳过此步骤。
    1. 查看cnpm存放的路径。

      find / -name cnpm

      回显内容如下:

      /root/nodeJS/node-v10.16.0-linux-arm64/bin/cnpm
      /root/nodeJS/node-v10.16.0-linux-arm64/lib/node_modules/cnpm
      /root/nodeJS/node-v10.16.0-linux-arm64/lib/node_modules/cnpm/bin/cnpm
    2. 创建全局软链接。

      ln -s /root/nodeJS/node-v10.16.0-linux-arm64/bin/cnpm /usr/bin/cnpm

  3. 使用cnpm安装create-react-app。

    cnpm install -g create-react-app

  4. 参考2检查并配置全局create-react-app。

安装

  1. 使用creat-react-app创建项目。

    “my-app”为项目名称,请自行定义。

    create-react-app my-app

  2. 进入创建的项目目录。

    cd my-app/

    目录中,“node_modules”包含项目的依赖包,“public”文件夹存放“index.html”供浏览器访问, “src”存放各中“.js”文件。

  3. 启动运行项目。

    npm start

运行和验证

  1. 过浏览器访问部署的React项目。

    http://[ECS IP]:3000/

    3000为默认端口号。

    在浏览器上显示的内容如图1所示。

    图1 访问React

  2. 修改“src”目录下的“App.js”

    修改后的内容如下:

    function App() {
    return (
    <div className="App">
    <header className="App-header">
    <img src={logo} className="App-logo" alt="logo" />
    <p>
    Welcome to learn React!
    </p>
    <a
    className="App-link"
    href="https://reactjs.org"
    target="_blank"
    rel="noopener noreferrer"
    >
    Learn React
    </a>
    </header>
    </div>
    );
    }

  3. 保存修改,浏览器自动刷新加载。

    显示内容如图2所示,表示正常。

    图2 重新加载

分享:

    相关文档

    相关产品

文档是否有解决您的问题?

提交成功!非常感谢您的反馈,我们会继续努力做到更好!
反馈提交失败,请稍后再试!

*必选

请至少选择或填写一项反馈信息

字符长度不能超过200

提交反馈 取消

如您有其它疑问,您也可以通过华为云社区问答频道来与我们联系探讨

智能客服提问云社区提问