ReactJs

作者: 立早人青小超人 | 来源:发表于2016-12-28 22:21 被阅读0次

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>)

相关文章

  • React 生态系

    ReactJS ReactJS 是 Facebook 推出的 JavaScript 函式库,若以 MVC 框架来看...

  • 2019-03-21

    Reactjs javaScript

  • 一、React入门

    官网: 英文官网: https://reactjs.org/[https://reactjs.org/] 中文官网...

  • ReactJS:支持React开发,提供JSX代码提示,高亮显示

    ReactJS:支持React开发,提供JSX代码提示,高亮显示,ReactJS官方介绍 1、cdm→ compo...

  • 前端-08-React

    1.概述 https://reactjs.org/[https://reactjs.org/]构建用户界面的js库...

  • ReactJS初探(一)

    前端项目打算使用ReactJS+Webpack+ant-design来做。ReactJS的官网:https://r...

  • Android React-Native 之React JS笔

    React是由ReactJS与React Native组成,其中ReactJS是Facebook开源的一个前端框架...

  • reactjs

    阮一峰reactjs学习 1.html 模版 凡是使用 JSX 的地方,都要加上 type="text/babel...

  • reactJS

    1、script type = "type/babel" 2、渲染组件:只能有一个顶层标签。关键字使用classN...

  • ReactJs

    reactJs 用于创建用户界面的框架 使用jsx语法(javascript + xml) 页面引入: 页面依次...

网友评论

      本文标题:ReactJs

      本文链接:https://www.haomeiwen.com/subject/ueflvttx.html