個人之前也粗略看過react的文件，但是程式設計師最怕的就是沒有專案實操，看完後一段時間就全忘了，但是現在市面上react的使用又很多（我太難了）。最近因為疫情只能呆在家裡，剛好利用這段時間搞一搞。當然也是粗略的搞，做完乙個大屏展示後，發現react上手確實比vue要難點。react沒有vue一樣的模板語法，react更接近原生js的操作，而且配置項也比較多。
這篇文章把我開發中遇到的一些坑記錄下來，方便以後查詢
1、建立專案
直接利用react的腳手架進行建立，這裡有兩種方式:
如果你本地全域性安裝了，就可以直接使用
2、專案目錄結構
可以根據個人的習慣靈活組織專案結構，如加入路由、redux等。
3、使用css預編譯
npm run eject4、本地執行
本地執行很方便，直接輸入npm start命令就會開啟乙個本地伺服器，並自動開啟瀏覽器，react本地伺服器預設埠3000，如果埠被占用，就會隨機分配乙個埠：
修改完成後重新執行npm start，就會在指定埠啟動
線上部署的時候遇到的問題就比較頭痛了，每台伺服器的情況不一樣，你的問題也許別人沒遇到過，別人給的答案可能根本就不能解決你的問題，只能按實際情況來。
1、伺服器環境安裝
首先確保你的伺服器上安裝了node，怎麼安裝可以網上找下，有很詳細的文章說明，當然要求你懂點linux命令。
2、安裝依賴
將本地處理好的**放到伺服器上，這裡記得執行npm install命令來安裝依賴，在專案的目錄中執行npm install命令，node會根據package.json中的內容來安裝依賴。
3、編譯
這一步也不會有什麼問題，因為伺服器上是不能直接用npm start來執行，涉及到一些資源的路徑問題。所以需要先執行npm run build命令來編譯檔案。編譯成功後會生成乙個build目錄，裡面就是編譯過後的檔案：
4、執行
執行分兩種方式，一種是把build目錄拷貝到nginx對應的目錄中，或者用nginx**到build目錄，這中方式比較簡單；第二種方式是用serve -s build來啟動服務，然後用nginx**到react服務，這裡我遇到了問題：
安裝了serve命令後，執行serve -s build時提示命令不可用
這個問題困擾了整整乙個上午，網上查資料有幾種說法，有說需要設定package.json中的homepage，我照著設定了，但是任然無法解決；有說是因為node版本太低的原因，所以我想公升級node版本，於是我安裝了n命令，結果發現n命令也無法使用。
到這裡我開啟明白了不是node的原因，問題應該在伺服器上，終於我找到了一篇文章說是因為node的環境變數問題，需要修改/etc/profile檔案
vim /etc/profileexport path="$path:/usr/local/nodejs/bin"source /etc/profilenpm install -g serveserve -s build但是，這個時候你不太好訪問，需要在nginx中新增**，找到nginx的安裝目錄，然後找到nginx.conf檔案新增**：
location /react 三 全域性傳參
全域性傳參的兩種方式 1 存入本地,可以實現雙向傳遞 新增本地資料 值必須是字串，如果是列表或物件需要 json stringify data localstorage.setitem 鍵 值 獲取本地資料 如果值是列表或物件 json parse localstorage.getitem 鍵 2 ...
react全域性監聽路由變化
作用 把不是通過路由切換過來的元件中，將react router 的 history location match 三個物件傳入props物件上 介紹乙個簡單應用 main.js 當從瀏覽器中直接輸入位址時，withrouter將路由屬性傳入main元件的this.props中，通過componen...
react資料的獲取
fetch,es6最新提供全域性方法，用來ajax非同步請求資料。fetch 位址 then function res then function res 這裡返回的即是服務端返回的資料 1.想要獲取表單資料，那麼就是用ref繫結相對應的元素。然後通過元件直接獲取。ref監聽一般的表單 h1ref ...