knowledge_bird的博客

从零开始搭建React项目1. Webpack基础概念webpack主要作用：代码转换：TypeScript 编译成 JavaScript、SCSS 编译成 CSS 等。文件优化：压缩 JavaScript、CSS、HTML 代码，压缩合并图片等。代码分割：提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载。模块合并：在采用模块化的项目里会有很多个模块和文件，需要构建功...

react组件使用方法react中组件开放也是有方法的，一般我们建议父组件使用：import React, { Component } from 'react'class componentName extends Component { constructor(props) { super(props); } render() ...

react-eslint在vscode中如何配置首先全局安装eslint：https://cn.eslint.org/docs/user-guide/getting-started然后当我们装完eslint之后记得在create-react-app脚手架中也需要加载，具体还是看官网接下来我们开始配置vscode中的eslint：1、安装eslint插件：2、安装prettier插件：...

react数组var a={1,2,3}var b=a //b={1,2,3}var b={1,2,3,4,5}console.log(a) //a={1,2,3,4,5}此时我们可以发现当我们修改b对象的时候会将a对象的内容也进行修改如图：面对这样的结果，前端JavaScript有两种解决方案一种是使用json的方式， let list = JSON.parse(JS...

当类似配置文件缺失的时候在当前的目录下面：yarn add @babel/plugin-transform-react-jsx -D添加配置文件即可同理：在当前的目录下面配置： yarn add @babel/plugin-transform-react-jsx-source -D加载完成后：yarn start打开react即可使用...

React生命周期详解子组件生命周期详解代码：import React, { Component } from 'react'export default class Life extends Component { // 组件挂在的时候触发的几个生命周期函数 constructor(props) { console.log('1、首先执行构造函数'); super...

父组件向子组件传值—》子组件向父组件获取数据父组件：import React, { Component } from 'react'import Son from './Son'import SonTow from './SonTow'export default class Daddy extends Component { constructor(props) { sup...

利用react实现类似vue的双向数据绑定的效果在使用vue的时候我们都知道，vue自身是双向数据绑定，所以使用自身带的v-model就可以实现双向数据的绑定，而react却是明摆的单向数据绑定，那么如何利用react实现类似的vue的双向数据绑定？方法如下：import React, { Component } from 'react'export default class comp...

使用create-react-app生成react脚手架之后，我在上一篇文件已经讲过，这个脚手架所生成的问价以及可以删除的文件夹，那么react的脚手架应该如何使用？首先，app.js做为主要的根组件的入口文件，我们通常是写完组件之后，在app.js文件实现组件的利用如图：其中，我们可以将组件的后缀名，命名为.js文件也可以为.jsx文件，webpack打包之后都会形成.js文件，所以这边...

create-react-app---->react脚手架的安装与使用安装淘宝镜像npm install -g cnpm --registry=https://registry.npm.taobao.org使用淘宝镜像npm config set registry https://registry.npm.taobao.org一、开始安装使用react步骤1、cnpm insta...