简介

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

编译和测试方式

1.安装搭建React项目的工具

1)安装cnpm工具。

推荐使用cnpm快速搭建React开发环境，安装cnpm工具。

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

（其中npm是NodeJS的包管理工具，需要事先安装好NodeJS）

2)（可选）创建全局软链接。

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

a.查看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

b.创建全局软链接

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。

2.搭建React项目

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

3.测试React运行

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

http://[ECS IP]:3000/

3000为默认端口号。

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

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)保存修改，浏览器自动刷新加载。

显示内容如下，表示正常。