WebStorm学习笔记003---前端脚手架

先来谈谈我们的前端脚手架是什么？ 
 随着前端技术的发展，模块化、框架的发展，前端的工具越来越多，讲真话，这些工具本身和编程没有太多关系，用不用也不能提现编程水平的高低，只是一个工具，（真正说明你水平的不是使用这些工具，而是那些发明这些工具的人，如果你是这个级别，那这篇文章，你就不用看了），闲话少说，让我们看看今天用到的工具有哪些？ 
 webpack：前端模块化工具 
 webpack-dev-server：模拟后台服务器 
 npm：加载各种依赖 
 babel：前端解析工具，让你放心大胆地使用ES6 
 dora：让你mock后台数据 
所有的工具都对应一个配置文件，那么下面就介绍下配置文件,并把React.js官网的例子简单配置了下，大家可以参考下，所有的文件会上传github： 
package.json文件： 
 你使用的各种包文件，版本等信息

{
  "name": "training",
  "version": "1.0.0",
  "description": "jsTraining",
  "main": "index.js",
  "license": "ISC",
  "scripts": {
    "start": "./node_modules/.bin/webpack --progress --colors",
    "i": "npm install",
    "mock": "./node_modules/.bin/dora --plugins proxy",
    "we": "./node_modules/.bin/webpack-dev-server --hot --inline",
    "w": "webpack"
  },
  "author": {
    "name": "Donspeng",
    "email": "*****",
    "url": "blog.csdn.net/donspeng"
  },
  "dependencies": {
    "antd": "^2.12.2",
    "react": "^15.6.1",
    "react-dom": "^15.6.1"
  },
  "devDependencies": {
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "dora": "^0.4.3",
    "dora-plugin-proxy": "^0.8.5",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "webpack": "^3.4.1",
    "webpack-dev-server": "^2.6.1"
  }
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38

webpack.config.js：文件

var webpack = require('webpack')
var path=require("path")
module.exports = {
  entry: './index.js',
  output: {
    path: path.resolve(__dirname, "dist"),
    //publicPath:'',
    filename: 'bundle.js'
  },
  resolve: {
        extensions: ['.','.js','.jsx']
  },
  devServer: {
    //contentBase: path.join(__dirname, "dist"),
    proxy:{
      "/api":{
        target:"http://localhost:8989",
      secure:true
      }
    },
    compress: true,
    port: 8080,
    inline:true,
    hot:true
  },
  module: {
    loaders: [
      {test: /\.css$/, loader: 'style-loader!css-loader'},
      {
        test: /.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        loader:'babel-loader?presets[]=es2015&presets[]=react'
      }
    ]
  },
  plugins:[
    new webpack.ProvidePlugin({
      React:'react',
      ReactDOM:'react-dom'
    })
  ]
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43

proxy.config.js

module.exports={
    "get /api/hello"(req,res){
        res.json({
            errno:0,
            errmsg:"成功",
            data:
                [
                    {category: "Sporting Goods", price: "$49.99", stocked: true, name: "Football"},
                    {category: "Sporting Goods", price: "$9.99", stocked: true, name: "Baseball"},
                    {category: "Sporting Goods", price: "$29.99", stocked: false, name: "Basketball"},
                    {category: "Electronics", price: "$99.99", stocked: true, name: "iPod Touch"},
                    {category: "Electronics", price: "$399.99", stocked: false, name: "iPhone 5"},
                    {category: "Electronics", price: "$199.99", stocked: true, name: "Nexus 7"}
                ]
        });
    }
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17

.babelrc:

{
    "presets":["react","es2015","stage-2"],
    "env":{
        "production":{
            "plugins":[
                ["transform-react-display-name"]
            ]
        }
    }
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

index.js

import React from 'react'
import ReactDOM from "react-dom"
class HelloWorld extends React.Component{
    constructor(props) {
        super(props);
        this.state = {value: 'helloWorld!'};
        //this.handleChange=this.handleChange.bind(this);
    }
    handleChange(event) {
        this.setState({
            value: event.target.value
        });
    }
render(){
        return (
        <div>
            <h1>helloWorld！</h1>
            <input type="text" defaultValue="hehe" onChange={(e)=>this.handleChange(e)}/>
            <label>{this.state.value}</label>
        </div>);
    }
}
function tick(){
    const element=(
        <div>
            <h1>Time</h1>
            <h2> It is {new Date().toLocaleTimeString()}</h2>
        </div>
    );
    ReactDOM.render(
        element,
        document.getElementById("time")
    );
}
ReactDOM.render(<HelloWorld/>,document.getElementById("main"));
setInterval(tick,1000);

class RealTimeTick extends React.Component{
    constructor(props){
        super(props);
        this.state={
            time:new Date()
        }
    }
    //只会执行一次！！！！！！
    componentDidMount(){
        console.log(new Date());
        setInterval(
            ()=>this.tc(),1000
        );
    }
    tc(){
        this.setState({
            time:new Date()})
    }
    render(){
        return(
            <div>
                <h1>This is Realtime!</h1>
                <h2>{this.state.time.toLocaleTimeString()}</h2>
            </div>
        )
    }
}
ReactDOM.render(<RealTimeTick/>,document.getElementById("rtime"));

function Greeting(props){
    return 
}
function Go(props){
    return <button onc>I go!</button>
}
class Control extends React.Component{
    constructor(props){
        super(props);
        this.state={
            isLoggedIn:true
        }
    }
    isLoggedIn(){
        this.setState({
            isLoggedIn:true
        })
    }
    isLoggedOut(){
        this.setState({
            isLoggedIn:false
        })
    }
    render(){
        const isLoggedIn=this.state.isLoggedIn;
        let bt=null;
        if(isLoggedIn){
            console.log("on");
            bt=<button onClick={this.isLoggedOut.bind(this)}>ON</button>
        }else{
            console.log("false");
            bt=<button onClick={this.isLoggedIn.bind(this)}>OFF</button>            
        }
        return(
            <div>{bt}</div>
        );
    }
}
ReactDOM.render(<Control/>,document.getElementById('bt'));
//const listNum=[1,2,3,4,5];

class ListTest extends React.Component{
    constructor(){
        super();//不需要加props
    }
    render(){
        const list=this.props.list;
        const listItem=list.map((item)=>
            <li key={item.toString()}>
                {item}
            </li>
        )
        return(
            <ul>
                {listItem}
            </ul>
        );
    }
}
ReactDOM.render(
    <ListTest list={[1,2,3,4,5]}/>,document.getElementById("list")
);


class EssayForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      textAreaValue: 'Please write an essay about your favorite DOM element.',
      selectValue: 'coconut',
      checkboxValue:true,
      numValue:2
    };
  }

  handleAreaChange(event) {
    this.setState({textAreaValue: event.target.value});
  }
  handleSelectChange(event) {
    this.setState({selectValue: event.target.value});
  }
  handleCheckboxValue(event){
    this.setState({checkboxValue: event.target.checked});    
  }
  handleNumChange(){
    this.setState({numValue:event.target.value});
 }
 handleSubmit(event) {
    let value=null;
    //遍历state会刷新页面。。。。。。。。。。。
    /*for(item in this.state){
        value=item+this.state[item];
    }*/
    Object.keys(this.state).map((key)=>{
        value+=this.state[key]
    })
    alert('An essay was submitted: '+value);
    event.preventDefault();
  }
  render() {
    return (
      <form onSubmit={this.handleSubmit.bind(this)}>
        <label>
          Name:
          <textarea value={this.state.textAreaValue} onChange={this.handleAreaChange.bind(this)} />
        </label>
        <label>
          Pick your favorite La Croix flavor:
          <select value={this.state.selectValue} onChange={this.handleSelectChange.bind(this)}>
            <option value="grapefruit">Grapefruit</option>
            <option value="lime">Lime</option>
            <option value="coconut">Coconut</option>
            <option value="mango">Mango</option>
          </select>
        </label>
        <label>
            <input
                type="checkbox"
                checked={this.state.checkboxValue}
                onChange={this.handleCheckboxValue.bind(this)}
            />
        </label>
        <label>
            <input
                type="number"
                value={this.state.numValue}
                onChange={this.handleNumChange.bind(this)}
            />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

ReactDOM.render(
    <EssayForm/>,document.getElementById("form")
);

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56
• 57
• 58
• 59
• 60
• 61
• 62
• 63
• 64
• 65
• 66
• 67
• 68
• 69
• 70
• 71
• 72
• 73
• 74
• 75
• 76
• 77
• 78
• 79
• 80
• 81
• 82
• 83
• 84
• 85
• 86
• 87
• 88
• 89
• 90
• 91
• 92
• 93
• 94
• 95
• 96
• 97
• 98
• 99
• 100
• 101
• 102
• 103
• 104
• 105
• 106
• 107
• 108
• 109
• 110
• 111
• 112
• 113
• 114
• 115
• 116
• 117
• 118
• 119
• 120
• 121
• 122
• 123
• 124
• 125
• 126
• 127
• 128
• 129
• 130
• 131
• 132
• 133
• 134
• 135
• 136
• 137
• 138
• 139
• 140
• 141
• 142
• 143
• 144
• 145
• 146
• 147
• 148
• 149
• 150
• 151
• 152
• 153
• 154
• 155
• 156
• 157
• 158
• 159
• 160
• 161
• 162
• 163
• 164
• 165
• 166
• 167
• 168
• 169
• 170
• 171
• 172
• 173
• 174
• 175
• 176
• 177
• 178
• 179
• 180
• 181
• 182
• 183
• 184
• 185
• 186
• 187
• 188
• 189
• 190
• 191
• 192
• 193
• 194
• 195
• 196
• 197
• 198
• 199
• 200
• 201
• 202
• 203
• 204
• 205

index.html

<!DOCTYPE html>
<html>
    <meta charset="UTF-8">
    <title>Training</title>
    <body>
        <div id="main"></div>
        <div id="time"></div>
        <div id="rtime"></div>
        <div id="bt"></div>
        <div id="list"></div>
        <div id="form"></div>
        <div id="select"></div>
        <script src="./bundle.js"></script>
    </body>
</html>