react学习笔记1

1--react优势

组件化-便于分工、合作

虚拟DOM-性能高

跨平台-移动端

最强，即react核心：组件化、状态

2—react缺点

学习曲线特别陡

设计属性有点特别

3—react技术栈

react主体、webpack、flex、react-route、redux（view 层）、Mocha（测试）、Istanbul（覆盖率）、

4—JSX：

增强型的js语法—html代码可以直接放在js里、需要编译、babel

Ps:有且只有一个父元素；模板字符串

Babel和react通过Git Bash 安装过程：

$ bower install babel命令可以用于下载babel

$ bower install react命令可以用于下载react

小栗子：在div内渲染span元素

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="./js/react.js" charset="utf-8"></script>
    <script src="./js/react-dom.js" charset="utf-8"></script>
    <script src="./js/browser.js" charset="utf-8"></script>
    <script type="text/babel">
         window.onload=function(){
             var oDiv=document.getElementById("div1");
             ReactDOM.render(         

//向页面渲染东西，第一个参数为需要渲染的东西，第二个参数为在哪里渲染该东西
               <span>666</span>,
                     oDiv
             );
         };
    </script>
</head>
<body>
   <div id="div1">
   </div>
</body>
</html>

5—组件

（1）定义组件—组件==class类

class 名字 extends React.Component{

render(){

return <span>666</span>;

}

（2）使用组件

跟标签一样使用

ReactDOM.render(

   <span>666</span>,

   oDiv

);

ReactDOM.render(

  <Com/>,

  oDiv

);

小栗子：

<!DOCTYPE html> 
<html> 
<head lang="en"> 
    <meta charset="UTF-8"> 
    <title></title> 
    <script src="./js/react.js" charset="utf-8"></script> 
    <script src="./js/react-dom.js" charset="utf-8"></script> 
    <script src="./js/browser.js" charset="utf-8"></script> 
    <script type="text/babel"> 
        class Comp extends React.Component{    //这里组件是用class的形式实现  //继承react的组件,  //React.Component为帮助我们写组件的父类 
                                              //里面至少要有一个render()方法，返回自己需要的东西，作为组件，须在页面上能渲染出来 
            render(){                        //render()当需要渲染组件时，需要告诉它渲染什么 
                 return <span>666</span>; 
             } 
        } 
        window.onload=function(){ 
            var oDiv=document.getElementById("div1"); 
            ReactDOM.render( 
                    <Comp/>, 
                    oDiv 
            ); 
        }; 
    </script> 
</head> 
<body> 
  <div id="div1"> 
  </div> 
</body> 
</html>

小栗子：

<!DOCTYPE html> 
<html> 
<head lang="en"> 
    <meta charset="UTF-8"> 
    <title></title> 
    <script src="./js/react.js" charset="utf-8"></script> 
    <script src="./js/react-dom.js" charset="utf-8"></script> 
    <script src="./js/browser.js" charset="utf-8"></script> 
    <script type="text/babel"> 
      class Comp extends React.Component{ 
          render(){ 
              return <span>我的名字为{this.props.name},我今年{this.props.age}岁 </span>; 
          } 
      } 
      window.onload=function(){ 
          var oDiv=document.getElementById("div1"); 
          ReactDOM.render( 
                  <Comp name="blue" age="16" />, 
                  oDiv 
          ); 
      } 
    </script> 
</head> 
<body> 
    <div id="div1"> 
    </div> 
</body> 
</html>

Ps：{}表示模板，需要渲染的东西放在该模板中

6--属性-不变的、状态-可变的

（1）状态是可变的

在构造函数constructor里面可以通过this.state{ }直接进行初始化；但在其他方法里面，则需要使用react自带的方法，即this.setState({ });

（2）事件大小写不能乱

onChange、onClick、、、、、

（3）绑定事件

onChange={this.fn.bind(this)}

（4）构造函数

当用constructor的时候，必须用super父类，即需要先完成父类函数里的构造，才能再完成自身函数的构造。constructor用于初始化状态。

小栗子の输入框改变的渲染：

<!DOCTYPE html> 
<html> 
<head lang="en"> 
    <meta charset="UTF-8"> 
    <title></title> 
    <script src="./js/react.js" charset="utf-8"></script> 
    <script src="./js/react-dom.js" charset="utf-8"></script> 
    <script src="./js/browser.js" charset="utf-8"></script> 
    <script type="text/babel"> 
      class Comp extends React.Component{ 
          constructor(...args){ 
              super(...args);   //超类、父类，需先完成父类的构造函数,将接收到的参数都传给父类 
              this.state={value:''}; 
          } 
          fn(ev){ 
                this.setState({ 
                    value:ev.target.value 
             }); 
          } 
          render(){ 
              return <div> 
                <input type="text" onChange={this.fn.bind(this)} /> 
                <span>{this.state.value}</span> 
              </div>; 
          } 
      } 
        window.onload=function(){ 
            var oDiv=document.getElementById("div1"); 
            ReactDOM.render( 
              <Comp/>, 
                oDiv 
            ); 
        } 
    </script> 
</head> 
<body> 
  <div id="div1"> 
  </div> 
</body> 
</html>

小栗子の点击显示隐藏：

<!DOCTYPE html> 
<html> 
<head lang="en"> 
    <meta charset="UTF-8"> 
    <title></title> 
    <script src="./js/react.js" charset="utf-8"></script> 
    <script src="./js/react-dom.js" charset="utf-8"></script> 
    <script src="./js/browser.js" charset="utf-8"></script> 
   <style media="screen"> 
       .box{ 
           width:200px; 
           height:200px; 
           background: chartreuse; 
       } 
   </style> 
    <script type="text/babel"> 
        class ShowHide extends React.Component{ 
            constructor(...args){   //构造函数，用于状态的初始化
                super(...args); 
                this.state={display:'block'}; 
            } 
            fn(){           //回调函数，用于事件处理，状态改变处理
              this.setState({ 
                  display:this.state.display=='block'?'none':'block' 
              }); 
            } 
            render(){       //渲染函数，将组件或虚拟dom渲染到真实的dom上，交给浏览器处理
                return <div> 
                   <input type="button" value="显示隐藏" onClick={this.fn.bind(this)} /> 
                   <div className="box" style={{display:this.state.display}}></div> 
                </div>; 
            } 
        } 
        window.onload=function(){  //定义的组件拿来用 
            var oDiv=document.getElementById("div1"); 
            ReactDOM.render( 
               <ShowHide/>,           //需要渲染的组件
               oDiv                   //组件渲染的位置
            ); 
        }; 
    </script> 
</head> 
<body> 
 <div id="div1"> 
 </div> 
</body> 
</html>

小栗子の时钟：

<!DOCTYPE html> 
<html> 
<head lang="en"> 
    <meta charset="UTF-8"> 
    <title></title> 
    <script src="./js/react.js" charset="utf-8"></script> 
    <script src="./js/react-dom.js" charset="utf-8"></script> 
    <script src="./js/browser.js" charset="utf-8"></script> 
    <script type="text/babel"> 
        class Clock extends React.Component{ 
            constructor(...args){ 
                super(...args); 
                this.state={h:0,m:0,s:0}; 
                var _this=this; 
                setInterval(function(){ 
                    _this.tick(); 
                },1000); 
            } 
                componentDidMount(){  //已经创建完了，再执行tick() 
                    this.tick(); 
                } 
            tick(){ 
                var oDate=new Date(); 
                this.setState({ 
                    h:oDate.getHours(), 
                    m:oDate.getMinutes(), 
                    s:oDate.getSeconds(), 
                }); 
            } 
            render(){ 
                return <div> 
                  <span>{this.state.h}</span>: 
                  <span>{this.state.m}</span>: 
                  <span>{this.state.s}</span> 
                </div>; 
            } 
        } 
        window.onload=function(){ 
            var oDiv=document.getElementById("div1"); 
            ReactDOM.render( 
              <Clock />, 
                oDiv 
            ); 
        }; 
    </script> 
</head> 
<body> 
   <div id="div1"> 
   </div> 
</body> 
</html>

7—组件-生存周期

componentWillMount() 创建之前

componentDidMount() 创建之后

componentWillUpdate() 更新之前

componentDidUpdate() 更新之后

componentWillUnmount() 卸载之前

componentWillReceiveProps() 组件参数更新

小栗子1：

<!DOCTYPE html> 
<html> 
<head lang="en"> 
    <meta charset="UTF-8"> 
    <title></title> 
    <script src="./js/react.js" charset="utf-8"></script> 
    <script src="./js/react-dom.js" charset="utf-8"></script> 
    <script src="./js/browser.js" charset="utf-8"></script> 
    <script type="text/babel"> 
         class Comp extends React.Component{ 
             componentWillMount(){ 
                 console.log("即将创建完成"); 
             } 
             componentDidMount(){ 
                 console.log("刚刚创建完成"); 
             } 
             render(){ 
                 return <span>666</span>; 
             } 
         } 
        window.onload=function(){ 
            var oDiv=document.getElementById("div1"); 
            ReactDOM.render( 
              <Comp />, 
              oDiv 
            ); 
        } 
    </script> 
</head> 
<body> 
  <div id="div1"> 
  </div> 
</body> 
</html>

小栗子2：

<!DOCTYPE html> 
<html> 
<head lang="en"> 
    <meta charset="UTF-8"> 
    <title></title> 
    <script src="./js/react.js" charset="utf-8"></script> 
    <script src="./js/react-dom.js" charset="utf-8"></script> 
    <script src="./js/browser.js" charset="utf-8"></script> 
    <script type="text/babel"> 
         class Comp extends React.Component{ 
               componentWillUnmount(){ 
                 console.log("即将销毁"); 
             } 
             render(){ 
                 return <span>666</span>; 
             } 
         } 
        window.onload=function(){ 
            var oDiv=document.getElementById("div1"); 
            var i=0; 
            document.onclick=function(){ 
                i++; 
                if(i%2){ 
                    ReactDOM.render( 
                            <Comp/>, 
                            oDiv 
                    ); 
                }else{ 
                    ReactDOM.render( 
                    <div>qq</div>, 
                      oDiv 
                ); 
                } 
            } 
        } 
    </script> 
</head> 
<body> 
  <div id="div1"> 
  </div> 
</body> 
</html>

8—组件重用、父子组件间通信

小栗子：

<!DOCTYPE html> 
<html> 
<head lang="en"> 
    <meta charset="UTF-8"> 
    <title></title> 
    <script src="./js/react.js" charset="utf-8"></script> 
    <script src="./js/react-dom.js" charset="utf-8"></script> 
    <script src="./js/browser.js" charset="utf-8"></script> 
    <script type="text/babel"> 
         class ChildComp extends React.Component{ 
             componentWillReceiveProps(){ 
                 console.log("参数更新了"); 
             } 
             render(){ 
                 return <span>{this.props.name}</span>; 
             } 
         } 
         class ParentComp extends React.Component{ 
            constructor(...args){ 
                super(...args); 
                this.state={i:0}; 
            } 
             fn(){ 
                 this.setState({ 
                     i:this.state.i+1 
                 }); 
             } 
             render(){
                 return <div> 
                 <input type="button" value="click" onClick={this.fn.bind(this)}/> 
                 <ChildComp name={this.state.i} /> 
               </div>; 
             } 
         } 
        window.onload=function(){ 
            var oDiv=document.getElementById("div1"); 
           ReactDOM.render( 
             <ParentComp/>, 
             oDiv 
            ); 
        }; 
    </script> 
</head> 
<body> 
  <div id="div1"> 
  </div> 
</body> 
</html>

小栗子：

<!DOCTYPE html> 
<html> 
<head lang="en"> 
    <meta charset="UTF-8"> 
    <title></title> 
    <script src="./js/react.js" charset="utf-8"></script> 
    <script src="./js/react-dom.js" charset="utf-8"></script> 
    <script src="./js/browser.js" charset="utf-8"></script> 
    <script type="text/babel"> 
        class Item extends React.Component{  //子组件 
            constructor(...args){ 
                super(...args); 
            } 
            render(){ 
                return <li>{this.props.value}</li>; 
            } 
        } 
        class List extends React.Component{   //父组件 
            constructor(...args){ 
                super(...args); 
                this.state={arr:[12,6,8,9]}; 
            } 
            fn(){ 
               this.setState({ 
                   arr:this.state.arr.concat([Math.random()]) 
               }); 
            } 
            render(){ 
                var result=[]; 
                var arr=this.state.arr; 
               /* for(var key in arr){ 
                    result.push(<Item value={arr[key]}/>); 
                }*/ 
                for(var i=0;i<arr.length;i++){ 
                    result.push(<Item key={i} value={arr[i]}/>);  //key用于识别不同的标签，已经存在的就不用再创建了，重新利用，只要更新里面的内容即可 
                } 
                return <ul> 
                        <input type="button" value="按钮" onClick={this.fn.bind(this)}/> 
                {result} 
                  </ul> 
            } 
        } 
        window.onload=function(){ 
            var oDiv=document.getElementById("div1"); 
            ReactDOM.render( 
                    <List />, 
                    oDiv 
            ) 
        } 
    </script> 
</head> 
<body> 
  <div id="div1"> 
  </div> 
</body> 
</html>

9—react输出成组元素

首先将元素push进数组

arr.push(<Item/>);//Item为组件

arr.push(<Item/>);

然后，直接将数组渲染出来

<ul>

{arr}

</ul>

10—组件内的节点（Node）

一切对属性的修改，利用setState，激活重新渲染

ref参数，类似于id

refs内存在着所有节点

<!DOCTYPE html> 
<html> 
<head lang="en"> 
    <meta charset="UTF-8"> 
    <title></title> 
    <script src="./js/react.js" charset="utf-8"></script> 
    <script src="./js/react-dom.js" charset="utf-8"></script> 
    <script src="./js/browser.js" charset="utf-8"></script> 
    <script src="./js/jquery-3.1.1.js" charset="utf-8"></script> 
    <script type="text/babel"> 
        class Title extends React.Component{ 
            constructor(...args){ 
                super(...args); 
            } 
            fn(){ 
              /* alert(this.refs["s1"]);*/ 
            /*    var oS=this.refs["s1"]; 
                oS.style.color="red";*/ 
                $(this.refs['s1']).css('color','red'); 
            } 
            render(){ 
                return <div> 
                <input type="button" value="按钮" onClick={this.fn.bind(this)} /> 
                <span ref="s1">666</span> 
             </div>; 
            } 
        } 
        $(function(){ 
           ReactDOM.render( 
                   <Title/>, 
                   $('#div1')[0] 
           ); 
        }); 
    </script> 
</head> 
<body> 
    <div id="div1"> 
    </div> 
</body> 
</html>

小栗子の拖拽（状态方式）：

<!DOCTYPE html> 
<html> 
  <head> 
    <meta charset="utf-8"> 
    <title></title> 
    <script src="js/browser.js" charset="utf-8"></script> 
    <script src="js/react.js" charset="utf-8"></script> 
    <script src="js/react-dom.js" charset="utf-8"></script> 
    <script src="js/jquery-3.1.1.js" charset="utf-8"></script> 
    <style media="screen"> 
      .box {width:200px;height:200px;background:#CCC;position:absolute;} 
    </style> 
    <script type="text/babel"> 
    class Drag extends React.Component{ 
      constructor(...args){ 
        super(...args); 
        this.state={x: 0, y: 0}; 
      } 
      fn(ev){ 
        var disX=ev.pageX-this.state.x; 
        var disY=ev.pageY-this.state.y; 
        var _this=this; 
        document.onmousemove=function (ev){ 
          _this.setState({ 
            x: ev.pageX-disX, 
            y: ev.pageY-disY 
          }); 
        }; 
        document.onmouseup=function (){ 
          document.onmousemove=null; 
          document.onmouseup=null; 
        }; 
      } 
      render(){ 
        return <div style={{left: this.state.x+'px', top: this.state.y+'px'}} className="box" onMouseDown={this.fn.bind(this)}> 
          11111 
        </div>; 
      } 
    } 
    $(function (){ 
      ReactDOM.render( 
        <Drag />, 
        $('blue-view')[0] 
      ); 
    }); 
    </script> 
  </head> 
  <body> 
    <blue-view></blue-view> 
  </body> 
</html>

Ps:$(function(){ }) 等价于 $(document).ready(function(){ })

（1）react只提供组件和状态，可以和原生及其他库配合使用

（2）组件内节点：

ref=”类似于id”

this.refs[‘ref名字’] //得到的即为原生对象

11—表单问题

（1）value值，表单中的默认值应该取defaultValue，这样输入框不会成为只读模式

<!DOCTYPE html> 
<html> 
<head lang="en"> 
    <meta charset="UTF-8"> 
    <title></title> 
    <script src="js/browser.js" charset="utf-8"></script> 
    <script src="js/react.js" charset="utf-8"></script> 
    <script src="js/react-dom.js" charset="utf-8"></script> 
    <script src="js/jquery-3.1.1.js" charset="utf-8"></script> 
    <script type="text/babel"> 
      class UserLoginForm extends React.Component{ 
         render(){ 
           return <form action="http://baidu.com/" method="get">
用户名：<input type="text" name="username" defaultValue={this.props.a} /> 
              <input type="submit" value="提交" /> 
           </form>; 
          } 
      } 
        $(function(){ 
            ReactDOM.render( 
              <UserLoginForm a="blue" />, 
                    $("blue-view")[0] 
            ); 
        }) 
    </script> 
</head> 
<body> 
   <blue-view></blue-view> 
</body> 
</html>

（2）用checked问题，改为defaultChecked，否则就不能自由更改了

<!DOCTYPE html> 
<html> 
<head lang="en"> 
    <meta charset="UTF-8"> 
    <title></title> 
    <script src="js/browser.js" charset="utf-8"></script> 
    <script src="js/react.js" charset="utf-8"></script> 
    <script src="js/react-dom.js" charset="utf-8"></script> 
    <script src="js/jquery-3.1.1.js" charset="utf-8"></script> 
    <script type="text/babel"> 
      class UserLoginForm extends React.Component{ 
        render(){ 
           return <form action="http://baidu.com/" method="get"> 
       用户名：<input type="text" name="username"defaultValue={this.props.a} /><br /> 
       是否接收邮件：<input type="checkbox" defaultChecked="true" /><br/> 
                       <input type="submit" value="提交" /> 
           </form>; 
          } 
      } 
        $(function(){ 
            ReactDOM.render( 
              <UserLoginForm a="blue" />, 
                    $("blue-view")[0] 
            ); 
        }) 
    </script> 
</head> 
<body> 
   <blue-view></blue-view> 
</body> 
</html>

12—阻止事件冒泡

<!DOCTYPE html> 
<html> 
<head lang="en"> 
    <meta charset="UTF-8"> 
    <title></title> 
    <script src="js/browser.js" charset="utf-8"></script> 
    <script src="js/react.js" charset="utf-8"></script> 
    <script src="js/react-dom.js" charset="utf-8"></script> 
    <script src="js/jquery-3.1.1.js" charset="utf-8"></script> 
    <script type="text/babel"> 
        class TmpComp extends React.Component{ 
            constructor(...args){ 
                super(...args); 
            } 
            fn1(){ 
                alert("父级"); 
            } 
            fn2(ev){ 
                alert("子级"); 
                ev.nativeEvent.stopImmediatePropagation();//阻止冒泡 
            } 
            render(){ 
                return <div onClick={this.fn1.bind(this)}> 
        <div onClick={this.fn2.bind(this)}>666</div> 
        </div> 
        } 
        } 
        $(function(){ 
            ReactDOM.render( 
            <TmpComp />, 
                    $('blue-view')[0] 
            ); 
        }) 
    </script> 
</head> 
<body> 
   <blue-view> 
   </blue-view> 
</body> 
</html>

13—组件间通信

（1）父级-->子级

   <!DOCTYPE html> 
<html> 
<head lang="en"> 
    <meta charset="UTF-8"> 
    <title></title> 
    <script src="js/browser.js" charset="utf-8"></script> 
    <script src="js/react.js" charset="utf-8"></script> 
    <script src="js/react-dom.js" charset="utf-8"></script> 
    <script src="js/jquery-3.1.1.js" charset="utf-8"></script> 
    <script type="text/babel"> 
     class Child extends React.Component{ 
         constructor(...args){ 
             super(...args); 
         } 
         render(){ 
             return <div>{this.props.a}</div>; 
         } 
     } 
     class Parent extends React.Component{ 
            constructor(...args){ 
                super(...args); 
                this.a=12; 
            } 
         render(){ 
             return <div> 
                     <div>aa</div> 
                     <Child a={this.a} /> 
                    <div>bbb</div> 
                     </div>; 
         } 
        } 
        $(function(){ 
            ReactDOM.render( 
              <Parent />, 
               $('blue-view')[0] 
            ); 
        }) 
    </script> 
</head> 
<body> 
   <blue-view></blue-view> 
</body> 
</html>

父级往子级放东西

（2）子级-->父级

<!DOCTYPE html> 
<html> 
<head lang="en"> 
    <meta charset="UTF-8"> 
    <title></title> 
    <script src="js/browser.js" charset="utf-8"></script> 
    <script src="js/react.js" charset="utf-8"></script> 
    <script src="js/react-dom.js" charset="utf-8"></script> 
    <script src="js/jquery-3.1.1.js" charset="utf-8"></script> 
    <script type="text/babel"> 
     class Child extends React.Component{ 
         constructor(...args){ 
             super(...args); 
             this.num=66; 
         } 
         render(){ 
             /*alert(this.props.cb);//测试子级的属性里是否有父级的cb*/ 
            this.props.cb(this.num); 
            //通过回调函数将子级里的num值传给父级的cb属性 
             return <div>{this.props.a}</div>; 
         } 
     } 
     class Parent extends React.Component{ 
            constructor(...args){ 
                super(...args); 
                this.a=12; 
            } 
         fn(num){ //父级的回调函数，接收num 
             alert(num); 
         } 
         render(){ 
             return <div> 
                     <div>aa</div> 
                     <Child cb={this.fn.bind(this)} /> 
                    <div>bbb</div> 
                     </div>; 
         } 
        } 
        $(function(){ 
            ReactDOM.render( 
              <Parent />, 
               $('blue-view')[0] 
            ); 
        }) 
    </script> 
</head> 
<body> 
   <blue-view></blue-view> 
</body> 
</html>

14—webpack

选择webpack原因：

（1）babel需实时编译，速度慢

（2）测试麻烦

（3）自己搭建服务器

（4）热更新

Webpack：

一种打包工具

（a）下载webpack工具：

（1）可以先安装淘宝镜像cnpm：

npm install cnpm -g --registry=https://registry.npm.taobao.org

（2） cnpm install –g webpack //webpack的cli环境

（3）cnpm install –g webpack-dev-server //开发用的服务器，webpack自带服务器，cli

（4）cnpm init 产生一个package.json文档

{ 
  "name": "react_webpack", 
  "version": "1.0.0", 
  "main": "index.js", 
  "dependencies": { 
    "babel-cli": "^6.24.1", 
    "babel-preset-env": "^1.4.0", 
    "babel-preset-es2015": "^6.24.1", 
    "vue": "^2.2.6", 
    "webpack": "^2.4.1" 
  }, 
  "devDependencies": { 
    "babel-cli": "^6.24.1", 
    "css-loader": "^0.28.0", 
    "style-loader": "^0.16.1" 
  }, 
  "scripts": { 
    "test": "echo \"Error: no test specified\" && exit 1" 
  }, 
  "author": "sxt", 
  "license": "ISC", 
  "description": "" 
}

（b）各种依赖库：

Babel相关的库

（1）cnpm install babel-core //后台编译babel的工具

（2）cnpm install babel-core –save-dev 或者 cnpm install babel-core –D

此时package.json文档多了一个babel-core依赖库

{ 
  "name": "hello", 
  "version": "1.0.0", 
  "main": "index.js", 
  "dependencies": { 
    "babel-cli": "^6.24.1", 
    "babel-preset-env": "^1.4.0", 
    "babel-preset-es2015": "^6.24.1", 
    "vue": "^2.2.6", 
    "webpack": "^2.4.1" 
  }, 
  "devDependencies": { 
    "babel-cli": "^6.24.1", 
    "babel-core": "^6.24.1", 
    "css-loader": "^0.28.0", 
    "style-loader": "^0.16.1" 
  }, 
  "scripts": { 
    "test": "echo \"Error: no test specified\" && exit 1" 
  }, 
  "author": "sxt", 
  "license": "ISC", 
  "description": "" 
}

（3）cnpm install babel-preset-es2015 –D //babel对于2015的一个预设，可以理解为简单的configure

（4）cnpm install babel-loader -D //帮助babel加载的一个环境，babel加载器

Webpack本身：

cnpm install webpack –D //webpack的本地依赖库

cnpm install webpack-dev-server –D //webpack服务器的本地依赖库，开发库，可以实时更新热更新

cnpm install babel-preset-react –D //babel对react的预设

cnpm install react –D //react库本身

cnpm install react-dom –D //react-dom本身

cnpm install react-hot-loader –D //react热更新

cnpm install style-loader –D

cnpm install css-loader -D

所有需要的package.json文档：

{ 
  "name": "react_webpack", 
  "version": "1.0.0", 
  "description": "", 
  "main": "index.js", 
  "scripts": { 
    "test": "echo \"Error: no test specified\" && exit 1" 
  }, 
  "author": "sxt", 
  "license": "ISC", 
  "devDependencies": { 
    "babel-core": "^6.24.1", 
    "babel-loader": "^7.0.0", 
    "babel-preset-es2015": "^6.24.1", 
    "babel-preset-react": "^6.24.1", 
    "css-loader": "^0.28.1", 
    "react": "^15.5.4", 
    "react-dom": "^15.5.4", 
    "react-hot-loader": "^1.3.1", 
    "style-loader": "^0.17.0", 
    "webpack": "^2.5.1", 
    "webpack-dev-server": "^2.4.5" 
  } 
}

Ps:上面各种依赖库可以直接用cnpm install 即可下载安装,即把node_modules文件夹删掉，保留package.json文件，在命令行输入cnpm install，则会根据package.json文件自动下载该文件内用到的依赖。

（c）webpack的配置文件

（1）入口 entry

（2）出口output

（3）source-map

（4）指定loaderss

devtool: 开发工具

Webpack.config.js //webpack的配置文件

module.exports={ 
    entry:'./index.js', 
    output:{ 
        path:__dirname, 
        filename:'bundle.js' 
    }, 
    devtool:'source-map', 
    module:{ 
        loaders:[ 
            {test:/\.css$/,loader:'style!css'}, 
            {test:/\.js$/,loader:'react-hot-loader!babel-loader',exclude:/node_modules/}, 
        ] 
    } 
};

.babelrc //babel的预设文件

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

启动服务器命令：

方法1：直接在相应文件夹目录下输入：webpack

可以直接将文件打包。利用webpack打包，可以理解为将各种依赖库都重新放到一个新的文件bundle.js中了，在我们的html中，只需要引入这一个文件，省得引入那么多依赖库了。作为入口的index.js直接跟react一样写

命令行中：webpack-dev-server –hot 可以实现页面的实时更新热更新

方法2：

例子：

1.html

<!DOCTYPE html> 
<html> 
<head lang="en"> 
    <meta charset="UTF-8"> 
    <title></title> 
    <script src="bundle.js"></script> 
    <script type="text/babel"> 
        window.onload=function(){ 
            var oView=document.getElementsByTagName('blue-view')[0]; 
            ReactDOM.render( 
                    <Test />, 
                    oView 
            ) 
        } 
    </script> 
</head> 
<body> 
  <blue-view></blue-view> 
</body> 
</html>

Index.js：

const React=require('React'); 
class Test extends React.Component{ 
    constructor(...args){ 
    super(...args); 
    this.state={value:''}; 
} 
fn(){ 
   this.setState({ 
      value:this.refs['txt1'].value 
   }); 
} 
render(){ 
    return <div> 
        <input ref="txt1" type="text" onChange={this.fn.bind(this)} /> 
       <span>{this.state.value}</span> 
     </div>; 
} 
}

其中，bundle.js是由webpack打包得到的，可以理解为webpack将.json文件中所需要用到的依赖都整合到了bundle.js，这样只有引入一个bundle.js文件就可以了。

posted @ 2017-05-11 07:34 安静的嘶吼阅读(276) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

艳阳天

临渊羡鱼不如退而结网

react学习笔记1

公告