原文链接：https://devtails.xyz/how-to-replace-webpack-in-create-react-app-with-esbuild[1]
2018 年我们写过一次 React 学习路线图（https://www.infoq.cn/article/AEkiVAiJf25LZmoUe_yc），两年过去了，又有哪些变化呢？
issues 详情：https://github.com/facebook/create-react-app/issues/9882
create-react-app 是由 React 官方提供并推荐使用构建新的 React 单页面应用程序的最佳方式，不过目前版本(1.5.x)其构建的项目中默认是不支持动态样式语言 Less 的。如果我们的项目必须要使用 Less 呢，这就需要我们手动集成一下。本篇主要针对集成的过程做一个简要记录。
React是FaceBook（脸书）公司研发的一款JS框架（MVC） React是一款框架：具备自己开发的独立思想(MVC：Model View Controller) -> 划分组件开发 -> 基于路由的SPA单页面开发 -> 基于ES6来编写代码(最后部署上线的时候，我们需要把ES6编译成ES5 =>基于Babel来完成编译) -> 可能用到Less/Sass等，我们也需要使用对应的插件把他们进行预编译 -> 最后为了优化性能（减少HTTP请求次数），我们需要把JS或者CSS进行合并压缩 -> webpack来完成以上页面组件合并、JS/CSS编译加合并等工作
点击链接查看图文教程 https://blog.csdn.net/qq_45677671/article/details/114535955
前不久写了一篇关于react脚手架（create-react-app）配置antd中css按需加载的踩坑记录，文章内容有误，原文如下react脚手架（create-react-app）配置antd中css按需加载的坑。
npm start启动开发环境，npm run build创建生产环境优化代码，npm test用于测试单元，npm run eject把潜藏在react-scripts中的一序列技术栈“弹射”到 应用的顶端，此命令不可逆且会改变和增加一些文件。
github: https://github.com/callemall/material-ui
React 是目前为止最受欢迎的 JavaScript 框架之一，而且我相信它也是目前最好用的开发工具之一。
版本v16之后，对其底层的核心算法进行了重构，引入了底层的新引擎React Fiber（16版本以后的react）
在日常使用github中，除了利用git进行项目版本控制之外，最多的用处就是游览各式的项目，在看到一些有趣或者有用的项目之后，我们通常就会顺手star，目的是日后再看。但是当我们star了许多项目之后，回过头想找一个的项目就会发现，很难在短时间内找到它，官方也并没有提供很好的管理我们的star项目的功能，因此在市面上也出现了一些对star进行管理的工具，比如说 astralapp，Star Order等等，其实github的接口api都是开放的，我们完全可以自己构建一个属于自己的项目管理工具。公司的前端技术栈是React，而笔者之前使用的是Vue，因此正好想利用github的open api 自己构建个react的github star管理项目来加深react的使用。而大体功能我们就模仿astralapp。
本文主要写如何在 React 中引入 less 。因为 less 和 css 非常像，因此很容易学习。而且 less 仅对 css 语言增加了少许方便的扩展，这就是 less 如此易学的原因之一。
在 Create React App 脚手架创建的项目中使用 CSS Modules 。
原文：https://auth0.com/blog/how-to-configure-create-react-app/#Test-Your-Custom-Script
You can now view hello-react-demo in the browser.
最近全权负责了一个前后端分离的web项目，前端使用create-react-app[1], 后端使用golang做的api服务。
作为《深入浅出react和redux》的读书笔记，文章将重点关注自身未去深入理解的问题。
React 已经具备了在 Nod e服务器上处理渲染的能力。有一个特殊版本的 DOM 渲染器，它与客户端的模式相同。
首先，我们第一个是想到的是 react 官方团队提供的脚手架工具 Create React App(cra)
首先为什么想到自己实现一个React脚手架呢？是因为之前刚接触create-react-app时，觉得不太灵活。虽然文件目录很清晰，但是还是觉得不如VueCLI的可以自定义配置更加灵活。当然React官方提供了可以暴露配置的命令npm run eject，说再多不如自己实现一个。
在很久之前，模块化管理还没有出现，如果我们开发一个页面想要引入一些依赖的话，最常见的做法就是将依赖文件引入到.html文件中。比如，我们要使用JS的一些依赖库，就要在.html文件中使用<script>标签引用；要引用CSS的依赖就要使用<link>标签。如果页面中引入的依赖文件太多，那么向服务发送的请求也随之增多，势必会拖慢网页的加载速度，影响用户体验。另外，网页的内容也会变得很臃肿，增加维护的难度。
为了快速地进行构建使用 React 的项目，FaceBook 官方发布了一个无需配置的、用于快速构建开发环境的脚手架工具 create-react-app。 create-react-app所创建的应用入口文件是src/index.js文件。 1、使用的原因以及特性： 无需配置； 集成了对 React, JSX, ES6 和 Flow 的支持； 集成了开发服务器； 配置好了浏览器热加载的功能； 在 JavaScript 中可以直接 import CSS 和图片； 自动处理 CSS 的兼容问题，无需添加 -w
OK，预览下效果，顺便调试（没啥可调试的/(ㄒoㄒ)/~~）。npm start。效果如下：
当翻阅很多的 React 教程时，在前言或者建议中会提醒你在想要去接触 React 之前，你应该会些啥？笼统的讲就是你应该有一定的 Web 开发基础，即你要认识什么是 HTML5 (Hyper Text Markup Language 5）、 CSS （Cascading Style Sheet）以及 JavaScript 。有了这两样东西你完全就可以写出一些网页了，比如一个简单的登录页面、一个表格展示页面又或者一个表单页面……当你具备了一定的审美和逻辑之后，这些静态的网页便可以信手捏来了（不知道这个词是不是这么用的），如果你不满足于此，想要一个既美观又炫酷的网页，那可能就需要一些 JS （JavaScript）了。而本系列的就在于解决这个问题以及怎么才能更提高效率，通过较为清晰简单的代码逻辑实现很多的功能。
装饰器 decorator 是一种函数,是 Es6 的一个语法糖,是一种与类(class)相关的语法,用来注释或修改类和方法
npx create-react-app xxx 创建项目时会创建.gitnore配置文件，当仓库中代码有更改未提交，会导致 npx run eject失败
本教程非常适合那些想要扩展技能并为他们的网站添加一项备受追捧的新功能的人。准备好尝试暗黑模式了吗？让我们开始吧！
文章链接：https://bobbyhadz.com/blog/react-create-react-app-typescript[1]
笔者将介绍两种方式进行构建 React TS3 ( TypeScript3 简称，后面的内容都会以简称出现)，分别为使用 create-react-app 进行快速构建 和 手工方式构建。
Webhook，也就是人们常说的钩子，是一个很有用的工具。你可以通过定制 Webhook 来监测你在 Github.com 上的各种事件，最常见的莫过于 push 事件。如果你设置了一个监测 push 事件的 Webhook，那么每当你的这个项目有了任何提交，这个 Webhook 都会被触发，这时 Github 就会发送一个 HTTP POST 请求到你配置好的地址。
Mobx是Redux之后的一个状态管理库，基于响应式状态管理，整体是一个观察者模式的架构，存储state的store是被观察者，使用store的组件是观察者。Mobx可以有多个store对象，store使用的state也是可以变对象，这些都是与Redux的不同点，相比较于Redux，Mobx更轻量，也更受开发者的青睐。
注意：在webpack.config.dev.js添加的配置部分，也需要在webpack.config.prod.js中做相同的配置。否则可能导致项目发布上线后，报错无法执行。
最近做了一个需求，后台管理系统添加一个可以动态修改ant-design主题色。查询了大多数的文章，发现基本都是抄来抄去，而且文章记录的也一点也不详细。刚刚把这个功能做完了，顺便记录一下如何去修改主题色。主要使用到的包是antd-theme-generator。使用起来非常方便，而且在热更新时，不会出现 js 内存爆栈现象。
Create React App是FaceBook的React团队官方出的一个构建React单页面应用的脚手架工具。它本身集成了Webpack，并配置了一系列内置的loader和默认的npm的脚本，可以很轻松的实现零配置就可以快速开发React的应用。
在 src/index.js 中有如下代码，程序首先导入了 React 和 ReactDom 模块，并导入了一个当前目录下的 App 模块。随后在代码中使用 ReactDOM.render 将 App 模块渲染到了界面上。这个 App 在 React 中称为组件(component)。而这个组件渲染到什么位置则是第二个参数 document.getElementById(‘root’) 决定的，它从 index.html 中获取到了 root 节点，并将 App 插入到 root 节点下。
antd是基于less开发的，我们使用less可以方便的改变主题色等配置。
React是一个专注于View层解决方案的框架。于Angular，Vue不同，React并不是完整的MVC/MVVM框架，也不是单纯的模板引擎，它的核心思想就是“组件化”，将UI层拆分为一个个组件，然后组合嵌套，最后构建成完成的APP。
前提 *create-react-app 创建的项目 通过 eject 命令暴露出react 全部配置 安装配置 postcss-pxtorem npm i postcss-pxtorem -D 添加rem转换插件 webpack.config.js //104行 require('postcss-pxtorem')({ rootValue : 100, selectorBlackList : [], //过滤 propList : ['*'], }) 排错 使用less css文件为什么
在我们最近的工作中，构建网站使用的架构是带有 Django REST Framework（DRF）后端的 React 前端。它们是通过在前端使用 axios（前端库）调用后端 API 来交互的。我们还使用了 Redux（前端库）来存储全局的应用程序状态（存在浏览器端）。这是我们首选，因为它允许前后端完全分离。只要我们提前定义好请求的资源列表（后面单个都简称：endpoint）和返回的数据格式，前端和后端就可以并行的进行开发。这也使我们可以轻松的为未来的任何项目创建移动端 App，因为它们仍然可以复用后端 A
React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图，当数据改变时 React 能有效地更新并正确地渲染组件。
最近在写react的时候碰到了一个小问题：现在css样式我通过下图这样的方式直接引进来的时候，发现会和其他组件里面相同className的会有冲突的现象。正常来说吧，是可以通过不同的组件在className前面加上不同组件的标识做区分的，但是这样感觉不舒服。写习惯了vue的，发现vue里面是可以加scoped将样式私有化，那react应该也会有类似的解决方案吧。
wepack4 出来已经有半年了，目前最新的 release 版本为 4.19.0。由于之前项目打包一直存在性能问题，所以我一直很关注 webpack 和其社区的发展。目前来说 webpack4 已经趋于稳定，很多关键的插件也都更新了对 webpack4 的支持；更为重要的是，webpack4 的官方文档（中英文）已经很完善了，因此现在不学习 webpack4，更待何时。根据 webpack 作者 Tobias Koppers 的说法，他们已经着手开始开发 webpack5 了。
在刚开始学习react时，基本上是通过手动来搭建项目的整个框架结构，包括webpack的配置文件，各种插件的安装及配置，如果每次构建项目都这么做，那么会浪费掉很长的一段时间。所以希望有一个类似于vue-cli的脚手架来快速构建项目，并上手开发。Facebook官方针对于这一情况发布了一个脚手架：creat-react-app。通过这个脚手架我们可以快速的完成一个项目的搭建。
我们先启用VSCode的调试模式，在项目下新建一个launch.json（注意我这里cra启动的端口是3001）：
仓库地址：https://github.com/xunge0613/react-multipage-app
领取专属 10元无门槛券
手把手带您无忧上云
