本篇文章主要講述的是關於react環境搭建的一些解釋，現在就讓我們一起來看看這篇文章吧 React環境搭建 #最近學習React，希望入個門，我的要求不高，能看得懂些簡單的項目，裝裝逼就好。研究了兩天，感覺科技更新太快，不保持對新科技的持續學習更新，真的跟不上的節奏。環境搭建都讓我覺得有必要寫文章記錄下，算是備個份以後參考。初學者能力有限，理解也不一定對。 React介紹 React是A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES，一個建構使用者介面的JS函式庫。 Hello World範例 看了官網的安裝介紹，點這裡，簡單的學學React其實依賴的環境並不復雜，可以使用官方推薦的在線環境CodePen，直接寫程式碼看結果，不需要安裝配置任何東西。不過，我還是想在本地搭建體驗下，萬一搞著搞大了。 官網提供了一個Hello World的網頁程式碼（html檔案），直接開啟瀏覽器就可以運行，程式碼如下： 1 2 3 4 5 #6 7 8 9 10 11 #12 #13 #14 15 16 17 18 #19 ###### # ###########html> # head > #字元集="UTF-8"/> 標題>你好 世界標題># #src="https://unpkg.com/ React @latest/dist/react.js">腳本#># 腳本#src="https://unpkg.com/ react -dom@latest/dist/react-dom.js">腳本> #src="https://unpkg.com/ babel -standalone@6.15.0/babel.min.js">#腳本> 頭># body> ## #pid="root"#>p > #type#=##"text/babel" #> #ReactDOM.render( #h1>你好， world!h1>, document.getElementById('root') );# #> #body> #html##> ######################################## ######## 可以看到，程式碼中引用了CDN上現成的React相關庫文件，所以React的程式碼可以直接寫，其實這樣就挺好了，本地隨便找個編輯器（Sublime Text、Notepad 什麼的），直接就可以開乾，學React基礎知識了吧。 一開始我也是這樣的，用Sublime Text編輯程式碼，簡單粗暴的開始了（我還找了Sublime Text上的React相關外掛程式）。但當我把React的script部分放到外部的js檔案中引入時，例子就運行不了了（用的Chrome瀏覽器），然後大家告訴我需要伺服器支持，趕緊找Gavin同學支援一把。 Node.js和WebStorm安裝 Gavin同學的專案大致是React做前端，Java做後端，推薦給我的工具也是JetBrains家族的霸氣IDE ，WebStorm和Intellij IDEA，WebStorm裡倒騰React應該是so easy的，於是我準備下載WebStorm和Node.js（好吧，都沒用過，正好一波帶走）。 npm是一個Node.js的套件管理和分發工具，我們可以透過npm來引入React，搭建React的環境。新版的 Node.js 已經整合了npm 我下載的是最新的v7.4.0 for Windows (x64)版本，安裝就不多介紹了，網路上很多。 其實裝好了Node.js後，可以繼續結合之前的Sublime Text開幹，因為Node.js可以提供伺服器支撐，這樣之前的例子就沒問題了，網易雲課堂中這堂課程就是類似這樣搭建環境的（只不過他用的github的Atom編輯器）： 這個課程中還介紹了Browsersync，一個省時的瀏覽器同步測試工具（原諒我一直沒接觸過這類，看了下還不錯哦），不用每次改了程式碼，還得F5了。 （想看更多就到PHP中文網React參考手冊欄位中學習） #當然，個人還是比較喜歡用IDE一些，所以我需要去體驗下WebStorm（作為一個Java Web開發人員，很遺憾我一直只用Eclipse JEE，忽略了其他的風景）。 收費，但功能強大，號稱The smartest JavaScript IDE，Web前端開發神器，希望不會失望。下載、安裝、License後，興奮的開啟開始體驗。 左側的React Starter Kit是什麼鬼，似乎是React入門包呢，感覺是為我量身定制的，好奇選了這個，並重新指定了項目名和路徑。有興趣的朋友可以試試，反正最終專案建好後可以用，只是裡面的東西有點複雜，沒太搞得懂，所以決定還是回到新建空專案一步步來。 空專案建好之後，是的，什麼都沒有，回到官網教學吧，上面有一個Creating a Single Page Application的內容： Create React App is the best way to starting building a new React single page application. It sets up your development environment so that you can use the latest JavaScript features, provides a nice developer experience, # optimizes感覺有現成的方式可以用，於是follow它的程式碼： 1#2 3 4 #npm install -g create-react-app create-react-app 你好世界 cd你好世界 npm 開始＃＃＃＃＃＃＃＃＃＃ wait，上面的npm相關指令在哪裡輸入是個問題？安裝了Node.js後，如果設定ok，命令列是可以執行上面程式碼的。而在WebStorm中，看似它已經辨識到我的Node.js環境，所以在WebStorm左下角的Terminal視窗中已經可以直接使用npm，相當於命令列，就在這裡面輸吧，一條一條的來： 需要花幾分鐘時間執行前兩條命令，尤其第二條，完成之後，我們的專案中應該創建好React相關的內容了： #看起來，它在我的hello-react目錄中，新建了一個hello-world目錄，並在裡面安裝好了React的內容，接下來參考它的建議，輸入後兩條命令，即進入該目錄，啟動，成功後自動打開瀏覽器造訪了專案首頁： 一切似乎已經ok了，頁面提示我編輯src下的App.js，即可進入React世界，不信改兩行程式碼試試？ 環境是搭建完成了，然而不了解個中情況，這個黑盒子裡有些什麼東東，下來再慢慢研究吧，一切才剛開始呢。 這篇文章到這就結束了（想看更多就到PHP中文網React使用手冊欄位中學習），有問題的可以在下方留言提問。
