react.js框架的简单入门

框架特点

1 声名式设计 轻松描述应用

2 高效 模拟DOM 减小跟DOM的交互

3 灵活 与已知库和框架的很好配合

4 JSX 混写高效

5 组件 组件能够很好的复用

6 单向响应的数据流 单向数据流响应,减少代码重复

安装

1.直接引入法 在html的head标签里面直接引用以下代码

<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script> 

2.通过npm命令安装 (电脑已配置node环境)

$ cnpm install -g create-react-app
$ create-react-app my-app
$ cd my-app/
$ npm start

state(组件的UI数据模型,渲染数据时的依据)

1.定义一个state

 //在构造函数中对状态赋初始值
    constructor(props){
        super(props);//第一步，这是必须的
        //不能调用state
        this.state = {//第二步，赋初始值
            test:0,
            on:false,
            log:[] //数组
        };
    }

2. state与props的区别

state可变,是组件内部维护的一组用于反映组件UI变化的状态集合.

props只读,要想修改Props，只能通过该组件的父组件修改,父组件正是通过子组件的Props, 传递给子组件其所需要的状态.

3.修改state

正确的修改方式为setState().

// 正确
this.setState({title: 'learn'});

props

1. props的作用

props是一种父级向子级传递数据的方式。父、子组件只能通过props来传递数据。

2.props的原理

在子组件中，可以使用this.props.*来获取父组件的state值；在父组件中，更新state，并通过在子组件上使用this.props.*将其传递到子组件上。

JSX

1.内嵌元素

你想返回更多的元素,你需要包含在容器元素里,例如下例中的div节点,这个div中包含了元素h1,h2和p

　　import React from 'react';
　　class App extends React.Component {
   　　render() {
      　　return (
         　　<div>
           　　 <h1>Header</h1>
            　　<h2>Content</h2>
            　　<p>This is the content!!!</p>
         　　</div>
      　　);
   　　}
　　}
　　export default App;

2.属性

我们能使用自定义的属性,需要在元素前面添加data前缀,如下

　　　　class App extends React.Component {
   　　　　render() {
      　　　　return (
         　　　　<div>
            　　　　<h1>Header</h1>
            　　　　<h2>Content</h2>
            　　　　<p data-myattribute = "somevalue">This is the content!!!</p>
         　　　　</div>
     　　　　 );
   　　　　}
　　　　}
　　　　export default App

3.javascriprt表达式

JSX中能使用javascript表达式

/***
 * 第一个react组件，这个组件将渲染div的内容到应用中
 */
class App extends React.Component{

    render(){
        return (
            <div>
                <h1>header</h1>
                <h2>Content</h2>
                <p>this is a content!</p>
                <p>{ 1 + 1 }</p>  <!--进行JavaScript的表达式-->
                Hello world!!
            </div>
        );
    }
}

export default App;

3.不能使用if else的语法在JSX里面,但可以使用模板表达式语言进行判断,如下

class App extends React.Component{

    render(){

        var valiable = 1;

        return (
            <div>
                <h1>header</h1>
                <h2>Content</h2>
                <p>this is a content!</p>
                <p>{ 1 + 1 }</p>
                {valiable == 1 ? 'true!':'false'}
                Hello world!!
            </div>
        );
    }
}

export default App;

Router

1. router组件本身只是一个容器,真正的路由要通过router组件定义

import { Router, Route, hashHistory } from 'react-router';

render((
  <Router history={hashHistory}>
    <Route path="/" component={App}/>
  </Router>
), document.getElementById('app'));

router中的history,它的值用hashHistory表示,路由的切换由URL的hash变化决定,即由URL

#部分发生变化.

2.link

Link组件用于取代<a>元素,生成一个链接,允许用户点击跳转到另一个路由.它基本上就是<a>元素的React版本,可以接受Router的状态.

render() {
  return <div>
    <ul role="nav">
      <li><Link to="/about">About</Link></li>
      <li><Link to="/repos">Repos</Link></li>
    </ul>
  </div>
}

待续..