上节课我们快速的搭建了webpack结合react 但是我们每次修改代码运行项目需要通过yarn run build 这样才行 这种方式太麻烦了
这节我们先配置下webpack-dev-server 修改代码后无需重新编译会自动刷新
首先安装
yarn add webpack-dev-server
安装好后按照官网配置下webpack-dev-server
只能用于开发环境 生产环境不适用
在webpack.config.js中加入如下
image.png
接下来在package.json中加入如下内容
image.png
然后在cmd窗口执行yarn run dev就可以启动网站了
image.png
浏览器访问localhost:9000
image.png
默认访问index.html
因为我们生成的文件名是index.html(这个可以默认不写) 如果是别的文件名 则需要写
接下来看下reactjs的一些概念
元素
image.png
这里的me就是一个元素 只能有一个根节点
运行效果
image.png
元素里面还可以这样写
image.png
大括号里面写入一段脚本（可以是函数）是一个表达式
image.png
一般来说页面上是需要创建组件的
接下来看下组件
创建一个组件
image.png
es2015的写法 里面继承React.Component
里面有个render方法 返回一个根元素
运行结果
image.png
上面是一个静态组件 既然我们用到了组件 必定是要传参数
那么如何传递参数呢？
通过props属性集合（是一个只读的 一旦外部传递了以后内部不可以修改）
组件或元素内部要对属性进行脚本的操作 要放到大括号里面
一旦调用组件时 设置了某个属性 则可以通过this.props.key名来获取
下面看下代码
image.png
运行结果
image.png
image.png
image.png
以上是最基本的传参 在Me组件里通过key value传参
还可以传递对象
如下
image.png
image.png
还可以使用es2015的对象解构的方式传递
image.png
运行结果
image.png
事件传递
image.png
在组件里面定义了一个showMe方法
在输入框的点击事件上调用了showMe方法 注意这里传递的是showMe这个function而不是执行showMe的结果
运行结果
image.png
点击按钮
image.png
如果不想在组件中定义函数 还可以在大括号中直接写函数
image.png
运行结果
image.png
大括号里还可以改成剪头函数
image.png
运行结果
image.png
同时函数里面可以访问props属性里面的值
image.png
运行结果
image.png
这里是用了箭头函数 this指向当前组件
如果是匿名函数的形式 则需要改为如下
image.png
因为匿名函数中的this表示当前function里面的对象 需要将this绑定的组件上
运行结果
image.png
以上就是简单的传递事件
接下来看下组件循环输出
比如我们外部传递的是一个数组
image.png
image.png
运行结果
image.png
网友评论