weixin_43090018的博客

vite版本版本：vite：2.7.2react版本：react：17.0.2代码仓库地址：gitee地址哦今天是2022年的第一天上班，想着 摸会鱼吧 学习新东西，也好久没弄vite和react了，干脆一不二不休，一起整一个1、创建项目命令# npm 6.xnpm init vite@latest my-vue-app --template vue# npm 7+, 需要额外的双横线：npm init vite@latest my-vue-app -- --template vue

1、暴露配置文件首先终端运行npm run eject暴露出配置文件，然后我们找到public文件夹下，新建对应的html文件2、修改默认配置在config文件夹下找到webpack.config.js这个文件，我们来修改默认配置entry修改因为配置的是多页应用，所以我们要先找到入口即entry进行修改，红框中就是修改后的HtmlWebpackPlugin修改没有修改前的是只有一个的，现在我们加上几个即可，然后写入对应的filename、template、chunks.

项目是使用react脚手架搭建的，使用了customize-cra、react-app-rewired来修改脚手架默认的配置1、添加配置项安装和配置完成基本的config-overrides.js后，添加addWebpackExternals选项用来配置cdn完整的配置项请查看：官方文档，下面只展示配置cdn的代码在里面写入我们需要cdn加载的文件，我们直接把G2plot挂载到全局const {override, addLessLoader, addWebpackAlias, addWebpa

前几天用react写后台的时候，想着用用less，因为之前一直都用的是sass，这次换一下，兴高采烈地使用脚手架搭建完项目，写入less的时候，run起来一看，不生效！！！啥也没有摸索了半天也没头绪，于是就在终端中npm run eject发现竟然没有less相关的loader，然后我又兴高采烈的npm安装less相关依赖，再次run一下，还是没效果，去github上看了下，原来还需要再次配置主要修改的地方如下图**添加完这个之后，再去修改下一个地方：**let preProcesso

使用脚手架创建完项目后，接着来安装antd：npm install antd --save按照官方说的，接着在引入样式：import 'antd/dist/antd.css'这样当然是不推荐的，默认就把他全部的样式引入了，体积增加了不少，推荐使用 customize-cra、react-app-rewired、babel-plugin-import首先安装这三个依赖：npm install customize-cra react-app-rewired babel-plugin-import --s

1、首先在src目录下新建setupProxy.js文件，写入如下代码const proxy = require('http-proxy-middleware')module.exports = function(app) { app.use( proxy('/api1', { //api1是需要转发的请求(所有带有/api1前缀的请求都会转发给5000) target: 'http://localhost:5000', //配置转发目标地址(能返回数据的服务器地址)

有这样一个添加个人信息的form表单，点击确定的时候，在控制台输出他所填写的内容（以react为例）要是按照我刚写代码的时候，肯定是一个输入框一个方法，然后在进行赋值；万一输入框多了那就真tm难受我们可以通过调用一个函数传不同的参数来进行优化函数柯里化的方式import React, { Component } from 'react'export default class Demo extends Component { state = { name: '',

这里介绍三种用法：回调形式、api形式、ref hooks1、回调形式使用回调会传递一个函数。这个函数中接受 React 组件实例或 HTML DOM 元素作为参数import React, { useRef, Component } from 'react'export default class Demo extends Component { cli = () => { //此时的handler就会被挂载到this上，即Demo组件的实例对象上

使用之前安装react-redux：npm install react-redux一个项目中用到store中数据的组件有很多，所以应该把他放在App.js在App.js中引入react-redux。并将子组件使用Provider组件包裹起来子组件被Provider组件包裹起来后，每个子组件都能通过一些方法获取到store中的数据，将store传递给每个被包裹的子组件app.jsimport TodoList from './views/TodoList'import { Provider }

这里的中间件指的是action和store之间redux-thunkredux-thunk这个中间件就是对dispatch方法的一个升级，如果dispatch中传递的是一个对象，会直接传递给store；如果是一个方法，会先执行这个方法1、使用之前先安装一下：npm install redux-thunk2、配置一下redux-thunkredux-thunk和redux-devtools一样都是一个中间件，需要在store中配置，可以查阅github：https://github.com/z

流程先看张redux工作流程图刚开始看我也有点懵，把他比喻成生活中的一个小例子就好理解了，比如图书馆借书的例子：首先简单的把components比做成借书的人当借书人(components)说：我要借书，那么说话的这个行为就是actions这时候图书管理员(Store)听见了，他来集中管理书籍的信息、数据图书管理员(Store)也不知道你要借哪一本书、有没有这本书，他要求查一下，看下手册(reducers)，最后告诉管理员(Store)关于这本书的数据信息1、首先我们的组件要访问St.

这里介绍的是完整的用windows开发android原生环境，官方文档：rn环境开发搭建开发和搭建环境之前提醒一下大家，电脑配置一定要好一点，不然就会向我那样，都快成功了，结果卡死机了，fuck！！！，话不多说直接上步骤1、下载安装、配置JDKRN官方提示：JDK 的版本必须是 1.8；Node 的版本应大于等于 12；而且：千万不要使用npm，重要的话说三遍：千万不要使用npm！千万不要使用npm！千万不要使用npm！，我刚开始不听，就要用cnpm，结果后面的依赖路径都错乱了，一直报错，建议网

1、安装axios：npm install axios --save-dev2、在和main.js同级的目录中新建一个js文件（httpRequest.js）import axios from 'axios'import qs from 'qs'axios.defaults.timeout = 3000//设置请求响应时间axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset

本篇文章有点长，请耐心阅读第一步老样子还是要在文件夹里面npm init -y初始化项目一般工具安装都是-D；-S是我们从开发到上线一直都要用到的2、新建相关文件夹和文件a、根目录下新建src文件夹用来存放项目文件；新建public文件夹并在里面新建index.html作为入口html文件​ b、根目录下新建main.js作为webpack打包的入口文件3、安装webpack相关（1）、安装webpack：npm i webpack -D​ （2）、安装webpack-cli：n

1、安装使用之前先安装一下：npm install react-router-dom，官方文档地址：react路由官方文档2、导入路由相关在相关组件中导入路由import { Router, Route, Link } from 'react-router-dom'（1）、HashRouter：表示一个路由的跟容器，将来所有和路由相关的东西，都将包裹在HashRouter中，一个网站中，只需要使用一次HashRouter就好了（2）、Route：表示一个路由规则，在Route上有2个比.

首先假设我们现在有3个组件，如下图所示我们想要父组件传递数据到孙子组件中，没有context的时候大多数都是用的props传值层层传递的，万一组件嵌套组件的多了有100层，那不是炸了，传值也累死了，当然如果你愿意也可以这里就以17.x版本的context开始介绍，16.x就暂时说一下写法就ok16.x的写法做类型校验的时候首先还要安装类型校验的依赖包：npm install prop-typesimport React, { Component, createContext } from

在用vue的时候我们给组件传值是这样的，比如我们有一个item.vue的组件在这个组件里面，我们在props里面接收传来的数据，在count里面的type和value中规定值的类型和默认值<template> <div>{{count}}</div></template><script>export default { props: { count: { type: Number, value: 0 }

1、使用内联样式这种方式用的很少，也不是完全用不到，很简单<button style={{background: 'red', color: '#fff', zIndex: 100}} onClick={this.btnClick}>按钮</button>外面的{}表示要开始写js了，里面的{}表示样式对象注意：在内联样式中，如果是数值类型的样式就不用加''了，比如z-index: 100等，字符串类型的需要加，多个样式中间用,分割；像line-height、z-i.

1、父子组件传值我们定义了一个父组件TodoList和子组件TodoItem，想要这两个组件相互传值父组件向子组件传值 render() { return ( <div> <ul> {/* 循环数据 */} { this.state.list.map((item,index.

1、循环假设现在我们有一个这样的数组：list: ['张三','李四','王五']，那么怎么在页面上渲染呢，很简单，在react中可以用数组的map方法import React from 'react'class TodoList extends React.Component { constructor(props){ super(props) this.state = { list: ['张三','李四','王五'], .

1、使用function构造函数进行创建function Tem (props){ // 接收传来的值，用props console.log(props) return <h1>这是Tem组件</h1>}const person = { name: 'aa', age: 13, text: '这是人'}ReactDOM.render(<div> 123 {/* 为组件传值 */} <Tem name={pers.