React学习-初始化react项目

简介: 【8月更文挑战第16天】

目标:

reactv18:->
1.核心的22中api
2路由
3.数据状态管理:redux

项目:
1.b端
业务闭环:登录方案、权限设计、用户管理方案、业务功能、系统架构设计、路由设计

        流程闭环:开发环境、生产环境、测试环境、代码规范、分支管理规范、项目自动化部署、静态资源管理方案

        性能优化:渲染优化、网络优化、编译优化、自动化打包优化、业务开发效率优化、用户体验优化、

    2.c端 ssr服务器渲染项目

        业务:ssr登录健全方案、与spa架构差异、nodejs异构、有无差异

        流程:前后端生产环境、开发环境、自动化部署方案、性能测试、服务器稳定性测试

        性能:渲染优化、网络朋友花、编译优化、自动化打包部署、业务开发效率优化、用户体验优化

工程化 :webpack
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
1 初始化项目:
//CRA脚手架创建项目
npx create-react-app my-app

npm start
1
2
3
4
2 核心文件内容分析

这个核心文件中导入了React和ReactDOM

严格模式作用?

1.不安全的生命周期方法:警告某些在未来版本会被弃用的生命周期
2.警告使用过时或遗留的api
3.意外的富足用
4.警告与旧版本react不兼容的部分
1
2
3
4
面试题:1.React和ReactDOM有啥区别?
1.react:这时React库的核心,定义了React组件的创建和生命周期方法,以及react元素的概念,是react的引擎

2.recat-dom:这个库提供了在游览器环境中使用react的方法,例如将react组件渲染到dom中,或者在dom中触发react组件的更新,可以设为react的驱动程序。

补充:
react-dom/client是浏览器渲染用的库,同理node端也有库
移动端也有
为什么有多个包?
为了功能解耦,渲染有渲染专用的包,引擎只负责引擎
1
2
3
4
5
6
7
8
9
面试题:2.React是框架嘛?
react的核心,其实是一个渲染库。

面试题:3.React严格模式?
1.不安全的生命周期方法:警告某些在未来版本会被弃用的生命周期
2.警告使用过时或遗留的api
3.意外的富足用
4.警告与旧版本react不兼容的部分

相关文章
|
2月前
|
前端开发 JavaScript
React项目路由懒加载lazy、Suspense,使第一次打开项目页面变快
本文介绍了在React项目中实现路由懒加载的方法,使用React提供的`lazy`和`Suspense`来优化项目首次加载的速度。通过将路由组件改为懒加载的方式,可以显著减少初始包的大小,从而加快首次加载速度。文章还展示了如何使用`Suspense`组件包裹`Switch`来实现懒加载过程中的fallback效果,并提供了使用前后的加载时间对比,说明了懒加载对性能的提升作用。
189 2
React项目路由懒加载lazy、Suspense,使第一次打开项目页面变快
|
1月前
|
前端开发 JavaScript
React学习之——条件渲染
【10月更文挑战第16天】React 中没有像Vue中v-if这种指令。React 中的条件渲染和 JavaScript 中的一样,使用 JavaScript 运算符 if 或者条件运算符去创建元素来表现当前的状态,然后让 React 根据它们来更新 UI。
|
2月前
|
前端开发 JavaScript Java
SpringBoot项目部署打包好的React、Vue项目刷新报错404
本文讨论了在SpringBoot项目中部署React或Vue打包好的前端项目时,刷新页面导致404错误的问题,并提供了两种解决方案:一是在SpringBoot启动类中配置错误页面重定向到index.html,二是将前端路由改为hash模式以避免刷新问题。
246 1
|
23天前
|
前端开发 JavaScript 安全
学习如何为 React 组件编写测试:
学习如何为 React 组件编写测试:
36 2
|
27天前
|
前端开发 JavaScript
手敲Webpack 5:React + TypeScript项目脚手架搭建实践
手敲Webpack 5:React + TypeScript项目脚手架搭建实践
|
1月前
|
资源调度 前端开发 JavaScript
React进阶学习
React进阶学习
14 1
|
2月前
|
移动开发 前端开发
react项目配合diff实现文件对比差异功能
在React项目中,可以使用`diff`库实现文件内容对比差异功能。首先安装`diff`库,然后在组件中引入并使用`Diff.diffChars`或`Diff.diffLines`方法比较文本差异。通过循环遍历`diff`结果,可以生成不同样式的HTML元素来高亮显示文本差异。
125 1
react项目配合diff实现文件对比差异功能
|
2月前
|
前端开发 算法 JavaScript
React项目input输入框输入自动失去焦点
本文讨论了在React项目中如何处理input输入框自动失去焦点的问题,特别是在移动端开发中。文章提供了一个使用React Native的TouchableWithoutFeedback组件来监听点击事件,并在事件处理函数中通过调用Keyboard.dismiss()方法使输入框失去焦点的示例代码。这种方法可以确保在用户点击页面其他区域时,键盘能够收起,输入框失去焦点。
101 1
React项目input输入框输入自动失去焦点
|
2月前
|
JavaScript 前端开发 应用服务中间件
本地运行打包好的React、Vue项目
本文讨论了如何本地运行打包好的React和Vue项目,并解决了使用React-Router时Tomcat部署刷新页面导致404的问题,提出了将请求转回index.html的解决方案。
32 1
本地运行打包好的React、Vue项目
|
1月前
|
前端开发 JavaScript 应用服务中间件
linux安装nginx和前端部署vue项目(实际测试react项目也可以)
本文是一篇详细的教程,介绍了如何在Linux系统上安装和配置nginx,以及如何将打包好的前端项目(如Vue或React)上传和部署到服务器上,包括了常见的错误处理方法。
362 0
linux安装nginx和前端部署vue项目(实际测试react项目也可以)
下一篇
无影云桌面