React实战(一) 猜数字游戏-建立项目

学习的产物

学习最好的方式还是跟着项目走！
在学习React的时候，我给自己找了个项目：经典的猜数字游戏。

（文末附完整源码）

这个游戏暂定要完成以下内容：

• 首页
• 猜数字游戏
• 设置
• 帮助
• 关于

由于笔者的前端是半路出家，所以或许有些地方在大师看来会很幼稚，欢迎指正！

话不多说，开始创建猜数字游戏项目：

react的安装也需要Node.js，这里就不介绍如何安装Node.js了
有需要的移步：Node.js官网

1. 安装脚手架create-react-app

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

npm install -g create-react-app

-g 表示全局安装，在Windows下，需要管理员权限。在Mac/Linux中，还需要输入sudo。

2. 创建项目

输入如下语句，看网络情况，这个创建，需要一段时间，耐心等待。

npx create-react-app guessing

3. 启动项目

接下来，进入创建的guessing目录，输入npm start启动项目

cd guessing
npm start

到此，项目启动了，不出意外，浏览器自动打开 http://localhost:3000 应该能看到react默认的画面。

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

---

下一篇：React实战(二) 猜数字游戏-制作首页

---