React脚手架及脚手架文件详细介绍

默海笑
746 阅读4分钟

「本文已参与低调务实优秀中国好青年前端社群的写作活动」。

写在前面

在最近看了React之后，一直觉得学的懵懵然，虽然很多大佬的手写笔记，写的都很不错，但是我一直没有我想要的那种细无巨细，比如类式组件this指向问题的追根溯源，又比如三大实例属性简写的由来，总之我还是决定做一份事无巨细的笔记。

那就让我们开始吧！

初始化react脚手架

3.1.1. react脚手架

1. xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目

1. 包含了所有需要的配置（语法检查、jsx编译、devServer…）

2. 下载好了所有相关的依赖

3. 可以直接运行一个简单效果

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

3. 项目的整体技术架构为:  react + webpack + es6 + eslint

4. 使用脚手架开发的项目的特点: 模块化, 组件化, 工程化

创建项目并启动

第一步，全局安装：npm i -g create-react-app

第二步，切换到想创项目的目录，使用命令：create-react-app hello-react

第三步，进入项目文件夹：cd hello-react

第四步，启动项目：npm start

yarn

  • yarn start 运行脚本

  • yarn build 项目打包

  • yarn test 几乎不用，用于测试

  • yarn eject 暴露webpack相关文件、是不可逆的。

运行项目

打开创建项目的文件夹，在文件路径输入cmd、进入命令窗口输入yarn start 命名运行。

image.png

image.png

最后项目会打开浏览器，出现一个logo旋转的页面

脚手架文件介绍_public

vscode打开终端 ctrl + ~

git

  • 搭建脚手架的时候会直接创建git仓库。

  • .gitignore git的忽略文件。

  • debug.log 生成日志

public文件夹下文件介绍

SPA应用

  • 全称：single page application

  • React、Vue所写的应用都是SPA

  • public 一般存储静态文件，例如页面、样式、图片。

favicon.ico

  • 网站个性的缩略logo标志

index.html（不可以修改文件名）

  • 整个项目只有一个html文件

  • %PUBLIC_URL%

<!-- %PUBLIC_URL%代表public文件夹的路径 -->
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<!-- 使用相对路径 -->
<link rel="icon" href="./favicon.ico" />
  • 开启理想视口，用于做移动端网页的适配
<!-- 开启理想视口，用于做移动端网页的适配 -->
<meta name="viewport" content="width=device-width, initial-scale=1" />
  • 用于配置浏览器页签+地址栏的颜色(仅支持安卓手机浏览器)
   <!-- 用于配置浏览器页签+地址栏的颜色(仅支持安卓手机浏览器) -->
    <meta name="theme-color" content="red" />

image.png

image.png

image.png

  • 描述网站信息
<meta
    name="description"
    content="Web site created using create-react-app"
/>
  • apple-touch-icon
<!-- 用于指定网页添加到手机主屏幕后的图标 -->
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />

image.png

注意：只支持苹果手机

  • manifest
<!-- 应用加壳时的配置文件 -->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

应用加壳：书写html页面，在页面外面套一个安卓的壳，就可以被转换为一个安卓应用。本质上内部还是网页。

image.png

  • noscript

浏览器不支持js或者禁用了js就会调用这个标签，显示这个页面的内容

image.png

manifest.json

一个配置文件：用来配置应用程序的权限。

image.png

<!-- 若llq不支持js则展示标签中的内容 -->
<noscript>You need to enable JavaScript to run this app.</noscript>

robots.txt

爬虫协议文件：用于设置哪些内容是否允许被爬虫的

脚手架文件介绍_src

App.js

  • 将App组件放到div标签节点。

App.test.js

  • 用于测试App.js

App.css

  • App组件的样式

index.css

  • 通用的样式

  • 也可以在public文件夹下面创建css文件将index.css文件放入里面。通过link引入

image.png

index.js

  • 不是index组件，是一个入口文件

  • 引入React核心库、React-dom库、App组件、index.css样式文件。

  • 和index.html建立链接 （React底层就已经封装写好了）

  • React.StrictMode

用于检查App组件及其子组件的代码写法是否规范是否过时。

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

logo.svg

一个图片

reportWebVitals

  • 用于记录页面的性能

  • 使用web-vitals库进行页面性能的检测

setupTests

  • 用于做应用的整体测试，某一个模块的单元测试。

  • 需要使用第三方库jest-dom

一个简单的hello组件

package.json

  • 包的说明文件

README.md

  • 整个仓库的说明文档

yarn.lock

  • yarn包的一个缓存文件（下一次下载文件时更加快）

引入

  • es6 新语法 用于引入统一暴露和分别暴露的语法。（不是解构赋值）

image.png

image.png

  • 这里是取的是React身上的属性component

image.png

文件夹component

  • 用于放自己定义的组件

  • 在文件夹下面对每一个组件创建文件夹用于放置组件的js、css等文件

  1. 文件使用index命名
  • 引入的时候可以省略部分代码
import Hello from './components/Hello'
import Welcome from './components/Welcome'
  1. 文件使用组件名命名
import Hello from './components/Hello/Hello'
import Welcome from './components/Welcome/Welcome'

组件与普通js文件的区分

  • 组件文件名首字母要大写

  • 组件后缀名改为jsx

样式模块化

子组件样式冲突

  • 子组件引入的样式最终都会引入到App组件，可能会发生冲突。

解决方法：

  1. 使用less
.hello {
	.title{
		background-color: orange;
	}
}

2.样式模块化

  • 将名字改为index.module.css
import hello from './index.module.css'

export default class Hello extends Component{
	render(){
		return <h2 className={hello.title}>Hello,React!</h2>
	}
}

所有hello的样式都保存在hello这个对象里了。

vscodereact插件的安装

安装插件

  • 使用代码片段（插件细节下方可以查看到）

image.png

组件化编码流程

  1. 拆分组件: 拆分界面,抽取组件

  2. 实现静态组件: 使用组件实现静态页面效果

  3. 实现动态组件

    3.1 动态显示初始化数据

     3.1.1 数据类型

 3.1.2 数据名称

 3.1.2 保存在哪个组件?

    3.2 交互(从绑定事件监听开始)

avatar
文章
阅读
粉丝