React与Webpack实战-优快云博客

本文链接：https://blog.youkuaiyun.com/wirenc/article/details/54855100

1 webpack

mkdir chong0kaishixuereact
cd chong0kaishixuereact
npm init
npm install webpack --save-dev
npm install -save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react
npm install --save react react-dom
touch index.html
touch component/component1.js
touch main.js
 ```

cat webpack.config.js

var config = {
   entry: './main.js',

   output: {
      path:__dirname,
      filename: 'index.js',
   },

   devServer: {
      inline: true,
      port: 3000
   },

   module: {
      loaders: [ {
         test: /\.js?$/,
         exclude: /node_modules/,
         loader: 'babel-loader',

         query: {
            presets: ['es2015', 'react']
         }
      }]
   }

}

cat main.js

import React from 'react';
import ReactDOM from 'react-dom';
import Component1 from './component/component1';
 ReactDOM.render(<Component1 />, document.getElementById('index'))

cat index.html

<!DOCTYPE html>
<html>

   <head>
      <meta charset = "UTF-8">
      <title>React App </title>
   </head>

   <body>
      <div id = "index"></div>

   </body>

</html>
 <script src = "index.js"></script>

cat component/component1.js

import React from 'react';

export default class Component1 extends React.Component {
   render() {
      return (
         <div>
            Hello <br />
           component1
         </div>
      );
   }
}

进入项目根目录

webpack 输出 index.js文件

然后运行 npm start

浏览器显示 “component1” 调用组件成功

问题1 调试发现，npm start能编译通过，但WEB空白，中间的错在终端看不出，

解决方法，在chrome devtools 中查

问题2 为何直接 npm start 不能编译成 index.js? 但这个时候没有index.js , index.html 显示还是正常的

2 ES6

1 箭头函数

cat component/component1.js

import React from 'react';

export default class Component1 extends React.Component {

   render() {
   //最简单的 function,一个参数 a
    var foo = a => a ;
   console.log(foo('hihi'));
   //没有参数的直接是空括号
   var foo2 =() =>{
   alert('haha');
   }
   foo2();
   //多个参数要用到小括号,参数间逗号间隔,例如两个数字相加
   var add = (a,b) => a+b;
   console.log(add(1,2));
   //返回对象时需要用小括号包起来，因为大括号被占用为代码块了
   var getHash =() =>{
   return(
   {
   name:'zhangsan',
   age:10
   });
   };
   console.log(getHash());

   //点击事件,
   document.addEventListener('click',event=>{console.log(event);});
      return (

         <div>
           <br />
           component1
         </div>
      );
   }

}

3 类class

vi employee.js

 class Employee{
   //构造 function
   constructor(id,name,job){
   this.id = id;
   this.name = name;
   this.job = job;
   }
   //注意，上面无分号间隔
   getMessage(){
   return this.id + 
   "=>" 
   + this.name
   +"=>"
   +this.job;
   }
}
   //export 是导出类,其他地方可以直接 import 这个类
   //default 只能用一次，是只是当前页用一次，还是其他页也不能用了?
   export default Employee;

vi component/component1.js

import React from 'react';
import  Employee from '../employee.js';


export default class Component1 extends React.Component {

   render() {
   var e1 = new Employee('001','jack','cooker');
   console.log(e1.getMessage());


      return (

         <div>
           <br />
           component1
         </div>
      );
   }

}

常量const和 let 声明

vi component/component1.js

import React from 'react';
import  Employee from '../employee.js';


export default class Component1 extends React.Component {

   render() {
   var e1 = new Employee('001','jack','cooker');
   console.log(e1.getMessage());

    //    {
//  let a = 10;
//  var b = 11;

//  }


// console.log(a);
// console.log(b);

for(let i =0;i<10;i++){}
for(var k=0;k<10;k++){}

//console.log(i);
console.log(k);

      return (

         <div>
           <br />
           component1
         </div>
      );
}
}

JSX

cat main.js

import React from 'react';
import ReactDOM from 'react-dom';

import Component1 from './component/component1';
import Component2 from './component/component2';



  // ReactDOM.render(<Component2 />, document.getElementById('index2'))
 //ReactDOM.render(<Component1 />, document.getElementById('index'))
// ReactDOM.render(
//     <div>
//       <h1>{1+1}</h1>
//     </div>
//     ,
//     document.getElementById('index')


// );


  var arr =[
   <h1> hi</h1>,
   <h2> react is awesome</h2>

   ];

   ReactDOM.render(
   <div>{arr}</div>,document.getElementById('index'));

notice:

Warning: Each child in an array or iterator should have a unique "key" prop. Check the top-level render call using <div>. See https://fb.me/react-warning-keys for more information.
    in h1 我网上查了下，知道是要用 key,但查的例子没办法参考 ，暂时略过,各位留意这里的优化和提高，我自己也要注意以后改正

props和省略号语法

vi component/component2.js

import React,{Component} from 'react';
import ReactDOM from 'react-dom';


// class Component2 extends React.Component {
//    render() {
//    //    //最简单的 function,一个参数 a
//    //  var foo = a => a ;
//    // console.log(foo('hihi'));
//    // //没有参数的直接是空括号
//    // var foo2 =() =>{
//    // alert('haha');
//    // }
//    // foo2();
//    // //多个参数要用到小括号,参数间逗号间隔,例如两个数字相加
//    // var add = (a,b) => a+b;
//    // console.log(add(1,2));
//    // //返回对象时需要用小括号包起来，因为大括号被占用为代码块了
//    // var getHash =() =>{
//    // return(
//    // {
//    // name:'zhangsan',
//    // age:10
//    // });
//    // };
//    // console.log(getHash());

//    // //点击事件,
//    // document.addEventListener('click',event=>{console.log(event);});



//       return (
//          <div>
//             Component2<br />

//          </div>
//       );
//    }
// }





//声明一个组件类，叫 MyTitle
class Component2 extends Component{
    show(){
        console.log(this.props.title);
        console.log(this.props.contents);
        console.log(this.props.name);
    }

    //渲染组件：一个按钮，并可以点击
    //注意 bind(this)的写法，这是 JSX 语法要的
    //如果怕麻烦也可以用箭头 function

    render(){
        return(<button onClick={this.show.bind(this)}>click</button>);

    }
}

//要向组件传递的数据 

var data ={
    title:'this is a little',
    contents:'this is contents'

};
ReactDOM.render(
<Component2 {...data} name ={'my name'} />,
document.getElementById('index')
);

export default Component2;

这里写图片描述
步骤是：1 声明组件： ES6的类声明
2 渲染组件： render用法
渲染方法包括两个参数,一个是组件名称，一个是页面的 id，进一步得想，index.html可以有多个 id吗？不同的 component可以定位不同的 id,然后在 index.html上显示吗？还是main.js是一个大的组件，由很多小组件组合而成，
这就不是 SPA了，多页面这里如何处理

this.props.children

cat component/NodeList.js

'use strict';
import React,{Component} from 'react';
import ReactDOM from 'react-dom';
//声明一个组件类，叫 NodeList
class NodeList extends Component{
    render(){
        return(
        <ul>
            {
                //遍历 this.props.children 节点
            React.Children.map(this.props.children,function(child){
                    return(<li>{child}</li>);
                })
            }
            </ul>
            );
                        <NodeList>
<span> hello</span>
<span> world</span>
</NodeList>;
    }
}

export default NodeList;

cat main.js

import React,{Component} from 'react';
import ReactDOM from 'react-dom';
 import NodeList from './component/NodeList';

 ReactDOM.render(
<NodeList>
<span> hello</span>
<span> world</span>
</NodeList>
    ,document.getElementById('index'));i

state状态机和 refs

cat component/inputstate2.js

'use strict';
import React,{Component} from 'react';
import ReactDOM from 'react-dom';


//声明一个组件类，叫 Search
class Search extends Component{
    checkSth(){
        var inputValue = this.refs.myInput.value;
        alert(inputValue);
    }


    render(){
        return(
<div>
<input type = "text" ref="myInput" />
<button onClick ={this.checkSth.bind(this)}>获取内容</button>
</div>
            );

    }
}

// ReactDOM.render(

// document.getElementById('index')
// );

export default Search;

cat main.js

import React,{Component} from 'react';
import ReactDOM from 'react-dom';
import Search from './component/inputstate2';

  ReactDOM.render(
<Search/>
    ,document.getElementById('index'));
![这里写图片描述](https://img-blog.youkuaiyun.com/20170204145612982?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd2lyZW5j/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)

#综合案例
cat component/box.js

'use strict';
import React,{Component} from 'react';
import ReactDOM from 'react-dom';

//小部件，渲染为 UL 列表
class  Items extends Component{
        render(){
        var arrLi =[];
        for(let i=0;i<this.props.info.length;i++){
            //注意，这不是拼接字符串
            arrLi.push(<li key={i}> {this.props.info[i]}</li>);
        }
        return(<ul>{arrLi}</ul>);
    }
}
//大部件
class Box extends Component{

    constructor(props){
        super(props);
        this.state ={
            list:this.props.sourceData
        }
    }
    checkSth(){
        var arr=[];
        //获取文本信息
        var inputValue = this.refs.myInput.value;
        //获取 props 信息
        var sourceData = this.props.sourceData;
        //选择数据 

        for(let i=0;i<sourceData.length;i++){
            if(sourceData[i].indexOf(inputValue)!= -1){
                arr.push(sourceData[i]);
            }
        }
        //更新状态机

        this.setState({list:arr});
    }

    render(){
        return(
        <div>
<input type="text" ref="myInput" onKeyUp={this.checkSth.bind(this)} />
<Items info={this.state.list} />
</div>
        );
    }
};
export default Box;

cat main.js

import React,{Component} from 'react';
import ReactDOM from 'react-dom';
import Box from './component/Box';
 var data = ['jackson','milly','john smith','make','denny','emili','jenny'];
 ReactDOM.render(
<Box sourceData={data}/>
    ,document.getElementById('index'));