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

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

写在前面

在最近看了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 命名运行。

微信截图_20221112115203.png


微信截图_20221112115217.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" />
复制代码

微信截图_20221112115305.png


微信截图_20221112115331.png


微信截图_20221112115350.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" />
复制代码


微信截图_20221112115411.png

注意:只支持苹果手机


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


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

微信截图_20221112115443.png


  • noscript

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

微信截图_20221112115504.png


manifest.json

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

微信截图_20221112115519.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引入

微信截图_20221112115636.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 新语法 用于引入统一暴露和分别暴露的语法。(不是解构赋值)

微信截图_20221112115703.png


微信截图_20221112115719.png


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

微信截图_20221112115739.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插件的安装

安装插件

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

微信截图_20221112115815.png


组件化编码流程

  1. 拆分组件: 拆分界面,抽取组件
  2. 实现静态组件: 使用组件实现静态页面效果
  3. 实现动态组件
    3.1 动态显示初始化数据
3.1.1 数据类型
 3.1.2 数据名称
 3.1.2 保存在哪个组件?
复制代码
  1. 3.2 交互(从绑定事件监听开始)



目录
相关文章
|
5天前
|
JSON JavaScript 前端开发
前端 ex2json 用于 vue/react/js 将 xls、xlsx、csv 文件转成 json 数组
前端 ex2json 用于 vue/react/js 将 xls、xlsx、csv 文件转成 json 数组
97 0
|
7月前
|
前端开发
React-脚手架
React-脚手架
48 0
|
5天前
|
前端开发 JavaScript 开发者
React 项目用过什么脚手架(本题是开放性题目)
React 项目用过什么脚手架(本题是开放性题目)
15 0
|
5天前
|
存储 前端开发 API
React 实现文件分片上传和下载
在当今的前端开发中,处理文件流操作已经成为一个常见的需求。无论是上传、下载、读取、展示还是其他的文件处理操作,都需要高效且可靠地处理二进制数据。而随着文件大小的增加和网络传输的限制,文件分片上传和下载逐渐成为了提升性能和用户体验的必备技术。
|
5天前
|
缓存 前端开发 JavaScript
第二十八章 React脚手架配置代理
第二十八章 React脚手架配置代理
|
5天前
|
前端开发 测试技术 程序员
第十五章 react脚手架
第十五章 react脚手架
|
10月前
|
缓存 JavaScript 前端开发
Windows7压缩包安装node.js 报错提示windows Server 2012 R2 和安装React脚手架 最详细教程
对于Windows 7安装node.js 提示“This application is only supported on wWindows 8.1,windows Server 2012 R2, or higher.”类似这种情况的,该问题是因为node.js官方在 x12版本后就不支持win7系统了。
|
5天前
|
前端开发 JavaScript
前端知识笔记(二十六)———React如何像Vue一样将css和js写在同一文件
前端知识笔记(二十六)———React如何像Vue一样将css和js写在同一文件
33 1
|
7月前
|
前端开发 应用服务中间件 nginx
简单几步,将React项目脚手架Webpack换成Vite⚡⚡,附带性能比较和思考
简单几步,将React项目脚手架Webpack换成Vite⚡⚡,附带性能比较和思考
|
8月前
|
缓存 前端开发 JavaScript
React | React脚手架解析
React | React脚手架解析

热门文章

最新文章