一直念叨前端三大框架，React、Vue、Angular，可我实际中用的只有Vue，Angular在刚毕业那会儿用过点皮毛，基本上就是照葫芦画瓢，现在也忘得一干二净。React的大名早已久仰，也看过所谓的入门教程、快速上手教程，但是没有做过实际的项目，没有动手练习，都是白搭。今年，正好手上有个项目用的React全家桶，所以趁机重新学习一下React。接下来就是记录我学习React遇到的问题、踩过的坑。
对于现在市场上的产品选对框架也非常重要在很多TOC产品的开发中网站需要保证自身SEO可以考虑使用React的第三方框架Next.js
npx create-react-app my-app --template typescript
文章首发于@careteen/create-react-app，转载请注明来源即可。
在操作官方实例create-react-app时，需要执行指令： create-react-app my-app 来创建一个新的React应用。由于某原因,在拉取各种资源时,往往会巨慢。解决方案是换源,虽然平常使用cnpm来代替npm,但也只是使用新的指令而已，而在寻求create-react-app的相关配置希望修改registry时失败了，最后发现create-react-app指令默认调用npm，于是直接把npm的register给永久设置过来就好了，这样使用cnpm或者npm就没差别了。 npm c
为了快速地进行构建使用 React 的项目，FaceBook 官方发布了一个无需配置的、用于快速构建开发环境的脚手架工具 create-react-app。 create-react-app所创建的应用入口文件是src/index.js文件。 1、使用的原因以及特性： 无需配置； 集成了对 React, JSX, ES6 和 Flow 的支持； 集成了开发服务器； 配置好了浏览器热加载的功能； 在 JavaScript 中可以直接 import CSS 和图片； 自动处理 CSS 的兼容问题，无需添加 -w
阿特伍德定律，指的是any application that can be written in JavaScript, will eventually be written in JavaScript，意即“任何可以用JavaScript来写的应用，最终都将用JavaScript来写”在使用新技术的时候，切忌要一步一步的来，如果当你尝试把两门不熟悉的新技术一起结合使用，你很大概率会被按在地上摩擦，会yarn/npm和React脚手架等技术是前提，后面我会继续写PWA深入和Node.js集群负载均衡Ngi
CRA除了能帮我们构建出一个React的SPA项目(generator)，充当脚手架的作用。还能为我们在项目开发，编译时进行构建，充当builder的作用。可以看到生成的项目中的package.json包含很多命令：
React是当下前端生态圈流行的框架之一，与Vue和Angular并称前端三架马车。今天，我们就一起来学习下React，今天的主要内容有。
本文教你从0到1教你，如何使用 create-react-app 搭建scratch项目，实现简基础的积木编程与舞台渲染效果。Github项目usetools/scratch-example/v1.0.0。
在大型项目开发中，经常会遇到这样一个场景，QA 丢给你一个出问题的链接，但是你完全不知道这个页面 & 组件对应的文件位置。
Node即JavaScript开发环境，安装好之后就本地可以编写运行javascript脚本了。
今天遇到一个玄学的 bug，主要是因为引入了 pinyin 包，这个包其中的一行代码会导致 Webpack 默认使用的 Minifier 失效，从而导致编译失败。
现在的项目基本上都是前后端分离的，后端就先不提了。前端的框架也是层出不穷，使用最多的就是 angular、vue、react 。angular 是前几年用的比较多，最近好像用的人没那么多了。vue 是华人开发的项目，也是这三个框架里上手最简单的。react 是 fecebook 开源的框架，市场占有率也是最高的，国外的公司和国内的一些大公司用的比较多。
实例中我们引入了三个库： react.development.min.js 、react-dom.development.min.js 和 babel.min.js：
如今,对于现今前端热门的三大框架Vue,Angular,React,对于web开发者来说,早已不是什么陌生的词
create-react-app 是由 React 官方提供并推荐使用构建新的 React 单页面应用程序的最佳方式，不过目前版本(1.5.x)其构建的项目中默认是不支持动态样式语言 Less 的。如果我们的项目必须要使用 Less 呢，这就需要我们手动集成一下。本篇主要针对集成的过程做一个简要记录。
最近因工作需要，需要开发一个后台管理系统。考虑到开发效率和技术成熟度，决定使用 React 和 Ant Design 的技术栈。
本文由 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
使用 create-react-app 创建的 React TypeScript 项目，如何以 Module 的形式引入 css 呢？
前两天我准备用 create-react-app 创建一个新项目，然后我在命令行下执行
validate-npm-package-name这个包相信大家都不陌生，存在于大多数CLI脚手架类工具中被使用。比如在create-react-app[1]中。
以往启动一个Web项目，总要从一个现存的项目将gulpfile.js, package.json拷贝至新项目，然后根据需要修改这两个文件，确实挺麻烦的。今天在github上看到一个评分还比较高的项目create-react-app 。细细看了下它的文档，发现facebook通过这个项目将react的前端项目标准化了，约定大于配置，通过这个工具创建项目方便多了，这里记录一下以备忘。 创建项目 执行以下命令： #安装create-react-app命令 npm install -g create-react-a
笔者将介绍两种方式进行构建 React TS3 ( TypeScript3 简称，后面的内容都会以简称出现)，分别为使用 create-react-app 进行快速构建 和 手工方式构建。
在 src/index.js 中有如下代码，程序首先导入了 React 和 ReactDom 模块，并导入了一个当前目录下的 App 模块。随后在代码中使用 ReactDOM.render 将 App 模块渲染到了界面上。这个 App 在 React 中称为组件(component)。而这个组件渲染到什么位置则是第二个参数 document.getElementById(‘root’) 决定的，它从 index.html 中获取到了 root 节点，并将 App 插入到 root 节点下。
JSX是JavaScript XML的简写，表示了在Javascript代码中写XML(HTML)格式的代码
装饰器 decorator 是一种函数,是 Es6 的一个语法糖,是一种与类(class)相关的语法,用来注释或修改类和方法
我们先启用VSCode的调试模式，在项目下新建一个launch.json（注意我这里cra启动的端口是3001）：
最近两年测试界最火的测试工具莫过于Cypress，作为测试工程师弯道超车必备、下一代UI自动化测试利器，Cypress开发团队也一直在拼命做事，这不，Cypress10.x重磅发布，将“Component Testing”重磅引入到了测试团队。测试人员又可以将自己的势力版图向开发侧移动一下啦 ：）
这篇文章主要是总结一下我们在工作中如何为公司开发内部的第三方UI组件，并通过npm install的方式安装的一些步骤和思路。在学习完这套发布方法后大家也可以快速的发布自己的UI库到npm，供他人使用，就比如elementUI或者Ant Design。
create-react-app 是React 官方推荐的，默认支持的，无配置的项目构建工具之一。
2018 年我们写过一次 React 学习路线图（https://www.infoq.cn/article/AEkiVAiJf25LZmoUe_yc），两年过去了，又有哪些变化呢？
今天是学习react的第二周了，每天晚上差不多下班学习两个小时，虽说工作中用不到，但是技术学习肯定不嫌多。加油。
React是一个专注于View层解决方案的框架。于Angular，Vue不同，React并不是完整的MVC/MVVM框架，也不是单纯的模板引擎，它的核心思想就是“组件化”，将UI层拆分为一个个组件，然后组合嵌套，最后构建成完成的APP。
React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图，当数据改变时 React 能有效地更新并正确地渲染组件。
不管你是刚使用Reactjs或者是Reactjs的老司机，你们一定都听说过create-react-app这个脚手架，而从create-react-app的官方文档中，我们可以看到他们暂时还不支持直接导入LESS或者Sass。但是通过一些配置，我们还是可以从官方脚手架中使用sass/scss/less的。
仓库地址：https://github.com/xunge0613/react-multipage-app
在 Create React App 脚手架创建的项目中使用 CSS Modules 。
Create React App是FaceBook的React团队官方出的一个构建React单页面应用的脚手架工具。它本身集成了Webpack，并配置了一系列内置的loader和默认的npm的脚本，可以很轻松的实现零配置就可以快速开发React的应用。
React 中 CSS的规则都是全局的，任何一个组件的样式规则，都对整个页面有效，这可能会导致大量的冲突。也就是说如果我有两个css文件，它们的中的一些样式名是一样的，那么就会被覆盖，简单的解决办法就是将样式的命名变得复杂且不重复，但这样样式多了也很难避免重复，且命名也不会太好看。
之前写过一篇 create-react-app中CSS Module不生效的解决办法 ，但这个项目是自编码，需要 npm link 到主项目，所以就不能使用 CSS Module 写样式了。
本文主要写如何在 React 中引入 less 。因为 less 和 css 非常像，因此很容易学习。而且 less 仅对 css 语言增加了少许方便的扩展，这就是 less 如此易学的原因之一。
原文：https://auth0.com/blog/how-to-configure-create-react-app/#Test-Your-Custom-Script
一步一步去看react的文档实在是太累了，我要直接装脚手架了，一步到位，其余的基础的东西慢慢学习吧
如果你的系统还不支持 Node.js 及 NPM 可以参考我们的 Node.js 教程。
前提 *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文件为什么
想学源码，极力推荐之前我写的《学习源码整体架构系列》 包含jQuery、underscore、lodash、vuex、sentry、axios、redux、koa、vue-devtools、vuex4、koa-compose、vue-next-release、vue-this、create-vue、玩具vite等10余篇源码文章。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
