配置Webpack-dev-server+初步了解react中元素、组件、事件、props传递

配置webpack-dev-server

我们前面已经使用过webpac了，webpack-dev-server的区别就是：不必每次改完代码就手动编译一次。开发环境使用。

官网地址：
https://github.com/webpack/webpack-dev-server

安装：

npm install webpack-dev-server --save-dev

安装完成添加配置段:

    devServer: {        contentBase: path.join(__dirname, "dev"),        compress: true,        port: 9000    }

之前使用webpack打包，我们是直接使用的wepack命令，其实我们可以用npm来调用webpack最终实现一样的功能，但可以简化命令。
在package.json文件：

  "scripts": {    "test": "echo \"Error: no test specified\" && exit 1",    "wp": "webpack",    "wp-dev": "webpack-dev-server"  },

这样我们在终端就可以执行：

npm run wpnpm run wp-dev  

然后我们可以访问：
http://localhost:9000/

react中『元素』的概念

ReactDOM.render(    <h1>Hello, world!</h1>,    document.getElementById('root'));

其中<h1>Hello, world!</h1>就是元素。

另外一种定义元素的方式：

// 定义一个元素// 只能有一个根节点let show = <div><p>this is xxxxx</p></div>;ReactDOM.render(    show, // 使用到这个元素    document.getElementById('root'));

react中『组件』的概念

// 定义一个组件class Show extends React.Component{    render(){        return <div><h3>zhangSan</h3></div>    }}// 最后渲染ReactDOM.render(    <Show />, // 使用组件    document.getElementById('root'));

注意 组件和元素的区别。

组件上还可以有属性。

// 定义一个组件class Show extends React.Component{    render(){        return <div><h3>{this.props.username}</h3></div>    }}// 最后渲染ReactDOM.render(    <Show username="jack"/>, // 使用组件    document.getElementById('root'));

在组件里使用this.props.xxx语法来获取属性值。
使用组件的时候可以传递属性值。

不但可以传递简单值，还可以传递对象。

// 定义一个组件class Show extends React.Component{    render(){        return <div><h3>{this.props.foo.username}</h3></div>    }}// 一个对象let obj = {username:"lily"};// 最后渲染ReactDOM.render(    <Show foo={obj} />, // 使用组件    document.getElementById('root'));

react中『事件』的概念

class Show extends React.Component{    // 写一个函数    showMe(){        alert("点击了")    }    render(){        return <div>            <h3>{this.props.foo.username}</h3>            <button onClick={this.showMe}>点我</button>        </div>    }}

上面代码我们在组件里定义了一个点击事件。
除了了函数写在render()外面，还可以直接写在元素上

<button onClick={function(){alert("点击了2")}}>点我</button>

箭头函数的写法：

            <button onClick={()=>{                alert("点击了3")            }}>点我</button>

            <button onClick={()=>{                alert(this.props.foo.username);            }}>点我</button>

循环输出

import React from 'react';import ReactDOM from 'react-dom';// 定义一个组件class Show extends React.Component{    // 写一个函数    showMe(){        alert("点击了")    }    render(){        return <div>            {                this.props.users.map(                    (item)=>{                        return <h3>{item.username}</h3>                    }                )            }        </div>    }}// 一个数组let arr = [    {username:"lily"},    {username:"jack"},];// 最后渲染ReactDOM.render(    <Show users={arr} />, // 使用组件    document.getElementById('root'));

注意使用map()函数循环。