create-react-app 入门学习

全局安装 create-react-app

npm install create-react-app -g

创建项目

在全局安装了create-react-app 后 创建项目，如果按照下面的第一种办法创建不成功，可以使用第二种办法

create-react-app react01
// 或者
npx create-react-app react01

使用路由

• 下载路由模块

npm i react-router-dom -s

为实现路由懒加载 安装 react-loadable

npm i react-loadable -s

• 创建页面
  
  在 src 目录下创建 pages文件,测试文件目录如下

pages => index.js代码

import Loadable from 'react-loadable';
import { ActivityIndicator } from 'antd-mobile';

const Home = Loadable({
    loader: () => import('./home'),
    loading: ActivityIndicator
  });

const Cate = Loadable({
    loader: () => import('./cate'),
    loading: ActivityIndicator
  });

export {
    Home,
    Cate
}

• 在 src 目录下创建创建routes.js

import {
    Home,
    Cate
} from './pages'

const routes = [
    {
        url: '/home',
        component: Home,
        text: '首页',
        isToggleFooter:true,
        isShowHeaderAndFooter: true
    },
    {
        url: '/cate',
        component: Cate,
        text: '分类',
        isToggleFooter:true,
        isShowHeaderAndFooter:true
    }
]

export default routes

• 在 app.js引入router模块和routes.js文件

import React, { Component, Fragment } from 'react';
import {
  Route,
  Redirect,
  Switch
} from 'react-router-dom'

import routes from './routes'

class App extends Component {
  render() {

    return (
      <Fragment>
        <header>Header</header>
        <Switch>
          {
            routes.map(route => {
              return (
                <Route
                  key={route.url}
                  path={route.url}
                  component={route.component} />
              )
            })
          }
          <Redirect exact from="/" to={routes[0].url} />
          {/* 这里用 redirect 进行 首页自动跳转到 /home 路由下
            exact 意味着精确匹配 当为 / 时才跳转 /home 不是包含 / 就跳转到 /home
        */}
          {/* <Redirect to = '/all'/> */}
          {/* 如果找不到页面 则去 4040页面 */}
        </Switch>
        <footer>尾部</footer>
      </Fragment>
    );
  }
}

export default App;

• 在 src 最外层 index.js使用 router模块

import React from 'react';
import ReactDOM from 'react-dom';
import {
    BrowserRouter as Router,
    Route
  } from 'react-router-dom';
import './index.scss';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
    <Router>
      <Route component = {App} />
    </Router>
  ,
  document.getElementById('root'))

路由间跳转

以home 页面为例

import React, { Component, Fragment } from 'react';
import { Link } from 'react-router-dom'
export default class Home extends Component {
    render() {
        return (
            <Fragment>
                <div>我是Home页</div>
                <button> <Link to="/cate">跳转到 cate 页</Link> </button>
            </Fragment>
        )
    }
}