2024年前端最全React技术栈 --》搭建与实操 ## Day1，大佬推荐

最新推荐文章于 2024-06-17 23:49:16 发布

2401_84619245

最新推荐文章于 2024-06-17 23:49:16 发布

阅读量1k

点赞数 26

分类专栏：程序员文章标签：前端 react.js 前端框架

本文链接：https://blog.csdn.net/2401_84619245/article/details/138499396

版权

程序员专栏收录该内容

101 篇文章 0 订阅

订阅专栏

最后

中年危机是真实存在的，即便有技术傍身，还是难免对自己的生存能力产生质疑和焦虑，这些年职业发展，一直在寻求消除焦虑的依靠。

技术要深入到什么程度？
做久了技术总要转型管理？
我能做什么，我想做什么？
一技之长，就是深耕你的专业技能，你的专业技术。（重点）
独立做事，当你的一技之长达到一定深度的时候，需要开始思考如何独立做事。（创业）
拥有事业，选择一份使命，带领团队实现它。（创业）

一技之长分五个层次

栈内技术 - 是指你的前端专业领域技术
栈外技术 - 是指栈内技术的上下游，领域外的相关专业知识
工程经验 - 是建设专业技术体系的“解决方案”
带人做事 - 是对团队协作能力的要求
业界发声 - 工作经验总结对外分享，与他人交流

永远不要放弃一技之长，它值得你长期信仰持有。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

主要内容包括html，css，html5，css3，JavaScript，正则表达式，函数，BOM，DOM，jQuery，AJAX，vue 等等。

二、使用webpack进行项目搭建:

一、快速初始化项目:

二、创建目录结构:

三、使用cnpm安装webpack

一、安装过程中

二、安装过程中出现的一系列问题

四、注意点:

三、配置webpack进行实时打包编译

这里讲解一下可能出现的问题：

一、React介绍:

==========

一、前端三大主流框架的区别：

Angular.js:出来较早的前端框架，学习路线比较陡，NG1学习比较麻烦，从NG2开始，也支持TypeScript进行编程

Vue.js: 最火的前端框架，由中国人开发，对我们来说文档比较友好

React.js: 最流行的框架，设计优秀

二、React简介：

起源：React起源于Facebook的内部项目，因该公司对市场上所有的JavaScript MVC框架都不满意，就自己决定写一套，用来架设lnstagram的网站，做出来以后发现好用就在2013年5月开源。

特点：React设计思想独特，属于革命性创新，性能出众，代码逻辑非常简单，越来越多人开始关注使用，认为其可能是将来Web开发主流框架。

三、主要概念：

library(库)：提供特定的API，可以很方便的从一个库切换到另一个库，代码几乎不会改变。

Framework(框架)：提供一整套解决方案，想切换另外框架是比较困难的

四、组件化方面:

模块化：从代码角度来分析，将一些可复用的代码抽离为单个的模块，便于项目的维护和开发。

组件化：从UI界面角度来分析，将一些可复用的UI元素抽离为单独的组件，便于项目的维护和开发。

组件化的好处：随着项目规模的扩大，自己的组件越来越多，便能很方便的把现有的组件拼接成一个完整的页面。

Vue实现组件化的方式:

通过 .vue文件，来创建对应的组件

· template 结构

· script 行为

· style 样式

React实现组件化的方式:

React中有组件化的概念，但是没有想vue这样的组件模板文件，React中一切都以JS来表现，因此需要有JS、ES6、ES7基础

五、移动APP开发方面:

Vue结合Weex技术，提供迁移到移动端App的开发(Weex,目前只是一个小玩具，没有很大成功案例)

React结合ReactNative,提供无缝衔接到移动App的开发(RN用的最多，也是最火最流行的)

六、React中的几个核心概念:

虚拟DOM(Virtual Document Object Model):

DOM的本质：浏览器中的概念，用JS对象来表示页面上的元素，并提供了操作DOM对象的API.

虚拟DOM：是React框架中的概念，是程序员用JS对象来模拟页面上的DOM和DOM嵌套

虚拟DOM的目的：为了实现页面中，DOM元素的高效更新

如何实现实现页面上的按需更新?

1.获取内存中的新旧两颗DOM树进行对比，得到需要按需更新的DOM元素，因为浏览器中并没有直接提供获取DOM树的API，因此我们无法拿到浏览器内存中的DOM树，程序员需要手动模拟DOM树，程序员手动模拟的这俩颗DOM树就是React中的虚拟DOM的概念。

2.DOM树的概念：

一个网页的呈现过程：

1.浏览器请求服务器获取页面的HTML代码

2.浏览器要先在内存中解析DOM结构，并在浏览器内存中，渲染一颗DOM树

3.浏览器把DOM树呈现在页面上

3.手动模拟DOM元素过程


<div id="mydiv" title="名字" data-index="0">

    张小凡

    <p>你好</p>

</div>

var div = {

    tagName:'div',

    attrs:{

        id:'mydiv',

        title:'名字',

        'data-index':'0'

    },

    childrens:[

        '张小凡',

        {

            tagNmae:'p',

            attrs:{},

            childrens:[

                '你好'

            ]

        }

    ]

}

Diff算法：(different):

tree diff:新旧两颗DOM树，逐层对比的过程，即为Tree Diff;当整颗DOM逐层对比完毕，则所有需要被按需更新的元素必然能够找到。

component diff: 在进行Tree Diff的时候，每一层中，组件级别的对比，叫做Component Diff;如果对比前后，组件的类型相同，则暂时认为此组件不需要更新；如果对比前后，组件的类型不同，则需要移除旧组件，创建新组件，并追加到页面上；

element dif:在进行组件对比的时候，如果两个组件类型相同，则需要进行元素级别的对比

二、使用webpack进行项目搭建:

==================

一、快速初始化项目:

vscode新建终端运行：


npm init -y

得到一个package.json的配置文件，加载所有的包都会在该配置文件中记录

二、创建目录结构:

在项目根目录下创建src源代码目录和dist产品目录，并在src目录下创建index.html

三、使用cnpm安装webpack

一、安装过程中

当前文件目录下，新建终端运行：


cnpm i webpack -D

cnpm i webpack-cli -D

二、安装过程中出现的一系列问题

当安装完webpack后在终端输入webpack进行打包时出现

解决方法：

1.关闭vscode，并以管理员身份重启

2.在终端中输入：get-ExecutionPolicy，显示Restricted，表示状态是禁止的

3.再次输入：set-ExecutionPolicy RemoteSigned 有可能出现以下问题，赋上解决办法

4.根据报错提示再次输入：Set-ExecutionPolicy -Scope CurrentUser

5.提供参数值：remotesigned 显示成功限制解除

6.接下来我们输入webpack，突然出现以下情况，提示我们 mode缺少developm或production

7.新建一个webpack.config.js文件存放webpack需要的模块，里面代码如下：


// 向外暴露一个打包的配置对象 因为webpack是基于Node构建的；

//所以webpack支持所有的Node API和语法

module.exports = {

    mode:'development' //development production

}

8.终端输入webpack出现如下

模块没有找到？为啥呢。在webpack4.x+中有一个很大特性就是约定大于配置，默认打包的入口路劲是 src -> index.js。所以src下的js文件要修改index.js，如果修改别名就会报错。

9.修改之后，终端继续深入webpack，文件引入成功。

10.引入dist路劲下的main.js文件。查看index.html网站就会执行我们的js代码了，大功告成！！！

最后

在面试前我花了三个月时间刷了很多大厂面试题，最近做了一个整理并分类，主要内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

HTML5新特性，语义化
浏览器的标准模式和怪异模式
xhtml和html的区别
使用data-的好处
meta标签
canvas
HTML废弃的标签
IE6 bug，和一些定位写法
css js放置位置和原因
什么是渐进式渲染
html模板语言
meta viewport原理

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

2401_84619245

关注

26
点赞
踩
26

收藏

觉得还不错? 一键收藏
0
评论
2024年前端最全React技术栈 --》搭建与实操 ## Day1，大佬推荐

中年危机是真实存在的，即便有技术傍身，还是难免对自己的生存能力产生质疑和焦虑，这些年职业发展，一直在寻求消除焦虑的依靠。技术要深入到什么程度？做久了技术总要转型管理？我能做什么，我想做什么？一技之长，就是深耕你的专业技能，你的专业技术。（重点）独立做事，当你的一技之长达到一定深度的时候，需要开始思考如何独立做事。（创业）拥有事业，选择一份使命，带领团队实现它。（创业）一技之长分五个层次栈内技术 - 是指你的前端专业领域技术栈外技术 - 是指栈内技术的上下游，领域外的相关专业知识。
复制链接

扫一扫