最近玩了一下React，感覺還挺好玩的，說實話對後端的來說比vue好多了，記得剛學vue的時候是一頭霧水；
基礎知識暫時後面慢慢說，其實感覺還是挺容易的吧，今天就簡單使用一下react腳手架，後續的用這個腳手架寫點東西
1.準備node版本
使用create-react-app這個官方腳手架，對node版本有要求，最低要是10，否則就會報下面的這個錯
我猜，應該不會有人真的去傻傻的手動去官網下node安裝包然後再更新吧.......
我們可以使用nvm進行node版本管理，沒有用過的可以看看這裏nvm使用 ，我們可以去官網看看比較新的版本，就下載14.17.0吧
nvm安裝node：nvm install 14.17.0
nvm查看node版本：nvm ls
nvm切換node版本：nvm use 14.17.0
查看node版本：node -v
下圖可以看到版本切換完畢
2.安裝create-react-app腳手架
注意，首先注意自己npm的源，可以使用nrm來管理源，nrm的使用
腳手架安裝命令：npm i -g create-react-app
這個腳手架名字不要拼錯了...有的人非要自己敲命令，鍛鍊自己的鍵盤能力，就是不肯複製，我也不知道有啥好鍛鍊的...╮(╯_╰)╭
全局安裝好了腳手架之後直接使用使用命令：create-react-app ,能看到下面的就表示安裝成功了
現在我們就可以使用腳手架創建項目了，注意：項目名字不要有大寫！
對於後端的比較喜歡駝峯命名法，這裏請用下劃線，不然會報錯；
正確的應該是：create-react-app hello-react，能看到下面這種界面就成功了，然後切換到你的項目目錄，最後使用npm start運行，瀏覽器就會自動打開看到react的圖標就ok了
這裏又要注意一下：如果你之前安裝了yarn，這裏npm命令會被替換成yarn命令，其實都一樣，不要糾結，因爲React和yarn的是Facebook的
3. 目錄結構
實際項目中一般不會在cmd中運行項目吧，我們可以使用vscode
打開項目之前我們可以進入項目中將下面這兩個目錄刪除，我們不用版本管理๑乛◡乛๑
大概瞄兩眼目錄結構，也沒什麼東西，就愉快的跳過了(￣▽￣)ノ
小小的總結一下：在項目啓動的時候腳手架就會將執行src/index.js,下圖所示，其實就是將App組件渲染到id爲root的div標籤所在的位置，至於爲什麼能找到public/index.html中的div標籤，這就是腳手架封裝的，暫時不要糾結(´⊙ω⊙`)！
src/index.js：
其實我們可以將腳手架生成的public/index.html刪除掉，自己生成一個index.html標籤，只需要添加一個標籤<div id="root"></div> 就行了
public/index.html
4.插件安裝
我們瞄一下剛剛生成的App.js文件，emmm...居然是一個函數組件，我們肯定想用更高端一點的類組件呀！我們直接去手寫麼？肯定不會呀，都是一些模板性的東西，不過剛入門可以手寫幾遍找找感覺(҂ ˘ _ ˘ )
src/App.js
安裝下面的這個插件：
然後我們將App.js內容都給刪除，然後輸入rcc就能自動生成一個類組件，之後就可以在div那裏使用其他的組件了
注意：可能剛安裝插件的時候沒有提示，那麼重啓vscode，還是沒有提示，那你file->preference->online service settings->Extensions->TypeScript，勾上，再重啓一下；如果還是沒有提示，就將vscode中和eslint相關的插件（上圖展示所有安裝過的插件）給禁用掉，再重啓！最後還是沒有的話，重裝一個vscode吧！(T＿T)/~~(-_-メ)
注意一小點，因爲React支持jsx，而jsx一般是組件，而js是其他的文件，最好後綴名區分一下，就能一眼看出來組件和普通的js文件；
以jsx結尾的文件，在導入的時候也可以忽略後綴名
最終展示結果：
5.結束
一頓操作猛如虎，你看代碼hello world！
這個腳手架封裝了很多東西，配置文件很少，因爲還有將webpack相關的配置文件都給隱藏起來了，使得我們只需要專注於頁面功能的開發就行了！就我個人感覺，比vue-cli那個腳手架清晰多了；
學了一下React之後，感覺腰也不酸了，腿也不疼了，精神也好了，一口氣都能上五樓了！(╯—﹏—)╯（┷━━━┷