React環境如何搭建？ react環境搭建詳情介紹（附實例）

本篇文章主要講述的是關於 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 >

## #p id = "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使用手冊 欄位中學習），有問題的可以在下方留言提問。

React環境如何搭建？ react環境搭建詳情介紹（附實例）

相關文章