react入门学习

　经过一段时间的react学习，现在整理一下学习的内容。

　　首先react更偏向原生js，原生js学的好其实对react的学习有很大的辅助作用。react的官网上对react介绍的很详细，我就不一一介绍了。

　　本人把react分为几个学习部分，首先是react的使用，也就是react的环境搭建；然后是组件部分，包括组件的传值。然后就是react的生命周期函数，再然后是react的路由和最后的redux。

　　react的环境搭建其实很简单，首先使用node通过cmd命令进入命令行，输入指令npm i -g create-react-app  全局下载使用，然后就是创建项目，输入命令  create-react-app name (name为自定义项目名)，当出现happy hacking的时候说明项目已经搭建成功。网络问题有可能会使项目创建失败，可以使用淘宝镜像来创建。项目创建成功之后使用命令 cd name (name为自定义项目名)，进入项目，然后通过命令npm start 启动项目，至此react 的脚手架已经搭建完毕。

　　组件部分是react的重要内容，组件分为无状态组件，类组件，容器组件和高阶组件。组件中 的传值又是组件部分中的重要内容，组件中的传值分为父传子，子传父，兄弟传值，父传子使用props来传值，而子传父使用回调函数来传值，兄弟组件的传值稍微麻烦，通过子传父的方法传给父组件，然后通过父传子的方法传给子组件，这样完成兄弟组件的传值。

　　使用react构建单页面应用的时候进行页面跳转就会使用react的路由（分为hash路由和历史记录模式的路由），首先进入项目目录，使用npm安装react-router-dom，命令为   npm install react-router-dom至此react的路由已经安装完成，可以编写代码进行页面的跳转。

　　新建一个Router.js文件

import React from 'react'; 

import Home from './pages/home';
import About from './pages/about';

import { BrowserRouter as Router, Route} from "react-router-dom";

function router(){
return (
<Router>
    <Route path="/home" component={Home} />
    <Route path="/about" component={About} />
</Router>);
}

export default router;

home组件

import React, { Component } from 'react';

export default class Home extends Component {
  render() {
    return (<h1>
      欢迎，这里是Home
    </h1>)
  }
}

about组件

import React, { Component } from 'react';

export default class About extends Component {
  render() {
    return (<h1>
      欢迎，这里是About
    </h1>)
  }
}

以上完成后再app.js中引入

import Router from './Router'
class App extends React.Component {
render(){
return (
  <Router />
);
}
}
启动项目后再url中输入localhost:3000/home活localhost:3000/about就可以进行基础的路由跳转
　　以上就是我的react学习整理，当然只是基础的学习整理，奈何本人学疏才浅，无法做出更深入的学习整理。总之学无止境，继续加油