ReactJs

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值如下：

使用

1.渲染

ReactDOM.render(参数1:渲染的内容(可以接受变量);参数2:需要渲染的地方);
html片段：

js片段:

2.组件

• 原生组件 : let h1 =

  h1标题

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

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

• 自定义组件语法2：
  let List = function(){ return (

  圣诞快乐

  ) }

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

  组件

  )

// 使用自定义组件时，首字母大写 let Zujian = React.create({ render: function(){ return (

自定义组件

) } })； // 页面渲染使用 ReactDOM.render(,document.getElementById('container'));

组件嵌套使用

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

// 子组件 let SmallBox = React.createClass({ render:function(){ return (

这是一个小盒子

) } }) // 父组件 let BigBox = React.createClass({ render:function(){ return (

这是一个大盒子

// 父组件嵌套使用子组件

) } })

列表渲染

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

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

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

组件设置样式(style)

外部引入样式表

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

内部样式表

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

let StyleSheet = { title:{ fontSize:24px, fontWeight:700 } } //使用：

我是一个标签

行内样式

• 直接在标签内部定义，需要注意的是在样式表的{}内部需要再使用{}包裹样式
  

  hello react

componentDidMount()

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

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

1.React.creatClass({ render:function(){ return(

定义一个组件

) } }) 2.// 先引入react的组件模块（Component） import React,{Component} from 'react'; // 定义组件 class App extends Component{ render(){ return(

定义组件

) } }

获取组件属性 props

• props 可以获取组件属性
  • 
    获取属性：{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})=>(

APP

• home
• list

{children}

) let Home=()=>(

这是home页面

) let List=()=>(

这是list页面

) // 编辑路由 let router=( //默认显示页面 如果有子路由的话，把单标签改为双标签，把子路由插进去 )