reactJs 用于创建用户界面的框架

• 使用jsx语法（javascript + xml）

页面引入：

• 页面依次引入react.js
• 引入 react-dom.js
• 最后引入 browser.js

jsx语法只能在type=text/babel的script标签内书写！！！
xml中的标签可以自定义,可以使用class属性等
由于使用了jsx语法(javascript+Xml,browser.js提供)，所以script的type值如下： <script type="text/babel"></script>

使用

1.渲染

ReactDOM.render(参数1:渲染的内容(可以接受变量);参数2:需要渲染的地方);
html片段： <div id="container"></div> js片段: <script type="text/babel"> ReactDOM.render(<h1>hello react</h1>,document.getElementById('container')); </script>

2.组件

• 原生组件 : let h1 = <h1>h1标题 </h1>

• 自定义组件 : 使用 React.createClass()方法自定义组件

  • 自定义组件使用时，首字母需要大写，并且是个标签(可单可双)，需要闭合

• 自定义组件语法2：
  let List = function(){ return (<h1>圣诞快乐</h1>) }

• ES6语法定义组件：
  let List = () => (<h1>组件</h1>)

// 使用自定义组件时，首字母大写 let Zujian = React.create({ render: function(){ return (<div>自定义组件</div>) } })； // 页面渲染使用 ReactDOM.render(<Zujian/>,document.getElementById('container'));

组件嵌套使用

• 组件之间可以互相嵌套使用

// 子组件 let SmallBox = React.createClass({ render:function(){ return ( <div>这是一个小盒子</div> ) } }) // 父组件 let BigBox = React.createClass({ render:function(){ return ( <div> <h1>这是一个大盒子</h1> // 父组件嵌套使用子组件 <SmallBox/> <SmallBox/> <SmallBox/> <SmallBox/> </div> ) } })

列表渲染

• 1.定义一个数组，必须是组件数组，可以直接在组件内部定义也可以在全局定义
• 2.在组件内部使用{组件名}渲染即可

  注意：定义数组时，需要给数组添加一个key值，作为遍历的依据，且key值不能相等
let list = [
  <h3 key={1}>aaa</h3>
  <h3 key={2}>bbb</h3>
              ...
]

• 渲染列表时，必须在组件外部使用一个容器包裹起来
  <div>{list}</div>

组件设置样式(style)

外部引入样式表

• 1.建立单独的css文件，css内写好样式
• 2.通过import Style(自定义名) from 'css文件的路径' 来引入css文件，定义变量名接受
• 给标签加上 className = {变量名.class名}即可

<div className = {Style.container}>

内部样式表

• js文件内部定义样式，注意的是font-size这一类的格式的写法需要写成fontSize的形式！！！

let StyleSheet = { title:{ fontSize:24px, fontWeight:700 } } //使用：<h2 style={StyleSheet.title}>我是一个标签<h2>

行内样式

• 直接在标签内部定义，需要注意的是在样式表的{}内部需要再使用{}包裹样式
  <h3 style={ {color:'red'} }>hello react<h3>

componentDidMount()

• 组件生命周期：使用componentDidMount()方法可以操作组件的属性；

项目中使用react使用react定义组件

1.React.creatClass({ render:function(){ return(<div>定义一个组件</div>) } }) 2.// 先引入react的组件模块（Component） import React,{Component} from 'react'; // 定义组件 class App extends Component{ render(){ return(<div>定义组件</div>) } }

获取组件属性 props

• props 可以获取组件属性
  • <App title="Merry Chrismtas"/>
    获取属性：{this.props.title} 即可获取APP组件的title属性
    动态属性：使用state方法 {this.state.title}
    设置动态属性：使用setState({title:abc})

props 获取属性代码示例图

props获取组件属性.jpg

states 动态属性获取方法示例图

states 动态属性获取.png

react接口获取数据

直接在componentDidMount()中使用ajax请求数据；即组件加载完成之后的生命周期内调用ajax获取数据；

使用 fetch()方法 获取接口数据

• 安装命令：npm install whatwg-fetch --save

遍历小方法:map ：
datas.map(function(item){ console.log(item); // item 即数组中的每一个元素 })

fetch(url).then(function(res){...}).then(function(body){......}); // 下一个then能获取到上个then的返回值

fetch()方法代码实例图

fetch方法请求数据.png

React路由

路由先引入路由模块

• 导入模块 ：
  import React,{Component} from 'react'; import ReactDOM,{render} from 'react-dom'; import { Router, Route, IndexRoute, Link, hashHistory,IndexLink, browserHistory } from 'react-router'
• 定义路由：

import {Router,Route,IndexRoute,Link,hashHistory,IndexLink,browserHistory} from 'react-router' // hashHistory与browserHistory的区别：跳转时url是否显示# const ACTIVE={color:'red'}//选中的样式 let App=({children})=>( <div> <h1>APP</h1> <ul> <li><Link to="/home" activeStyle={ACTIVE}>home</Link></li> <li><Link to="/list" activeStyle={ACTIVE}>list</Link></li> </ul> {children} </div>) let Home=()=>( <div> <h1>这是home页面</h1> </div>) let List=()=>(<div><h1>这是list页面</h1> </div>) // 编辑路由 let router=(<Router history={hashHistory})> <Router path="/" component={App}> <IndexRouter component={Home}/>//默认显示页面 <Route path="/home" component={Home}/> 如果有子路由的话，把单标签改为双标签，把子路由插进去 <Route path="/list" component={List}> <IndexRouter component={One}/> <Route path="/list/one" component={One}/> </Route> </Router> </Router>)