前端:react環境配置

react.js 基於node.js環境. 

node.js下載:https://nodejs.org/en/

本文介紹使用facebook提供的create-react-app 構建環境, 基於webapck工具(https://webpack.github.io/)和es6(js下一代語法標準)

使用CLI(命令行)構建:

npx create-react-app my-app
cd my-app
npm start

 會在你當前目錄下創建一個my-app的文件夾, 第三行命令,啓動項目,自動打開默認瀏覽器

啓動完成:

項目結構:

默認使用3000端口

也可以使用傳統方法: 使用script 標籤引入html文件方法如下:

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

<!-- 生產環境中不建議使用 --> <

script src="https://unpkg.com/[email protected]/babel.min.js"></script>

目錄解析:

public下的index.html文件是頁面:

app.js 封裝了一個react組件

index.js 使用了這個組件,並加載到index.html文件中. 

編寫index.html和index.js 這兩個文件.

 

編寫完畢後運行 npm run build ,將引用到的css,js等  按需要 打包. 生成build文件夾  如下: 

將整個目錄copy到項目中

如果頁面展示效果不對.瀏覽器 調試:   可以看到是路徑不對.   大部分都是html 引用js 路徑不對.   自己根據項目靜態資源路徑更改即可