react复习之脚手架

117 阅读2分钟

「这是我参与11月更文挑战的第11天,活动详情查看:2021最后一次更文挑战

定义:

脚手架,也就是框架的意思,相当于我们做项目的基础架构。有了脚手架,项目的搭建开发就会更加稳定和方便,react的脚手架为create-react-app,使用脚手架可以更好的实现模块化, 组件化, 工程化

创建项目并启动

  1. 在安装脚手架之前,我们要保证已经安装了相关依赖node和npm包管理工具,node下载完成后,npm可以通过命令npm install,或者yarn(yarn install)安装
  2. 安装react脚手架,可以通过命令npm install -g create-react-app 或者yarn install -g create-react-app安装
  3. 创建react项目,通过命令create-react-app '文件名'创建(注意:目录名不要使用大写,因为在Linux环境下会严格区分大小写,严谨)
  4. 进入项目文件夹:cd '文件名'
  5. 启动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组件文件

  1. 在项目根目录新建index.html文件
  2. 新建根文件夹src,在里面新建几个子文件夹images,utils,js等用于存放图片,公用代码,静态资源等文件
  3. 通过ES6方法导入react和react-dom,
import React from 'react';
import ReactDOM from 'react-dom';
  1. 在App文件做好组件渲染
  2. 梳理项目结构,完成