学习的产物
学习最好的方式还是跟着项目走!
在学习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