持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第17天，点击查看活动详情

前言

前面学习到了React的核心概念和基础语法，今天来上手脚手架

脚手架：用来帮助程序员快速创建一个基于XXX库的模板项目 包含了所有需要的配置（语法检查，jsx编译，本地服务器），相关依赖

React提供了一个用于创建react项目的脚手架库：create-react-app

整个项目的整体技术架构为：react+webpack+es6+eslint

使用脚手架开发的项目的特点：模块化，组件化，工程化

创建项目并启动

首先要安装Node.js，可以参考之前的文章# 从零开始摸索VUE，配合Golang搭建导航网站（一.项目初始化）

1.全局安装：npm i create-react-app -g

2.进入相关目录，使用命令： create-react-app hello-react

3.进入项目文件夹： cd hello-react

4.启动项目： npm start

我的电脑会提示端口3000被占用，使用自动使用其他端口，然后点同意 随后自动会打开浏览器：

查看项目目录：

项目结构：

node_modules：第三方的库

public ： 静态资源文件夹

favicon.icon ： 网站页签图标
index.html ： 主页面
logo192.png ： logo小图
logo512.png ：logo大图
manifest.json ： 应用加壳的配置文件（移动端应用的配置，不做应用加壳不使用）
robots.txt ： 爬虫协议文件

在开发中很少会用到public 文件目录，看到好多CDN厂商会托管网站就是把这个index.html路径托管了

src ： 源码文件夹

App.css ： App组件的样式（以后可以存放路由样式）

App.js ： App组件（以后可以存放路由组件）

App.test.js ： 用于给脚手架做测试

index.css ： 首页样式

index.js ： 项目入口文件

logo.svg ： logo图

reportWebVitals.js ： 页面性能分析文件(需要web-vitals库的支持)

setupTests.js ： 组件单元测试的文件(需要jest-dom库的支持)

在组件中文件名后缀为js都可以改为jsx，React脚手架会自动处理。