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})
- <App title="Merry Chrismtas"/>
props 获取属性代码示例图
states 动态属性获取方法示例图
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()方法代码实例图
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>)
