React零基础入门到项目实战
第二章 脚手架create-react-app构建React应用
文章目录
一、create-react-app是什么？
create-react-app 是FaceBook的React团队官方出的一个构建React单页面应用的脚手架工具。
它本身集成了Webpack，并配置了一系列内置的loader和默认的npm的脚本，能实现零配置就可以开发React的应用。
Create React App 让你仅通过一行命令，即可构建现代化的Web应用。无需学习和配置大量构建工具，实时页面刷新的功能让你更专注于编码。
二、需要的环境
Node.js: http://nodejs.cn/download/
安装时一直下一步就好,安装在自己的环境目录下Git: https://git-scm.com/downloads
镜像:https://npm.taobao.org/mirrors/git-for-windows/
三、脚手架create-react-app
1、新建文件夹（例如：react-project），并在目标文件夹下打开终端或VsCode打开。
# 全局安装 create-react-app
npm install -g create-react-app
# 或者如果不想全局安装，可以直接使用npx（临时安装，拿的是最新的脚手架）
npx create-react-app
# 查看是否安装成功
create-react-app -V
2、创建第一个 React 应用程序
1）create-react-app构建一个 React 应用程序
# 这里的 my-app 是项目名称，注意命名方式（不能有大写字母）
create-react-app my-app
--------------创建中-------------
Creating a new React app in E:\React\project\my-app.
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...
这里需要等待一段时间，此过程实际上会安装三个东西：
- react：react的顶级库
- react-dom：因为react有很多的运行环境，比如App端是react-native，在web上运行就使用react-dom
- react-scripts：包含运行和打包react应用程序的所有脚本及配置
出现下面这个界面，就表示创建项目成功！
2）根据提示，通过 cd my-app 命令进入你创建的项目目录并运行 npm start，即可运行项目并默认打开浏览器访问，默认端口号为 3000。
3）我们用VsCode，打开刚才项目！
项目开发中，目录结构说明：
- build/：存放配置文件
（其中，dev.js：开发环境服务的配置文件。webpack.dev.conf.js：开发环境下后台服务器配置文件。） - node_modules：用于存放 npm install 安装的依赖文件（项目工程所需的依赖包）
- package-lock.json：锁定安装时的包的版本号，保证团队开发的依赖能一致
- public：静态公共目录
- src： 项目源码目录
（其中，modules：模块代码。less：样式文件） - static：静态资源文件
- static/js：公共库
- dist：打包后的执行文件
先介绍到这里，下篇再见！