學(xué)習(xí)的產(chǎn)物

學(xué)習(xí)最好的方式還是跟著項(xiàng)目走！
在學(xué)習(xí)React的時(shí)候，我給自己找了個(gè)項(xiàng)目：經(jīng)典的猜數(shù)字游戲。

（文末附完整源碼）

這個(gè)游戲暫定要完成以下內(nèi)容：

• 首頁(yè)
• 猜數(shù)字游戲
• 設(shè)置
• 幫助
• 關(guān)于

由于筆者的前端是半路出家，所以或許有些地方在大師看來(lái)會(huì)很幼稚，歡迎指正！

話不多說(shuō)，開始創(chuàng)建猜數(shù)字游戲項(xiàng)目：

react的安裝也需要Node.js，這里就不介紹如何安裝Node.js了
有需要的移步：Node.js官網(wǎng)

1. 安裝腳手架create-react-app

在安裝之前，確保安裝了Node.js和npm的最新版本。
使用npm全局安裝create-react-app:

npm install -g create-react-app

-g 表示全局安裝，在Windows下，需要管理員權(quán)限。在Mac/Linux中，還需要輸入sudo。

2. 創(chuàng)建項(xiàng)目

輸入如下語(yǔ)句，看網(wǎng)絡(luò)情況，這個(gè)創(chuàng)建，需要一段時(shí)間，耐心等待。

npx create-react-app guessing

3. 啟動(dòng)項(xiàng)目

接下來(lái)，進(jìn)入創(chuàng)建的guessing目錄，輸入npm start啟動(dòng)項(xiàng)目

cd guessing
npm start

到此，項(xiàng)目啟動(dòng)了，不出意外，瀏覽器自動(dòng)打開 http://localhost:3000 應(yīng)該能看到react默認(rèn)的畫面。

附上github完整的源碼地址：
https://github.com/bobgame/ReactGuessing

下一篇：React實(shí)戰(zhàn)(二) 猜數(shù)字游戲-制作首頁(yè)