簡介
React(有時叫“React.js”或“ReactJS”)是一個為數(shù)據(jù)提供渲染為HTML視圖的開源JavaScript庫。
編譯和測試方式
1.安裝搭建React項目的工具
1)安裝cnpm工具。
推薦使用cnpm快速搭建React開發(fā)環(huán)境,安裝cnpm工具。
npm install -g cnpm --registry=https://registry.npm.taobao.org
(其中npm是NodeJS的包管理工具,需要事先安裝好NodeJS)
2)(可選)創(chuàng)建全局軟鏈接。
cnpm安裝完成后,如果cnpm命令沒有存放在全局路徑下,則需要創(chuàng)建全局軟鏈接,如已存在,則跳過此步驟。
a.查看cnpm存放的路徑.
find / -name cnpm
回顯內(nèi)容如下:
/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.創(chuàng)建全局軟鏈接
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創(chuàng)建項目。
“my-app”為項目名稱,請自行定義。
create-react-app my-app
2)進入創(chuàng)建的項目目錄。
cd my-app/
目錄中,“node_modules”包含項目的依賴包,“public”文件夾存放“index.html”供瀏覽器訪問, “src”存放各種“.js”文件。
3)啟動運行項目。
npm start
3.測試React運行
1)通過瀏覽器訪問部署的React項目。
http://[ECS IP]:3000/
3000為默認端口號。
在瀏覽器上顯示的內(nèi)容如下所示。

2)修改“src”目錄下的“App.js”。
修改后的內(nèi)容如下:
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"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
3)保存修改,瀏覽器自動刷新加載。
顯示內(nèi)容如下,表示正常。
