一、 使用create-react-app创建react应用1.1. react脚手架xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目包含了所有需要的配置（语法检查、jsx编译、devServer…）下载好了所有相关的依赖可以直接运行一个简单效果react提供了一个用于创建react项目的脚手架库: create-react-app项目的整体技术架构为: re
目录：1. 前期准备2. Create React App3. 工具及插件 安装第三方插件 安装 bootstrap 执行 eject4. 在线 React 创建 前期准备1. 安装 Node.js。同时建议安装 nvm，nvm 用于进行 Node 版本的控制。2. 安装编辑器，比如 VSCODE。 Create React AppCreate React App 官网：
React项目搭建yarn
作为一名经验丰富的开发者，我将教你如何搭建一个React项目并使用yarn进行管理。首先，我会告诉你整个搭建过程的流程，然后我将逐步引导你进行每一步操作，包括需要使用的代码和注释。
流程：
| 步骤 | 操作 |
| ---- | ---- |
| 1 | 创建React项目 |
| 2 | 安装yarn |
| 3 | 初始化项目 |
| 4 | 添加React
通常来讲，我们在使用docker build Nodejs容器时，代码中就有预设一些参数，作为各个环境的环境变量，例如数据库的URL等 但作为前端应用react，在编译了代码后，生成的代码使用Nginx代理在浏览器中运行，那么注意，在浏览器中没有环境变量这个东西，所以原本在后台Nodejs服务器中的获取环境变量的方案，在前端React项目中不可用实际上，process在浏览器环境都不存在
目录前言一、create-react-app 脚手架快速搭建 react 项目1、安装 create-react-app2、检测 create-react-app 是否安装成功3、创建 react 项目二、generator-react-webpack 脚手架搭建 react 项目1、安装 yeoman2、安装 generator-react-webpack3、创建 react
常用配置说明entry可以接受字符串，数组，对象等多种格式项目打包入口文件，可以是绝对路径也可以是相对路径webpack 打包默认入口文件是 ./src/index.js 约定，默认输出是 项目根目录下 /dist/main.jsoutput 打包后的内容输出相关配置，path打包后文件路径, 只能使用绝对路径常用loader相关理解默认情况下，webpack 值支持.js,.json文件，通过
转载
2021-01-29 10:59:50
508阅读
2评论
React的项目搭建项目搭建比较简单，先安装react脚手架，然后创建项目就完事了第一步安装node（基本环境）第二步安装webpack（基本环境）直接敲命令运行即可npm install -g webpack第三步配置淘宝镜像npm install -g cnpm --registry=https://registry.npm.taobao.org
npm config set registry
使用 antd安装yarn add antd复制代码配置仍然需要使用babel-plugin-import，不过在v4版本的介绍文档中没有该部分说明了，需要到v3版本找 —— antd@v3 - 高级配置yarn add babel-plugin-import -D复制代码只安装babel-plugin-import是不够的，还需要安装less和less-loaderyarn add less l
转载
2021-01-19 22:02:34
352阅读
2评论
安装 TSyarn add typescript -D复制代码安装@types的类型声明包。当使用第三方库时，我们需要引用它的声明文件，才能获得对应的代码补全、接口提示等功能，声明文件是以index.d.ts的一个文件，一般放在项目的根目录中，或者可以通过package.json中的typings/types属性来指定项目中声明文件的位置。获取一个库类型声明文件有两种方式：一种是该库包含了自己的声
转载
2021-01-19 22:03:00
402阅读
2评论
管理模块module在 webpack 中，每个文件都是一个模块，除了 webpack 认识的 JS 和 JSON 文件，CSS，图片等都是模块，模块之间通过不同方式的语法会产生依赖关系，例如：ES6+的import；CommonJS 的require；AMD 的define和require；css/sass/less 文件中的@import，url(...)；html 文件中可替换元素的src属
转载
2021-01-19 22:11:00
1086阅读
2评论
之前通过一些 webpack 的简单配置，项目可以使用 React 来编写基本组件了，但是每次编写组件，都需要重新执行webpack命令打包，然后再手动在浏览器中打开页面才能看到开发结果，这是十分影响开发效率的，我们要的效果yarn start启动项目运行，在开发过程中使用ctrl+s保存文件，然后页面能自动更新，为此需要配置 HMR 和 webpack-dev-server。开发模式模式（Mod
转载
2021-01-19 22:31:20
602阅读
2评论
一、React项目开发 1、直接使用 Staticfile CDN 的 React CDN 库 参考菜鸟教程 2、使用 create-react-app 快速构建 React 开发环境 $ cnpm install -g create-react-app $ create-react-app my-
转载
2020-02-22 20:33:00
92阅读
2评论
# React和TypeScript搭建项目
React和TypeScript是现代Web开发中非常流行的技术。React是一个用于构建用户界面的JavaScript库，而TypeScript是一种超集语言，它在JavaScript的基础上增加了类型系统。将它们结合使用，可以创建可维护性高、可扩展性强的Web应用程序。本文将介绍如何使用React和TypeScript搭建一个项目，并提供代码示例
前言本文详细的介绍如何从头开始搭建一个react项目，帮助新人了解项目搭建流程和打包流程。需要注意包版本问题，不同版本代表着不同的代码。如果包版本不同启动项目时可能会出现未知错误。目录说明└─config #webpack配置文件
│ webpack.build.config.js #webpack生产配置文件
转载
2021-01-31 20:11:53
275阅读
2评论
react项目中使用typescriptreact项目中使用typescript安装`typescript``package.json`中`scripts`出现配置 TypeScript 编译器例如设置使用TS的文件目录以及TS的输出目录文件扩展名类型定义 react项目中使用typescript安装typescript
npm install --save-dev typescriptpack
转载
2023-09-04 14:13:52
126阅读
学习目标： setState 学习内容：学习产出：setStatesetState更新状态的两种写法。（1）对象式的setState
setState(stateChange, [callback])
stateChange为 状态改变对象（该对象可以提现状态的更改）
callback是可选回调函数，它在状态更新完毕、界面更新完毕后（render调用后）才会被调用
（2）函数式setStat
1. react脚手架xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目
包含了所有需要的配置（语法检查、jsx编译、devServer…）下载好了所有相关的依赖可以直接运行一个简单效果react提供了一个用于创建react项目的脚手架库: create-react-app项目的整体技术架构为: react + webpack + es6 + eslint.....
create-react-app、react、react-dom、redux、react-redux、redux-thunk、react-router-dom、antd-mobile/antd、lib（scss库）、axios/fetch搭建移动端单页面应用
原创
2018-11-15 10:17:55
3425阅读
点赞
resolvewebpack 的底层配置项resolve主要和模块解析的路径相关，常见的例如mainFiles ，extensions等resolve.alias配置模块依赖别名，常见的@解析到src文件夹，path.resolve本身是用来构造绝对路径的，所以@总能解析到src目录的路径module.exports = { resolve: {alias: { '@': path.r
转载
2021-01-19 22:03:21
506阅读
2评论
chunk 和 bundleConcepts - Bundle vs Chunk经常让人摸不着头脑的是 chunk 和 bundle 这两个概念。chunk，翻译过来就是大块，也就是代码块；而 bundle 则是束，包的意思。从 webpack 给出的术语表中是这么解释的：Chunk: This webpack-specific term is used internally to manage
转载
2021-01-19 22:07:28
510阅读
2评论
