棉安咚

React中单标签必须闭合render函数最顶层只能有一个容器type = text/babel编写组件组件必须有render方法自定义组件名称必须大写开头模版 {}属性和方法调用添加this， {this.name} {this.func()}return 用 () 包起来，因为换行的原因组件传参行内style样式要以json形式传递render(){ retu...

Redux状态管理器用于多个控件之间数据共享单向数据流基本使用reducer使用注意事项返回的必须是一个全新的json对象getState使用注意点getState的值不会自动改变，所以执行完dispatch之后，要获取最新值要再次调用getStatesubscribegetState的缺点:当项目比较大的时候，很难知道数据更新了，需要去重新获取最新数...

嵌套路由的原理：在任何组件中，都能使用route

传递参数的例子：

能够通过不同的地址，展现不同的组件 安装npm i react-router-dom -D会自动安装react-router例子：router使用route link使用Route 相当于定义变量， Link就像个if一样去匹配已定义的Route。称为路由表exact 精确匹配...

在这篇文章的基础上，只需要五步即可1.安装相关文件npm i webpack webpack-cli webpack-dev-server -Dnpm i html-webpack-plugin -Ddev-server依赖webpack进行编译plugin是帮助index.html引用相应编译后的js文件，而不是像之前写死的boundle.js2.修改package.js文...

在这篇文章的基础上，只需要三步即可1.安装相关文件npm i eslint eslint-loader eslint-plugin-react -D2.生成eslint配置文件node node_modules/eslint/bin/eslint --init安装完毕之后，会在node_modules相应目录下生成eslint文件，我们需要调用其中的init命令会询问你要如何...

在这篇文章的基础上，只需要三步即可1.安装相关文件npm i postcss-loader autoprefixer -Dpostcss-loader 可以给css加各种前缀autoprefixer 内部携带兼容表，用来指导postcss-loader给css样式添加哪种前缀2.修改package.js文件给postcss-loader指导，兼容哪些浏览器> 0.5...

在这篇文章的基础上，只需要三步即可1.安装相关文件npm i stylelint stylelint-webpack-plugin stylelint-config-standard -Dstylelint-config-standard 预定义的css语法规则stylelint-webpack-plugin webpack适配stylelint的插件2.修改package.js...

在这篇文章的基础上，只需要修改配置文件即可修改webpack.config.js文件

在这篇文章的基础上，只需要两步即可1.安装图片 loader相关文件npm i url-loader file-loader -Durl-loader依赖于file-loader2.修改webpack.config.js文件limit 大于10k的图片会被输出到build/images/小于10k的会被直接打包到js文件中...

在这篇文章的基础上，只需要两步即可1.安装css loader相关文件npm i style-loader css-loader -D2.修改webpack.config.js文件

build 存放编译生成后的文件config 存在配置文件public 存放一些不会打包到文件中的静态资源，比如用户的头像等srcassert 存放会一起打包打出去的静态资源，比如图标等components 存放定义的组建pages 存放定义的页面store 存放redux定义的一些数据App.js 内容输出给index.js使用index.js html引用的入口...

为啥要使用webpackReact的语法是JSX，浏览器并不认识，所以直接引用React写的js文件会报错。webpack的作用就是将JSX(但不仅限于jsx)编译为浏览器认识的js语法。初始化项目初始化npm init -y安装webpacknpm i webpack webpack-cli -D安装Reactnpm i react react-dom -...

基本使用