webpack学习记录03
2017-06-29 本文已影响22人
33d8e4ec2cc9
要说现在最火的前端框架，大概就是react了，能火成这样，一定是有道理的，我觉得不管是好用，还是不好用，作为一个做web的程序员，至少还是要去了解一下的。今天就稍微介绍一下，react的一些基本思路和语法。
介绍语法之前，先说下我对这个东西的感受。
<!DOCTYPE html>
<html>
<head>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
// ** Our code goes here! **
</script>
</body>
</html>
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
第一眼看上去，嗯。。好好的html和javascript不写，写成这样是要干什么，有什么意义？
很多人应该和我一样，开始看react语法的时候是抗拒的。直到我捣鼓了一个demo出来之后，我才搞清楚作者的意图，再回去看语法的时候觉得茅塞顿开。
先问几个问题
- 当我们打开一个复杂的html文件，你有活下去的勇气去直视吗？
- 遇到这种无法直视的文件，我们一般是怎么处理，比如Rails框架，为什么要分为MVC三个部分？
- 所有的东西都放在一个文件里，除了电脑，有谁能看懂？
这就是我对于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 (
<div>
<Layout />
<Router history={hashHistory}>
<Route path="/" component={Home}/>
<Route path="/about_us" component={AboutUs}/>
</Router>
</div>
);
}
}
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(
<Navbar inverse collapseOnSelect style={{margin: 0}}>
<Navbar.Header>
<Navbar.Brand>
<a href="#">啦啦啦</a>
</Navbar.Brand>
<Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
<Nav pullRight>
<NavItem eventKey={1} href="#">目标人群</NavItem>
<NavItem eventKey={2} href="#">关于我们</NavItem>
</Nav>
</Navbar.Collapse>
</Navbar>
)
}
}
export default Layout
我们都知道写一个顶部的菜单其实需要的html代码的量是非常大的，然而你看这个文件，用了react-bootstrap之后，既表意，代码量也少，你当然也可以继续追溯Navbar标签后面是什么，不过我想看到这里，大家应该明白react的设计思路是什么了
本期就到这里，下期会介绍一下react的使用方法
