【第3章】3.1 使用create-react-app创建react应用(基于React脚手架)

使用create-react-app创建react应用

1.react脚手架（简单快速的编写应用）

1. xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目
   ①包含了所有需要的配置（语法检查、jsx编译、devServer…）
   ②下载好了所有相关的依赖
   ③可以直接运行一个简单效果
2. react提供了一个用于创建react项目的脚手架库: create-react-app
3. 项目的整体技术架构为: react + webpack + es6 + eslint
4. 使用脚手架开发的项目的特点: 模块化, 组件化, 工程化

2.创建项目并启动

• 第一步，全局安装：npm i -g create-react-app
• 第二步，切换到想创项目的目录，使用命令：create-react-app hello-react
• 第三步，进入项目文件夹：cd hello-react
  第四步，启动项目：npm start

3. react脚手架项目结构

public ---- 静态资源文件夹 
		favicon.icon ------ 网站页签图标
		index.html -------- 主页面（一个html）
		logo192.png ------- logo图
		logo512.png ------- logo图
		manifest.json ----- 应用加壳的配置文件
		robots.txt -------- 爬虫协议文件
src ---- 源码文件夹
		App.css -------- App组件的样式
		App.js --------- App组件
		App.test.js ---- 用于给App做测试
		index.css ------ 样式
		index.js ------- 入口文件
		logo.svg ------- logo图
		reportWebVitals.js
			--- 页面性能分析文件(需要web-vitals库的支持)
		setupTests.js
			---- 组件单元测试的文件(需要jest-dom库的支持)

3. 我们主要用到的就是三个文件（简化页面）

1. index.html -------- 主页面
2. App.js --------- App组件
3. index.js ------- 入口文件

简化版项目（启动项目即可显示）

优化（规范）页面——APP.JS页面

1. 文件命名为jsx
2. 在APP.js文件里引入组件

在在APP.js文件里引入组件需注意一个小知识点

引入组件名是xxx.jsx,导入需要写对应的名字，如果是index.jsx或者index.js可以省略不写

比如：

1. 如果上面Hello组件里面文件名为 hello.js hello.css, 则在APP.js里导入需要这样写：import Hello from './component/Hello/Hello’
2. 如果上面Hello组件里面文件名为 index.js index.css, 则在APP.js里导入需要这样写：import Hello from './component/Hello’

4.下载文件地址：

https://download.csdn.net/download/mwh321/49543870

下载后输入 npm install 和 npm start 即可