React 安装及创建项目

一、最熟悉的操作利用create-react-app搭建项目
1、全局安装create-react-app，执行：npm install -g create-react-app 命令进行安装

2、进入要安装项目的文件夹，执行：npx create-react-app react-blog 创建一个react-blog项目 
3、进入项目cd react-blog，执行：npm run start 编译启动项目即可(如图就ok了)

此页面会自动开启；

4、在项目src目录创建views文件夹，放置页面组件，这里我创建了login和main两个文件夹并创建了对应的login.js、main.js页面组件

// login.js
import React from 'react'
export default function Login() {
  return (
    <div>Login</div>
  )
}

// main.js
import React from 'react'
export default function Main() {
  return (
    <div>Main</div>
  )
}

5、在项目src目录创建components文件夹，放置公共组件

二、安装配置路由
1、首先安装路由组件,这里我使用的是5.0版本的配置：npm install react-router-dom@5 --save-dev
2、在src目录创建路由文件夹router并创建index,js
3、这里我做了token判断是否登陆，显示对应页面组件

import React from 'react';
import { BrowserRouter ,Route, Switch, Redirect} from "react-router-dom";
import Login from '@/views/login/Login';  //  导入登陆组件
import Main from '@/views/main/Main';  // 导入登陆后要显示的main组件
export default function IndexRouter() {
  return (
    <BrowserRouter>
        <Switch>
            <Route path='/login'  component={Login}></Route>
            {/* <Route path='/'  component={Main}></Route> */}
            <Route path='/'  render={()=>{
                return localStorage.getItem('token')? <Main></Main> :  <Redirect to='/login'></Redirect>
            }}></Route>
        </Switch>
    </BrowserRouter>
  )
}

3、修改src/App.js,引入我们的路由入口文件@/router/index

import React from 'react';
import './App.css';
import RouterView from '@/router/index';
function App() {
  return (
    <RouterView></RouterView>
  );
}
export default App;