首先在学习这门框架前,你需要对以下知识有所了解:
1.原生JS基础
2.CSS基础
3.npm包管理基础
4.webpack构建项目基础
5.ES6规范
以上五个知识点也是目前学习其他前端框架所必须了解的前置任务。
JS和CSS就不多说了,npm是目前最提倡也是占据主导地位的包管理工具,还在用bower或者其他工具的童鞋可以考虑下了。而webpack作为新一代打包工具,已经在前端打包工具中独占鳌头,和browserify相比也有很大优势。至于ES6规范虽然现在主流浏览器还不兼容,但可以使用babel等转换器进行转换。
结合其他的一些主流前端框架,我个人认为构建单页应用有这样三个基本的东西:
组件、路由、状态管理
。那么接下来我就基于这三者来介绍React,当然其中会穿插一些额外的知识点。
组件
React的组件撰写和调用主要依赖于ES6的模块化和JSX的语法,以下是一个例子:
rush:js;">
// main.js
import React from 'react'
import { render } from 'react-dom'
import MyComponent from './component.js'
import './main.css'
// 主组件
class MyDemo extends React.Component {
render() {
return (
<div className="Box">
)
}
}
render((
),document.getElementById('app'))
// component.js
// 子组件
import React from 'react'
export default class MyComponent extends React.Component {
render() {
return (
)
}
}
// main.css
.Box {
width: 100%
}
rush:js;">
import React,{ Component } from 'react'
import { render } from 'react-dom'
import { Router,Route,IndexRoute,Link,
browserHistory } from 'react-router'
const ACTIVE = { color: 'red' }
class App extends Component {
render() {
return (
我的路由
{this.props.children}
)
}
}
class Index extends React.Component {
render() {
return (
Index!
)
}
}
class Users extends React.Component {
render() {
return (
Users
)
}
}
render((
),document.getElementById('app'))
因为上面的实例中我用到了Fetch来进行Ajax交互,所以这里简单介绍下Fetch。
我们可以把Fetch作为下一代Ajax技术,它采用了目前流行的 Promise 方式处理。
{
fetch('../../data.json')
.then((res) => { console.log(res.status);return res.json() })
.then((data) => { this.setState({lists:data.listData}) })
.catch((e) => { console.log(e.message) })
}