iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 11
0
自我挑戰組

從JS到React的前端入門實作系列 第 11

Day11:React環境安裝以及啟動React

  • 分享至 

  • xImage
  •  

今日目的

今天來安裝React以及啟動React,會把啟動後的圖貼上。/images/emoticon/emoticon08.gif

安裝Node

因為是Node.js開發,首先要先安裝Node.js,從Node.js 0.6.3以上的版本都已經內建裝上NPM,所以這邊安裝Node.js後就只需檢查一下NPM。

WINDOWS
下載並安裝 Node.js LTS 版本 (裡面已包含NPM)
https://nodejs.org/en/

-v記得小寫 檢查node的版本
node -v

我本機的node版本

https://ithelp.ithome.com.tw/upload/images/20190926/20115505XZT9mSltMO.png

-v記得小寫 檢查npm版本
npm -v

我本機的npm版本

https://ithelp.ithome.com.tw/upload/images/20190926/20115505J8sOYshp18.png

有node就可以安裝React了
/images/emoticon/emoticon30.gif

安裝React

建立專案

npm install -g create-react-app 安裝React套件

create-react-app 專案名稱 ex:create-react-app react-t 創React專案

cd 專案名稱 ex:cd react-t 移動到資料夾

npm start 啟動專案

npm install -g 解釋 全局安装 其中參數-g的含義是代表安裝到全局環境裡面

示範:
1.先移動到資料夾
https://ithelp.ithome.com.tw/upload/images/20190926/20115505rqRP1FuPfi.png
2.安裝React套件
https://ithelp.ithome.com.tw/upload/images/20190926/20115505YDSJuaMQ8V.png
完成後
https://ithelp.ithome.com.tw/upload/images/20190926/20115505ovhumjB1I6.png
3.創React專案
https://ithelp.ithome.com.tw/upload/images/20190926/20115505cVzGbwggSt.png
4.移動到資料夾 cd 專案名稱 ex:cd react_basic
https://ithelp.ithome.com.tw/upload/images/20190926/20115505X9MZOObxNC.png
5.啟動專案 npm start 後的畫面如下
https://ithelp.ithome.com.tw/upload/images/20190926/20115505Ya8egDHdJY.png

今天介紹React安裝,以及啟動React。


參考資料:
https://nodejs.org/en/
https://reactjs.org/
自己


上一篇
Day10:JS跟React的差異
下一篇
Day12:介紹開啟頁面、改用Class形式的組件
系列文
從JS到React的前端入門實作30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言