配置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 wp
npm 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()函数循环。