经过一段时间的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来传值,而子传父使用回调函数来传值,兄弟组件的传值稍微麻烦,通过子传父的方法传给父组件,然后通过父传子的方法传给子组件,这样完成兄弟组件的传值。

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>)
  }
}
import Router from './Router'
class App extends React.Component {
render(){
return (
  <Router />
);
}
}