React基础-webpack+creact-react-app创建项目

学习视频:学习视频

2节:webpack工程化创建项目

2.1.webpack工程化工具:vite/rollup/turbopak;

+实现组件的合并、压缩、打包等;
+代码编译、兼容、校验等;

2.2.React工程化/组件开发

我们可以基于webpack自己去搭建一套工程化打包的架子,但是这样非常的麻烦、复杂;React官方,为我们提供了一个脚手架:
+脚手架:基于它创建项目,默认就把webpack的打包规则已经处理好了,把一些项目需要的基本文件也都创建好了

2.3.create-react-app基于运用

  • 安装脚手架:npm跑项目改为yarn跑项目:把node_modules和package-lock.json删掉,用yarn跑就行了
    $ npm i create-react-app -g
    检查安装情况
    $ create-react-app --version
  • 基于脚手架创建React工程化的项目
    $ create-react-app 项目名称 (项目名称要遵循npm命名规则,数字、小写字母、_ 命名)
项目目录:
|-node_modules: 项目依赖
|-src: 所有后续编写的代码,几乎都放在src下,[打包的时候一般只对这个目录下的代码进行处理]
	|-index.js ----入口文件
|-public:放页面模板
	|-index.html
|-package.json

在这里插入图片描述

2.4.React项目中,默认会安装:

react: React框架的核心
react-dom: React视图渲染的核心[基于React构建webApp(HTML页面)]
react-natvie: 构建和渲染APP的
react-scripts: 脚手架为了让项目目录看起来干净一些,把webpack打包的规则及相关的插件/LOADER等都隐藏到了node_modules目录下,react-sctipts就是
脚手架中自己对打包命令的一种封装,基于它打包,会调用node_modules中的webpack等进行处理
web-vitals: 性能检测工具
在这里插入图片描述

2.5.package.json文件

在这里插入图片描述
eslint配置:
在这里插入图片描述
浏览器兼容配置:
在这里插入图片描述
src文件夹:
在这里插入图片描述

3节:脚手架的进阶应用

3.1 yarn eject / npm run eject的使用

在这里插入图片描述
命令执行后会生成两个文件夹:config和scripts
在这里插入图片描述
在这里插入图片描述
package.json文件的更改:
在这里插入图片描述
babel-preset-react-app包是对@babel/preset-env语法包的重写[目的:把es6转为es5],重写的目的:让语法包可以识别React的语法,实现代码转换
在这里插入图片描述
在这里插入图片描述

3.2.常见的配置修改

  • 把sass改为less
yarn add less less-loader@8 // 使用第八个版本,用新版本有些配置规则会匹配不上
yarn remove sass-loader

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

  • create-react-app脚手架默认webpack规则的修改:直接去暴露的源码中改:(在webpack.config.js文件中改)
    所以需要大家具备一定的webpack能力

  • 配置别名:把src下的某个文件引入路径改为’@/’
    在这里插入图片描述

  • 修改端口号和域名:
    在这里插入图片描述

如果想基于修改环境变量的方式来改:

yarn add cross-env

在这里插入图片描述

  • 修改浏览器兼容
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
  • 跨域代理:处理Proxy跨域
    在这里插入图片描述
  1. 在src目录中新建setupProxy.js文件(config/paths.js文件 中setupProxy.js作为跨域入口文件)
yarn add http-proxy-middleware

http-proxy-middleware:实现跨域代理的模块[webpack-dev-serve的跨域代理原理,也是基于它完成的]
在这里插入图片描述
测试使用:
在这里插入图片描述

4节:MVC模式和MVVM模式

atackoverflow网站专门用于统计哪个框架的使用次数
在这里插入图片描述

5节:JSX语法使用上的细节

5.1.JSX构建视图的基础知识

JSX: javascript and xml(自定义标签) 把JS和HTML标签混合在了一起

6节:JSX的具体应用

在这里插入图片描述
在这里插入图片描述

稀疏数组不能使用数组的迭代方法[forEach, map]
在这里插入图片描述
在这里插入图片描述

7节:JSX底层渲染机制【创建virtualDOM(虚拟DOM)】

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

8节:JSX底层渲染机制【创建真实DOM】

https://www.bilibili.com/video/BV17e411r7TH?p=8&vd_source=5c584bd3b474d579d0bbbffdf0437c70 学习视频,老师教你敲源码
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

9节:函数组件的底层渲染机制

11节:React中的插槽处理机制

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

  • 9
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值