Create React App

前言 　　其实我的react的实战经验很少，大概是17年-18年写了一个react全家桶的后台管理系统。猜测这个项目应该还一直在使用 　　在我手里的vue项目就比较多了，技术栈一直是vue全家桶。最近也在深入的了解vue的原理。撸一遍vue源码。尤大大正在vue3.0 　　听说也是大改的，函数式编程，从长远的角度来看。还是利大于弊的。react比较短板，所以想利用工作之余写几个实战项目，react非常强悍 　　希望后面也可以写更多的大型的react项目，深入了解前端，自己的能力也可以提升到一个台阶。 第一步，如何开始react呢 有过vue开发的前端，都熟悉 vue-cli 脚手架这个东西。脚手架就是用来快速搭建单页面项目的，说白了就是一个基本项目框架 那react，也是对应的脚手架的。 create-react-app 这里放出官网相对应的链接： https://zh-hans.reactjs.org/docs/create-a-new-react-app.html#create-react-app 开始动手吧 ！ 在本地新建一个文件夹，然后打开命令行 运行代码 ：npx create-react-app my-app 注释：第一行的 npx 不是拼写错误 —— 它是 npm 5.2+ 附带的 package 运行工具 。 运行完之后，长这样子的 运行 cd my-app 运行

搭建项目脚手架工程 是 架构师必需必会的基础技能 。 在脚手架的帮助下，我们只需要跑一个命令就可以生成一个项目，不需要再思考项目的目录结构，单元测试，所需要的依赖等繁琐的事情。 虽然脚手架一般只用于前端工作流中项目的起始阶段，而且由于“用后即弃”的性质，并不被前端工程化领域所重视。但 随着前端工程体系越来越复杂，脚手架的重要性却在逐渐突出。 引用 《前端工程化：体系设计与实践》 书里的一段话：“前端工程体系的功能涵盖范围广，封装的方案类型多，对应的配置项也非常复杂。对于多数业务开发者来说，他们不需要了解其中的复杂原理，只需要知道如何配置即可。” 这就要求脚手架能够快速开发快速配置，将非必要的工程化体系的技术细节封装到一个黑盒中，把一线业务开发人员从不必要的工程体系相关繁琐的工作开发任务隔离开来，提高相关业务人员关注的业务本身，提高专注性，提高生产效率。 轻松构建你自己的脚手架 我们熟知的vue-cli，create-react-app都是前端圈最知名、最流行、最大众化的脚手架工具，但是实际工作的时候，常常会有凭现有工具无法满足的复杂需求。 这就需要我们掌握快速开发自己的脚手架工具的能力。 在这里给大家推荐一套视频教程—— 《从0到1用Node完成一个CLI工具》 帮助你： 从零构建一个Cli工具 command命令行 模板库代码拉取 Vue约定路由功能 npm库发布

1、react项目构建使用脚手架：create-react-app 配置：antd UI框架配置和less配置 一、命令行依次输入如下的命令 npm install -g create-react-app create-react-app my-app cd my-app npm start npm install create-react-app yarn -g create-react-app your_project_name cd your_project_name yarn start yarn add antd --save ----安装antdesign 来源： oschina 链接： https://my.oschina.net/u/4672357/blog/4742207

[TOC] React 了解 React 是一个用于构建用户界面的 JAVASCRIPT库。 React 主要用于构建UI，可以理解为React 是 MVC 中的V(视图)。 React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站。 React 拥有较高的性能，代码逻辑较为简单。 React 特点 1.声明式设计 —React采用声明范式，可以轻松描述应用。 2.高效 —React通过对DOM的模拟，最大限度地减少与DOM的交互 3.灵活 —React可以与已知的库或框架很好地配合。 4.JSX —JSX是 JavaScript 语法的扩展。React开发不一定使用 JSX，官方建议使用。 5.组件 —通过React 构建组件，是的代码更加容易得到复用，能够很好的应用在大项目的开发中。 6.单向响应的数据流 —React实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。 快速构建一个React开发环境 1、创建本地文件夹，保存React项目 2、通过控制台输入 npm install -g create-react-app 使用npm安装create-react-app 3、完成上面的步骤之后，输入 create-react-app my-app 来创建一个项目 my-app 是创建出来的React 项目。 4

最近兴趣使然，想要学习typescipt、react、ant，巧不巧刚好可以凑成一套完成的解决方法，可惜过程却并不顺利，现在记录下来我的解决过程，供大家参考希望能顺利一次跑通 版本说明 create-react-app 版本号：4.0.0（2020年10月31日，内部自带react、typescript等） Ant Design of React 版本号：4.7.3 less 版本号：3.12.2 less-loader 版本号：7.0.2 node 版本号：12.13.0 npm 版本号：6.12.0 一、利用create-react-app脚手架安装项目 本人习惯用npm进行安装，喜欢yarn应该也能行的通（默认是yarn） npx create-react-app antd-demo-ts --typescript --use-npm 二、将所有内建的配置暴露出来 这一步相当关键，若不在第一次执行该步骤，可能会出错 npm run eject 暴露之后的目录结构 三、修改路径映射 在webpack.config.js的alias下增加 "@": path.resolve("src") ，以后就可以用 @ 对 src 文件下的文件进行索引啦~ "@": path.resolve("src") 截图： 四、引入ant 现在从 yarn 或 npm 安装并引入 antd。 npm

在这里阅读效果更佳 还记得当年和同桌在草稿纸上下三子棋的时光吗 今天我们就用代码来重温一下年少（假设你有react基础，没有也行，只要你会三大框架的任意一种，上手react不难） 游戏规则 双方各执一子，在九宫格内一方三子连成线则游戏结束 九宫格下满未有三子连线则视为平局 你可以点击这里来体验最终效果，样式有点丑，请见谅 准备阶段 建议先全局安装typescript 和 create-react-app（<strong>安装过请忽略</strong>） npm install typescript create-react-app -g 使用typescript初始化项目 create-react-app demo --typescript 初始化成功后ts环境已经配好了，不需要你手动加ts配置</br> 此时就是tsx语法，我们就可以愉快的写ts了</br> src文件夹就是开发目录，所有代码都写在src文件夹下</br> 我们使用sass来写样式,先安装sass npm install node-sass --save 运行项目 npm run start 删掉初始化界面的一些代码 开发阶段 组件化 开发一个项目其实就是开发组件</br> 把一个项目拆分一个个小组件，方便后期维护以及复用 棋子组件 棋盘组件 游戏规则组件 游戏状态组件 react中组件分为类组件和函数组件<

React简介和使用 博客说明 文章所涉及的资料来自互联网整理和个人总结，意在于个人学习和经验汇总，如有什么地方侵权，请联系本人删除，谢谢！ 简介 用于构建用户界面的 JavaScript 库 特点 声明式 React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图，当数据改变时 React 能有效地更新并正确地渲染组件。 以声明式编写 UI，可以让你的代码更加可靠，且方便调试。 组件化 创建拥有各自状态的组件，再由这些组件构成更加复杂的 UI。 组件逻辑使用 JavaScript 编写而非模版，因此你可以轻松地在应用中传递数据，并使得状态与 DOM 分离。 一次学习，随处编写 无论你现在正在使用什么技术栈，你都可以随时引入 React 来开发新特性，而不需要重写现有代码。 React 还可以使用 Node 进行服务器渲染，或使用 React Native开发原生移动应用。 安装 npx create-react-app my-app 运行 cd my-app npm start 感谢 万能的网络 以及勤劳的自己 来源： oschina 链接： https://my.oschina.net/guizimo/blog/4302339

前言 上一篇思考了一个组件库的开发需要什么东西，所以第二步需要做的是配置开发环境，这里我选用的是React官方推荐的脚手架create-react-app，但是直接用create-react-app创建项目并不能直接满足我们的需求，所以这里开始考虑要怎么去组织项目结构。 创建项目 环境要求 根据官方文档要求，使用create-react-app创建项目环境要求为 Node >= 8.10 和 npm >= 5.6 指令 npx create-react-app hrmui-ts-react --template typescript 复制代码 npx不是拼写错误，而是 npm 5.2+ 附带的 package 运行工具 hrmui-ts-react：我的项目名字 --template typescript：表示该项目使用typescript 项目目录 以上是刚创建完的项目目录，接下来我们将对该项目进行改造 项目配置 暴漏配置文件 我们可以看到上面的项目目录没有webpack的相关配置，因为create-react-app脚手架已经帮我们封装好了。但如果要对webpack进行设置，可以使用命令 npm run eject 复制代码 把webpack文件暴露出来， 但是需要注意的是，该操作不可逆。 暴漏配置文件后的项目目录 webpack.config有两个，一个是dev（开发

前段时间写了一篇 详解 webpack4 中易混淆知识点 的文章，没想到收获了近 600 个赞，在这里对各位老铁抱拳感谢。上篇文章我费了很多时间去构思 demo 和原创作图，就是想把一些概念彻底讲清楚，看评论区的反响我感觉还是做到了自己设定的目标。 如果大家看过一些 webpack4 优化的文章，一定会出现 dll 动态链接库。它以配置之复杂让众多初学者记忆犹新。今天我会以一个学习者的角度去一步一步探讨 webpack dll 的配置，最后得出一个完美的解决方案。 本文的内容和大部分讲解 webpack4 优化文章的观点不一样 ，如果有不同的见解，欢迎在评论区和我讨论。 友情提示：本文章不是入门教程，不会费大量笔墨去描写 webpack 的基础配置，请读者配合教程[源代码](https://github.com/skychx/webpack_learn/tree/master/optimization)食用。 1. 基础概念：dll 其实就是缓存 说实话我刚看见这个 dll 动态链接库 的时候，我真被镇住了：这是什么玩意？怎么根本没听说过？ 好学的我赶紧 Google 一下，在 维基百科 里找到了标准定义： 所谓动态链接，就是把一些经常会共享的代码制作成 DLL 档，当可执行文件调用到 DLL 档内的函数时，Windows 操作系统才会把 DLL 档加载存储器内，DLL

您所知道的一些事情，您可能不知道的一些事情 Create React App是搭建React项目的快速方法。这样我们可以重点放在代码上，而不是构建工具上。 事实1：可以使用单个命令创建完整项目 这个神奇的命令可以通过以下三种方式之一调用： npx create-react-app my-app npm init react-app my-app yarn create react-app my-app 复制代码 Facebook保证其所有基础组件（Webpack，Babel，ESLint，Jest等）可以无缝地协同工作。 开箱即用，将设置以下脚本： npm start: 在开发模式下运行该应用程序，然后打开 http://localhost:3000 在浏览器中查看它。 npm run build: 将用于生产的应用程序构建到build文件夹，该版本已精简并准备部署。 npm test : 以交互方式运行测试观察程序。它运行与自上次提交以来更改的文件相关的测试。 复制代码 事实2：React项目可以从特定模板开始 前面的命令可以用一个特定的模板定制： npx create-react-app my-app --template [template-name] npm init react-app my-app --template [template-name] yarn