从零开始到完整的React后台管理项目开发路程(第一节)_react 从0开始开发博客

完整的项目地址

1、使用creat-react-app搭建脚手架

我使用的是 VSCode，看个人喜好
打开一个空项目时的样子：

在控制台输入以下命令，或者在项目的文件夹中打开GitBash：

npm install -g creat-react-app  全局下载工具
create-react-app your_projectname  初始化一个项目模板
npm start
1
2
3

2、搭建项目的开发目录

2.1 删除掉src目录下的所有文件，新建App.js

import React from 'react';

function App() {
  return (
    <div className="App">
      index
    </div>
  );
}

export default App;

1
2
3
4
5
6
7
8
9
10
11
12

index.js

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
ReactDOM.render(<App />, document.getElementById('root'))
1
2
3
4

2.2 在src下新建一下目录

2.3安装antd

yarn add antd
引入antd

引入antd的全局样式

3、配置页面路由

3.1 引入路由包

yarn add react-router-dom
1

3.2 创建路由组件admin

import React from 'react'
/* 管理路由组件 */
export default class Admin extends React.Component {
    render() {
        return (
            <div>admin</div>
        )
    }
}
1
2
3
4
5
6
7
8
9

3.3 登录路由组件Login

import React from 'react'
/* 
登录路由组件
*/
export default class Login extends React.Component {
    render() {
        return (
            <div>Login</div>
        )
    }
}
1
2
3
4
5
6
7
8
9
10
11

3.4 App.js引入路由

import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom'
import Login from './pages/login/login'
import Admin from './pages/admin/admin'
function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Route path='/login' component={Login}></Route>
        <Route path='/' component={Admin}></Route>
      </Switch>


    </BrowserRouter>
  );
}

export default App;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

效果图