react的移动端项目

实现效果

1.安装和初始化

$ npm install -g create-react-app

# 注意：工具会自动初始化一个脚手架并安装 React 项目的各种必要依赖，如果在过程中出现网络问题，请尝试配置代理或使用其他 npm registry。
$ create-react-app my-app

$ cd my-app
$ npm start

2.安装有关插件

1.安装sass
 npm install sass --D
 2, 安装  redux router
 npm install redux react-redux react-router-dom redux-thunk --save

3.创建文件夹

1） src-pages 存储页面
2）components 公共组件
3）layout 模板

4. layout —>Layout.js 模板

import React from 'react'
import BottomNav from "./components/BottomNav"
 const Layout=(props)=> {
    //  console.log(props,'props===================')
    const  {children}=props;
    return (
        <div>
          {children}
            <BottomNav></BottomNav>
        </div>
    )
}
export default Layout

```js
在home等页面最外层包围Layout
	```js
	import React from 'react'
import Layout from "../../layout/Layout"
export default function Home() {
    return (
        <Layout>
            home页面
        </Layout>
    )
}

5.最下面导航栏的封装layout—>components–>BottomNav—>index.js

Icon 要在App文件导入

import React from 'react'
import "./index.scss"
const menu = [
    {
      title: '首页',
      icon: 'shouye',
      link: '/',
    },
    {
      title: '分类',
      icon: 'fenlei',
      link: '/search',
    },
    {
      title: '发现',
      icon: 'wode',
      link: '/user',
    },
    {
        title: '我的',
        icon: 'wode',
        link: '/user',
      }
  ]
 const BottomNav=(props)=> {
    return (
        <ul className="bottomNav">
            {menu.map((item)=>{
                return (
                    <MenuItem key={item.title} {...item}/>
                )
            })}
        </ul>
    )
}
export default BottomNav
function MenuItem(props){
    return (
        <li>
            <span className={"iconfont icon-"+props.icon}></span>
            <a href={props.link}>{props.title}</a>
        </li>
    )
}

5.rem 适配 App文件导入

src同级：lib–>flexible.js

6. 路由

pages同级Router–index.js

import React from 'react'
import { BrowserRouter, Route, Switch } from "react-router-dom";

function Router(props) {
  return (
    <Switch>
      <Route exact path="/" component={Home}></Route>
      <Route path="/find" component={Find}></Route>
      <Route path="/sort" component={Sort}></Route>
      <Route path="/my" component={My}></Route>
      <Route component={_404}></Route>
    </Switch >
  )
}
export default Router

》App引入Router文件

import React from 'react';
import { BrowserRouter } from "react-router-dom";
import './App.css';
// import Home from "./pages/Home"
import "./static/iconfont/iconfont.css" 
import './lib/flexible'
import Router from './Router';
function App() {
  return (
    <BrowserRouter> 
      <Router />
    </BrowserRouter>
   
  );
}

export default App;

》此时的页面样式

7. Layout–>BottomNav–>index.js

	import React from 'react'
import "./index.scss"
import {Link} from "react-router-dom"
const menu = [
    {
      title: '首页',
      icon: 'shouye',
      link: '/',
    },
    {
      title: '分类',
      icon: 'fenlei',
      link: '/sort',
    },
    {
      title: '发现',
      icon: 'wode',
      link: '/find',
    },
    {
        title: '我的',
        icon: 'wode',
        link: '/my',
      }
  ]
 const BottomNav=(props)=> {
    return (
        <ul className="bottomNav">
            {menu.map((item)=>{
                return (
                    <MenuItem key={item.title} {...item}/>
                )
            })}
        </ul>
    )
}
export default BottomNav
function MenuItem(props){
    return (
        <li>
            <span className={"iconfont icon-"+props.icon}></span>
            <Link to={props.link}>{props.title}</Link>
        </li>
    )
}`

》此时可以实现切换导航到切换对应页面

8. 路由守卫，没有登录，不能进入首页

在Router–>建一个PrivateRoute.js

import React, { Component } from 'react'
import { Route, Redirect } from "react-router-dom";
import {connect} from "react-redux"
class PrivateRoute extends Component {
  render() {
    const { isLogin,path,component,location } = this.props
    if(isLogin){
      // 登录
      return  <Route path={path} component={component} />
    }
    return (
      // 没有登录
      <Redirect to={{
        pathname: '/login',
        state:{redirect:location.pathname}
      }} />    
    )
  }
}
// 参数
const mapStateToProps=({my})=>{
  return {
    isLogin:my.isLogin
  }
}
// 事件
const mapDispatchToprops=(dispatch)=>{
  return {
  }
}
export default connect(mapStateToProps,mapDispatchToprops)(PrivateRoute)

没有登录跳转到login 页面

import React from 'react'
import Layout from "../../../layout/Layout"
import {connect} from "react-redux" 
import {  Redirect } from "react-router-dom";
import actionCreators from "../store/actionCreators"
  function Login(props) {
     const {isLogin,doLogin,location}=props
     if(isLogin){
        // 登录
        const redirect = (location && location.state && location.state.redirect) || "/"
        return  <Redirect  to={redirect}/>
      }
    return (
        <Layout>
           <div className="login" >
               登录页面
          <button onClick={doLogin}>登录</button>
        </div>
        </Layout>
    )
}
// 参数
const mapStateToProps=({my})=>{
    return {
      isLogin:my.isLogin
    }
  }
  // 事件
  const mapDispatchToprops=(dispatch)=>{
    return {
        doLogin(){
            const action=actionCreators.loginSuccess();
            dispatch(action)
        }
    }
  }
export default connect(mapStateToProps,mapDispatchToprops) (Login)

》点击灯枯后跳转到my页面，此外这个项目需要store的使用