react入门学习

1.安装node及npm环境

2.在cmd命令窗口输入npm install -g create-react-app,或者使用淘宝定制的cnpm，

npm install -g cnpm --registry=https://registry.npm.taobao.org

npm config set registry https://registry.npm.taobao.org

然后cnpm install -g create-react-app

3. 创建项目 create-react-app my-app，进入项目目录cd my-app/，启动项目npm start

4.react模块化

//HelloWorld.js模块

import React from 'react';

import { NavLink } from 'react-router-dom'

import './HelloWorld.css';

class HelloWorld extends React.Component{

constructor(props) {

        // 使用super()将props传递给基础构造函数

        super(props);

        this.state = {opacity: 1.0};

    }

    componentDidMount() {

    /*this.timer = setInterval(function () {

      var opacity = this.state.opacity;

      opacity -= .05;

      if (opacity < 0.1) {

        opacity = 1.0;

      }

      this.setState({

        opacity: opacity

      });

    }.bind(this), 100);*/

  }

  doSome(e){

  e.preventDefault();

  alert(3435);

  }

  test(){

  alert("mousemove...");

  }

render () {

    return (

    <div>

    <div style={{opacity: this.state.opacity}} className="hello-header" onClick={this.doSome} onTouchMove={this.test}>

        Hello {this.props.name}

      </div>

      <NavLink exact={false} to="/user">User</NavLink>

    </div>

    );

}

}

export default HelloWorld;

//Home.js

import React from 'react';

import HelloWorld from '../helloworld/HelloWorld';

class Home extends React.Component{

constructor(props) {

        // 使用super()将props传递给基础构造函数

        super(props);

        this.state={};

    }

    render(){

    return (

      <HelloWorld name="React"></HelloWorld>

    );

    }

}

export default Home;

5.路由 react-router-dom

5.1 安装 cnpm install react-router-dom --save

5.2 在app入口文件中引入

import React from 'react';

import { HashRouter as Router,Route} from 'react-router-dom';

import Home from './component/home/Home'

import User from './component/user/User'

import './App.css';

class App extends React.Component {

  render() {

    return (

      <Router>

          <div>

              <Route path='/' exact={true}  component={Home}></Route>

              <Route path='/user'  component={User}></Route>

          </div>

      </Router>

    );

  }

}

export default App;

5.3 在组件中使用NavLink或Link标签

<NavLink exact={false} to="/user">User</NavLink>

6.状态管理Redux，非父子组件传值

6.1安装  cnpm install react-redux --save     cnpm install redux --save

6.2 action  view中派发的事件

//index .js

export const addTodo = {

type: 'ADD_TODO'

}

6.3 reducer

//todos.js

const todos = (state = {number: 0}, action) => {

  let number = state.number

  switch (action.type) {

    case 'ADD_TODO':

      return {number: number+1}

    default:

      return state

  }

}

export default todos

6.4在组件中使用全局state

//User.js

import React from 'react';

import { connect } from 'react-redux';

import {addTodo} from '../../actions';

//状态值管理

const mapStateToProps = (state) => {

  return {

    count: state.number

  }

};

//事件派发

const mapDispatchToProps = (dispatch, ownProps) => {

    return {

        btnTest: ()=>dispatch(addTodo)

    }

};

class User extends React.Component{

constructor(props) {

        super(props);

        this.state={};

    }

    render(){

    const { count, btnTest} = this.props

    return (

      <div>

      User {count}

      <button onClick={btnTest}>点我</button>

      </div>

    );

    }

}

export default connect(mapStateToProps, mapDispatchToProps)(User);

Redux原理