在项目文件目录下，使用命令行 npm install react --save 或 npm i react --save
文件顺序必须是核心库文件在react-dom文件之前引入，babel.js是用来将jsx解析成js
# 🎄一、hello_react 案例 我们先从最基础的入门，就像写 jQuery 一样直接引入写入 需要的依赖包 babel.js 用于 jsx 转 js react.development.js react 核心库 react-dom-devlopment.js react 扩展库，帮助我们操作 Dom 的 # 🍇二、第一个 react <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http
直接上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <script src="https://unpkg.com/react@16/umd/react.development.js"></s
本文介绍了一种用于快速转换 ES6 到 ES5 的轻量级工具 smart-transform。smart-transform 使用基于 babel 的编译器，可以快速将 ES6 代码转换成 ES5 兼容的代码。该工具在 Atom 编辑器中实现了快速转换的功能，同时也提供了一个命令行工具，方便用户使用。通过配置文件，用户可以自定义转换的规则和输出目录。smart-transform 还支持压缩和混淆，以减小文件大小，提高代码的可维护性。
1) 遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析
Node 自带 npm 模块，所以可以直接使用 npx 命令，万一不能用，就要手动安装一下
react是前端三大开发框架之一，是一套UI引擎，是DOM的抽象层，并不是web应用的完整解决方案。它遵循组件设计模式、声明式编程范式和函数式编程的概念，使用虚拟DOM有效的操作DOM，并且遵循从高阶组件到低阶组件的单向数据流，从而使前端应用程序达到高效。
当调用this.setState()的时候，自动触发render()方法，更新页面。
洛伊安妮·格罗纳女士所著的《学习JavaScript数据结构与算法》第三版于2019年的5月份再次刊印发行，新版内容契合当下，实为JavaScript开发人员的必备之佳作。有幸重读此版，与诸君分享共勉。
对于使用Javascript的每个人来说，可选链(Optional chaining)是游戏的规则的改变者。它与箭头函数或let和const一样重要。我们讨论下它可以解决什么问题，它如何工作，以及它如何使得你的生活更加轻松。
度优先遍历：对每一个可能的分支路径深入到不能再深入为止，而且每个结点只能访问一次。不全部保留结点，占用空间少；有回溯操作(即有入栈、出栈操作)，运行速度慢
JavaScript语言不同于其他的类C语言，没有提供类的概念，但是可以提供类似的语法糖来实现JS面向对象的编程范式，本质上不是严格意义上的类
React 首次被提出是在2014年的 F8 大会上，当期的主题为 “Rethinking Web App Development at Facebook”，这也是 React 名字的由来。
实例中我们引入了三个库： react.development.min.js 、react-dom.development.min.js 和 babel.min.js：
单元测试的技术方案很多，不同工具之间有互相协同，也存在功能重合，给我们搭配测试方案带来不小的困难，而且随着 ES6, TypeScript 的出现，单元测试又增加了很多其他步骤，完整配置起来往往需要很大的时间成本。我希望通过对这些工具的各自作用的掌握，了解完整的前端测试技术方案。前端单元测试的领域也很多，这里主要讲对于前端组件如何进行单元测试，最后会主要介绍下对于 React 组件的一些测试方法总结。
React 的基础之：JSX 语法 react 使用 JSX 语法，js 代码中可以写 HTML 代码。 let myTitle = Hello, World!; JSX 语法解释： (1) JSX 语法的最外层，只能有一个节点： //错误 let myTitle = HelloWorld (2) JSX 语法中可以插入 JavaScript 代码，使用大括号。 let myTitle = {'Hello' + 'World'} Babel
Hello
World
{'Hello' + 'World'}
阅读统计和访客统计使用的都是不蒜子，因为使用的是NexT主题，只需要添加一下配置就可以了。
https://github.com/luoxue-victor/learn_webpack/
更多内容请见原文，原文转载自：https://blog.csdn.net/weixin_44519496/article/details/119882555
当我刚开始学习JavaScript的时候，我就听说了React，但我承认看了它一眼，它吓到我了。我看到了看起来一堆HTML和CSS的混合思想，这不是我们一直努力避免的事情吗？React有什么了不起的？
React 是一个用于构建用户界面的 JAVASCRIPT 库。 React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。 React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。 React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。
若对虚拟DOM想进一步了解，可查看另一篇文章《浅析虚拟DOM》 点击查看《浅析虚拟DOM》
抽象语法树（Abstract Syntax Tree，AST），是源代码（不仅限于JavaScript，同时还应用于其他语言，例如: Python，Rust等）语法结构的⼀种抽象表示。它以树状的形式表现编程语⾔的语法结构，树上的每个节点都表示源代码中的⼀种结构。 AST 运⽤⼴泛，⽐如：
1、找个android真机测试下（机型版本为4.4以上），真机联调测试（如果不知道怎么联调，那么请看这里：Android真机 - 联调chrome调试）
抽象语法树（Abstract Syntax Tree，AST），是源代码（不仅限于JavaScript，同时还应用于其他语言，例如: Python，Rust等）语法结构的⼀种抽象表示。它以树状的形式表现编程语⾔的语法结构，树上的每个节点都表示源代码中的⼀种结构。
昨天就在看这方面内容，不过没有吃透。ES6中出现了class关键字声明一个类，也可以通过extends去继承一个类，越来越像它的名字了。
申请ssl证书(https://freessl.org) => 正常企业还是使用收费ssh(http协议默认运行在80端口,https默认运行在443端口)
最近在学习 vue-cli[1] 的源码，获益良多。为了让自己理解得更加深刻，我决定模仿它造一个轮子，争取尽可能多的实现原有的功能。
之前我们大多都是用Vue-Cli来创建项目，但是Vue-Cli已经停止更新了，并且Vue-Cli相当于一堆插件的集合体，我们想替换以下，或者想根据我们的项目优化以下，提升编译的性能，这时候可以自己用Webpack来配置项目。
产品生命周期就是其中的一个概念，它可用于多个不同的环境，用以了解和预测产品的行为。这是一个商业概念，能够帮助我们了解产品在其生命中经历的阶段，并解释这些阶段对其受欢迎程度的影响 —— 在大多数情况下以销售情况来体现。可以通过观察市场行为模式评估产品当前所在的阶段，从而对其受欢迎的程度做出一些预测。
虽然 Babel 团队在各种哭穷，但是 Babel 始终是我们前端在开发中不可或缺的重要工具。 虽然我们只是 API 调用工，但是多了解一些总是会有好处的嘛 ☄️☄️☄️
Vue-Cli脚手架会有webpack的很多默认行为，因此我们得知道基于Vue-Cli的项目，当前的webpack都配置了啥，然后才能做针对性的分析与优化。
Webpack构建速度优化基本优化完毕，接下来考虑的就是：线上代码质量的优化，即如何使用webpack构建出高质量的代码 Webpack构建流程：初始化配置参数 -> 绑定事件钩子回调 -> 确定Entry逐一遍历 -> 使用loader编译文件 -> 输出文件 提纲 本次优化构建代码质量基本技术： reactRouter按需加载； 公共代码提取，以及代码压缩； CDN接入； 开启gzip压缩； 接入treeShaking，剔除无用代码 开启Scope Hoisting （生产环境代码构建）为实时查看
之前比较多的处理方式是npm包形式抽离和引用，比如多个应用项目之间，可能有某业务逻辑模块或者其他是可复用的，便抽离出来以npm包的形式进行管理和使用。但这样却带来了以下几个问题：
React中文官网 一、简介 1、特点 1)Declarative(声明式编码) 2)Component-Based(组件化编码) 3)Learn Once, Write Anywhere(支持客户端与服务器渲染) 4)高效 5)单向数据流 2、React高效的原因 1)虚拟(virtual)DOM, 不总是直接操作DOM 2)DOM Diff算法, 最小化页面重绘 3、相关的js核心库 1)react.js: React的核心库 2)react-dom.js: 提供操作DOM的react扩展库 3)bab
升级版的mint-ui，基于vue.js,可自己拓展组件。 Installation 推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。 “ npm i mint-ui -S # for Vue 1.x npm i mint-ui@1 -S Usage Import all components. “ import Vue from 'vue' import Mint from 'mint-ui'; Vue.use(Mint); Or import specified comp
此文章是本人在学习React过程中总结起来的一些小经验，因自己在网络上找到的React的教程很多都是一上来就是构建复杂的React环境，Webpack，ES2015等技术的使用，让其简洁的React变得复杂化。本文只为分享简洁的学习过程，让大家理解React，当然其中的不足之处，还望大家指出，谢谢。
将 react 和 webpack4 进行结合，集 webpack 的优势于一身，从 0 开始构建一个强大的 react 开发环境。
实现步骤： A.生成打包报告，根据报告优化项目 B.第三方库启用CDN C.Element-UI组件按需加载 D.路由懒加载 E.首页内容定制
在vue-cli3中已经将webpack等详细配置（config）去除，我们配置webpack只能在vue.config.js里进行配置，这里我个人总结了一套webpack的优化方案模板并且附有我个人的讲解（尚在研究中）。 总体优化这几个方面：
来到这家公司之后，一直在使用webpack，也写了不少笔记，但是都比较零散，现在决定整理一下webpack相关的知识点，由浅入深，方便自己后续查漏补缺，后续会一直更新。
React将JSX这一概念深入人心。但，并非只有React利用了JSX，VUE、SolidJS等JS库或者框架都使用了JSX这一概念。网上已经有大量关于JSX的概念与形式的讲述文章，不在本文的讨论范围。
以下配置是在webpack 4.41.6+测试 可用于生产环境： babel-loader缓存优化 ignoreplugin noparse happyPack ParallelUglifyPlugin 不可用于生产环境的： 自动刷新 热更新 DllPlugin babel-loader的缓存优化 module: { rules: [ { test: /\.js$/, loader: 'babel-
组件标签：以大写字母开头，如 使用组件的不变步骤： 1、定义组件 方式1：工厂函数组件（一种简单组件：没有状态的组件）
当我们的项目越来越大，webpack的配置项越来越多时，构建速度会越来越慢，所以我们需要通过一些配置来提高webpack的构建速度。
1.3 对于一些插件，如果只是在个别组件中用的到，也可以不要在 main.js 里面引入，而是在组件中按需引入
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM
