原文链接：https://devtails.xyz/how-to-replace-webpack-in-create-react-app-with-esbuild[1]
最近因工作需要，需要开发一个后台管理系统。考虑到开发效率和技术成熟度，决定使用 React 和 Ant Design 的技术栈。
本文教你从0到1教你，如何使用 create-react-app 搭建scratch项目，实现简基础的积木编程与舞台渲染效果。Github项目usetools/scratch-example/v1.0.0。
笔者将介绍两种方式进行构建 React TS3 ( TypeScript3 简称，后面的内容都会以简称出现)，分别为使用 create-react-app 进行快速构建 和 手工方式构建。
wepack4 出来已经有半年了，目前最新的 release 版本为 4.19.0。由于之前项目打包一直存在性能问题，所以我一直很关注 webpack 和其社区的发展。目前来说 webpack4 已经趋于稳定，很多关键的插件也都更新了对 webpack4 的支持；更为重要的是，webpack4 的官方文档（中英文）已经很完善了，因此现在不学习 webpack4，更待何时。根据 webpack 作者 Tobias Koppers 的说法，他们已经着手开始开发 webpack5 了。
Webpack模块联邦（Module Federation）是Webpack 5引入的一项革命性特性，它彻底改变了微前端架构的实现方式。模块联邦允许不同的Web应用程序（或微前端应用）在运行时动态共享代码，无需传统的打包或发布过程中的物理共享。这意味着每个微应用可以独立开发、构建和部署，同时还能轻松地共享组件、库甚至是业务逻辑。
如果你的系统还不支持 Node.js 及 NPM 可以参考我们的 Node.js 教程。
这条命令会临时安装 create-react-app 包，命令完成后 create-react-app 会删掉，不会出现在 global 中。下次再执行，还是会重新临时安装。
“ 关注 前端开发社区 ，回复"1"即可加入 前端技术交流群，回复 "2"即可免费领取 500G前端干货！
在每个项目的根目录下面，一般都会有一个 package.json 文件，其定义了运行项目所需要的各种依赖和项目的配置信息（如名称、版本、许可证等元数据）。
注意：在webpack.config.dev.js添加的配置部分，也需要在webpack.config.prod.js中做相同的配置。否则可能导致项目发布上线后，报错无法执行。
React是一个专注于View层解决方案的框架。于Angular，Vue不同，React并不是完整的MVC/MVVM框架，也不是单纯的模板引擎，它的核心思想就是“组件化”，将UI层拆分为一个个组件，然后组合嵌套，最后构建成完成的APP。
antd是基于less开发的，我们使用less可以方便的改变主题色等配置。
零、前言 关于React不做自我介绍了。 create-react-app 快速搭建React环境，自带热加载，服务器。 电脑与手机在同一wifi下可以通过ip访问项目，实现手机电脑同时预览
在很久之前，模块化管理还没有出现，如果我们开发一个页面想要引入一些依赖的话，最常见的做法就是将依赖文件引入到.html文件中。比如，我们要使用JS的一些依赖库，就要在.html文件中使用<script>标签引用；要引用CSS的依赖就要使用<link>标签。如果页面中引入的依赖文件太多，那么向服务发送的请求也随之增多，势必会拖慢网页的加载速度，影响用户体验。另外，网页的内容也会变得很臃肿，增加维护的难度。
现在的项目基本上都是前后端分离的，后端就先不提了。前端的框架也是层出不穷，使用最多的就是 angular、vue、react 。angular 是前几年用的比较多，最近好像用的人没那么多了。vue 是华人开发的项目，也是这三个框架里上手最简单的。react 是 fecebook 开源的框架，市场占有率也是最高的，国外的公司和国内的一些大公司用的比较多。
这期来关注一下CodeSandbox, 这是一个浏览器端的沙盒运行环境，支持多种流行的构建模板，例如 create-react-app、 vue-cli、parcel等等。 可以用于快速原型开发、DEMO 展示、Bug 还原等等.
有时候我们会有在需要在网页中写代码或者改代码配置的需求，这个时候就需要用到代码编辑器，常规的代码编辑器有 CodeMirror 和 Monaco Editor， CodeMirror 使用的人比较多，主要因为比较轻量，核心文件压缩后仅 70+ KB，根据所需要支持的语言按需打包，目前 CodeMirror 6 已经完全重构。它支持触摸屏并且极大地提高了库的可访问性。
React是FaceBook（脸书）公司研发的一款JS框架（MVC） React是一款框架：具备自己开发的独立思想(MVC：Model View Controller) -> 划分组件开发 -> 基于路由的SPA单页面开发 -> 基于ES6来编写代码(最后部署上线的时候，我们需要把ES6编译成ES5 =>基于Babel来完成编译) -> 可能用到Less/Sass等，我们也需要使用对应的插件把他们进行预编译 -> 最后为了优化性能（减少HTTP请求次数），我们需要把JS或者CSS进行合并压缩 -> webpack来完成以上页面组件合并、JS/CSS编译加合并等工作
文章首发于@careteen/create-react-app，转载请注明来源即可。
前不久写了一篇关于react脚手架（create-react-app）配置antd中css按需加载的踩坑记录，文章内容有误，原文如下react脚手架（create-react-app）配置antd中css按需加载的坑。
React 脚手架（React boilerplate）是一种预先设置好的、可以快速启动 React 项目的工具。脚手架已经包含了 React、Webpack、Babel、ESLint、Jest 等一些常用的工具和库，并已经配置好了这些工具的参数，可以直接使用和自定义修改。使用 React 脚手架可以大大加快项目的启动和开发，同时也可以帮助团队建立统一的项目结构和代码规范。常用的 React 脚手架包括 Create React App、Next.js、Gatsby 等。
Node安装后自带npm模块，可以直接使用npx命令。如果不能使用用，就要手动安装一下。
引子 学生时代为了掌握某个知识点会不断地做习题，做总结，步入岗位之后何尝不是一样呢？做业务就如同做习题，如果‘课后’适当地进行总结，必然更快地提升自己的水平。 由于公司采用的react+node的技术栈，于是就完成了一个reactSPA小项目，计划日后把平时工作中遇到的业务以及学习中遇到有趣的东西给抽象成demo展示出来。目前该项目只是把雏形搭好，效果如下。在此文的基础上，写了篇新文章使用React全家桶搭建一个后台管理系统,欢迎围观。(附注：因为项目不时更新，文章不一定会即时更新，所以以实际的项目为准)
React是当前前端应用最广泛的框架。三大SPA框架 Angular、React、Vue比较。
github: https://github.com/callemall/material-ui
这是一个新开的’实验性’文章系列，如其名‘技术地图’，这个系列计划剖析一些前端开源项目，可能会探讨这些项目的设计和组织、整理他们使用到技术栈。 首先拿vue-cli小试牛刀，再决定后续要不要继续这个系列.
今天是学习react的第二周了，每天晚上差不多下班学习两个小时，虽说工作中用不到，但是技术学习肯定不嫌多。加油。
Create React App是FaceBook的React团队官方出的一个构建React单页面应用的脚手架工具。它本身集成了Webpack，并配置了一系列内置的loader和默认的npm的脚本，可以很轻松的实现零配置就可以快速开发React的应用。
说起前端框架，我的第一反应就是Angular，Vue和React了，在实习的时候Vue和Angular都使用过，也写过相关的博客，包括自己毕业设计就是Angular来做的，但是毕业之后，在现在家公司就没有机会去使用这些框架(实际上我对于Java更加感兴趣)，所以现在对于前端框架的了解可能只是知道一些名词了。这次由于公司产品新的版本用的是React框架，所以有了学React的想法(当然只是想简单的学一些，够用就行了)
💡 概念： npm，全称为Node Package Manager，是随Node.js一起分发的开源包管理系统，也是JavaScript生态中最流行的依赖管理工具。它不仅为Node.js项目提供便捷的包管理服务，还广泛应用于前端、后端甚至跨平台开发领域。
如今,对于现今前端热门的三大框架Vue,Angular,React,对于web开发者来说,早已不是什么陌生的词
Monaco Editor 是 VS Code 中使用的开源代码编辑器， 拥有代码高亮和代码自动补全的功能，Monaco Editor 支持的语言有很多，所以使用的时候不需要将全部语言都支持，我们只需要按需加载需要支持的语言就可以了，过官网的例子我们知道 Monaco Editor 有 2 种加载方式，分别是 amd 和 esm，也就是 Requirejs 和 ES Modules。
2017 是一个前端 Web 开发年。 像 React 和 Angular 这样的框架，继续在社区中享有大规模的支持，但是，新的候选者 Vue ，人气也很旺。Webpack 依旧是构建的首选工具，NPM 仍旧是系统选择包的工具。WebAssembly 以前所未有的速度向 Web 开放了众多新的和令人兴奋的案例。像 GraphQL 等技术，革新了书写和在 web 应用中使用 API 的方式。 于此同时，语言自身也在改进，ECMAScript 标准的 2017 版本增加了异步功能，这大大提高了开发者写异步代码
1. 使用React脚手架创建一个React应用 1). react脚手架 1. xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目 * 包含了所有需要的配置 * 指定好了所有的依赖 * 可以直接安装/编译/运行一个简单效果 2. react提供了一个专门用于创建react项目的脚手架库: create-react-app 3. 项目的整体技术架构为: react + webpack + es6 + babel + eslint 2). 创建项目并启动 npm install -g
CRA除了能帮我们构建出一个React的SPA项目(generator)，充当脚手架的作用。还能为我们在项目开发，编译时进行构建，充当builder的作用。可以看到生成的项目中的package.json包含很多命令：
React不是完全开箱即用的。它使用了一些最近node才支持的关键字和语法（在本教程中我使用了v 9.3.0版本）。因此需要一些很麻烦的设置，但是Facebook为此提供了一个可以轻松创建React应用的方案。这听起来不错，那我为什么要说这一点呢？
首先，我们第一个是想到的是 react 官方团队提供的脚手架工具 Create React App(cra)
想学源码，极力推荐之前我写的《学习源码整体架构系列》 包含jQuery、underscore、lodash、vuex、sentry、axios、redux、koa、vue-devtools、vuex4、koa-compose、vue-next-release、vue-this、create-vue、玩具vite等10余篇源码文章。
create-react-app 是由 React 官方提供并推荐使用构建新的 React 单页面应用程序的最佳方式，不过目前版本(1.5.x)其构建的项目中默认是不支持动态样式语言 Less 的。如果我们的项目必须要使用 Less 呢，这就需要我们手动集成一下。本篇主要针对集成的过程做一个简要记录。
大家好，在本系列的前三篇文章里，我们一起学习了在 React 中经常会用到的 ES6 新特性，以及 REACT 16+ 版本的一些新特性和团队成员在 Winwow 和 MAC 环境下混合开发时需要注意的一些问题，从本篇文章起，我们将正式开始从最基础的内容开始学习React，今天我们将从创建第一个 React 组件开始学起。
进阶玩法是什么内容呢？其实就是『Ant Design』的主题定制，那么什么是主题定制呢？简单来说就是我们可以通过修改『Ant Design』的样式变量来定制我们自己的主题，这样就可以让我们的项目看起来更加炫酷，更加符合我们的审美。
之前翻译过一篇 前端工程化发展历史 的文章，Webpack、Babel 、Eslint 现在基本上就是前端项目的标配了。
大家好，在本系列的前三篇文章里，我们一起学习了在 React 中经常会用到的 ES6 新特性，以及 REACT 16+ 版本的一些新特性 和 团队 成员在 Winwow 和 MAC 环境下混合开发时需要注意的一些问题，从本篇文章起，我们将正式开始从最基础的内容开始学习React，今天我们将从创建第一个 React 组件开始学起。
大家好，我是柒八九。从今天起，我们又双叒叕yòu shuāng ruò zhuó， 开辟了一个新的领域：「前端工程化」。可能大家对这个词，比较陌生，但是如果把这个问题具象化，那就会感觉到倍感亲切。我简单罗列几个概念和技术
本文由 IMWeb 社区 imweb.io 授权转载自腾讯内部 KM 论坛，原作者：kingfo。点击阅读原文查看 IMWeb 社区更多精彩文章。 create-react-app是一个react的cli脚手架+构建器，我们可以基于CRA零配置直接上手开发一个react的SPA应用。通过3种方式快速创建一个React SPA应用: npm init with initializer (npm 6.1+) npx with generator (npm 5.2+) yarn create with initi
对 spm 历史不感兴趣的同学可以直接从 ant tool 段落读起 下文说说我理解的支付宝前端构建工具发展史，从 spm 到 ant tool，再到未来我们可能会走的路。 spm1 spm2 在谈及 spm1 spm2 时，我们不得不回过头去看当时的历史背景，时间大概是 2012 年左右，当时前端模块化非常火热，伴随模块化的浪潮，模块加载器就不约而同成成为不得不做的命题。所以那会儿出现了 seajs 等一系列的模块加载器。所以起初 spm 的定位是 sea.js 配套的打包工具。但是新的问题又来了，模块化
create-react-app 是React 官方推荐的，默认支持的，无配置的项目构建工具之一。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频
