「这是我参与11月更文挑战的第11天,活动详情查看:2021最后一次更文挑战」
定义:
脚手架,也就是框架的意思,相当于我们做项目的基础架构。有了脚手架,项目的搭建开发就会更加稳定和方便,react的脚手架为create-react-app,使用脚手架可以更好的实现模块化, 组件化, 工程化
创建项目并启动
- 在安装脚手架之前,我们要保证已经安装了相关依赖node和npm包管理工具,node下载完成后,npm可以通过命令npm install,或者yarn(yarn install)安装
- 安装react脚手架,可以通过命令npm install -g create-react-app 或者yarn install -g create-react-app安装
- 创建react项目,通过命令create-react-app '文件名'创建(注意:目录名不要使用大写,因为在Linux环境下会严格区分大小写,严谨)
- 进入项目文件夹:cd '文件名'
- 启动react项目npm start
脚手架项目结构
public ---- 静态资源文件夹
favicon.icon ------ 应用程序顶部图标
index.html--------主页面,应用index.html入口文件
manifest.json ----- web app配置有关文件
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库的支持)
README.md ------- readme说明文档
package.json-------node管理项目必备文件,包含整个应用程序说明,内容有应用名称、依赖包、版本号、以及项目的启动、打包命令等
新建react文件
通过react脚手架搭建好项目后,我们接下来要做的就是新建一个react组件文件
- 在项目根目录新建index.html文件
- 新建根文件夹src,在里面新建几个子文件夹images,utils,js等用于存放图片,公用代码,静态资源等文件
- 通过ES6方法导入react和react-dom,
import React from 'react';
import ReactDOM from 'react-dom';
- 在App文件做好组件渲染
- 梳理项目结构,完成