webpack学习记录03

要说现在最火的前端框架，大概就是react了，能火成这样，一定是有道理的，我觉得不管是好用，还是不好用，作为一个做web的程序员，至少还是要去了解一下的。今天就稍微介绍一下，react的一些基本思路和语法。

介绍语法之前，先说下我对这个东西的感受。

ReactDOM.render(
  
Hello, world!
,
  document.getElementById('example')
);

第一眼看上去，嗯。。好好的html和javascript不写，写成这样是要干什么，有什么意义？
很多人应该和我一样，开始看react语法的时候是抗拒的。直到我捣鼓了一个demo出来之后，我才搞清楚作者的意图，再回去看语法的时候觉得茅塞顿开。

先问几个问题

1. 当我们打开一个复杂的html文件，你有活下去的勇气去直视吗？
2. 遇到这种无法直视的文件，我们一般是怎么处理，比如Rails框架，为什么要分为MVC三个部分？
3. 所有的东西都放在一个文件里，除了电脑，有谁能看懂？

这就是我对于react的第一感受，发挥你自己的想象力，去吧一个页面拆成一个一个子组件，这应该就是react最大的魅力

html标签一共有几种？我也不知道，大概几十种吧。一个静态的页面，大段大段的html，你们有没有想过，有一种语法，能像积木一样，把一堆html标签，变成一个你自己创造的‘标签’，而且你还能帮它起名字, 通过这个你自己造的‘标签’，来换2个div? 4个span? 甚至里面还有另一组你造的标签，于是整个html就像套娃一样，一层一层的

import React, {
  Component
} from 'react';
import {
  Router,
  Route,
  IndexRoute,
  hashHistory
} from 'react-router';
import Home from './components/home/Home';
import AboutUs from './components/AboutUs'
import Layout from './Layout'

class App extends Component {
  render() {
    return (
      

        
        
          
          
        
      
    );
  }
}

export default App;

看到那个layout标签了不，这就是我自己造的，用来表示页面公共部分的一个标签，也表明了这个标签其他页面可能也是要用的。

layout里面是什么内容呢

import React, { Component } from 'react';
import {Navbar, Nav, NavItem, Button, MenuItem, NavDropdown} from 'react-bootstrap';

class Layout extends Component {
    render () {
     return(
          
            
              
                啦啦啦
              
              
            
            
              

                目标人群
                关于我们
              
            
          
     ) 
     
    }
} 

export default Layout

我们都知道写一个顶部的菜单其实需要的html代码的量是非常大的，然而你看这个文件，用了react-bootstrap之后，既表意，代码量也少，你当然也可以继续追溯Navbar标签后面是什么，不过我想看到这里，大家应该明白react的设计思路是什么了

本期就到这里，下期会介绍一下react的使用方法