用react搭建一个管理后台（一）

1、初始化react项目

npm install create-react-app -g 
create-react-app react_demo
cd react_demo 
npm run start

2、建立一个远程的空的仓库

在码云或GitHub上建立一个空的仓库。并将本地库和远程库关联。
在本地项目库中依次执行：

git init //初始化git仓库
git add ./ 
git commit -m 'first commit'
git remote add origin <远程库>
git push -u origin master

坑：如果这里报错没有权限。

可以通过如下命令生成：

 ssh-keygen -t rsa -C "你的git邮箱"

拷贝生成的公钥到码云或GitHub中。

然后再推送就行了。

3、使用静态服务器

 npm install serve -g 全局安装serve服务器
 npm run build 打包
 serve build 启动

4、引入ant Design

在create-react-app中使用ant Design

安装antd

yarn add antd 

组件按需打包

下载依赖

yarn add babel-plugin-import react-app-rewired customize-cra

定义加载配置的JS模块：config-overrides.js
内容如下：

const { override, fixBabelImports } = require('customize-cra')

module.exports = override(fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: 'css'
}))

修改package.json文件

 "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  },

使用antd 组件
App.js文件

import React from 'react';
import {Button} from 'antd'
// 应用根组件
function App() {
  return (
    <div>
      <Button type="primary">这是一按钮</Button>
    </div>
  );
}

export default App;

yarn start 运行项目。

OK。

5、自定义antd主题

安装工具包

yarn add less less-loader

修改config-overrides.js文件。

重新运行项目：

6、引入路由

下载包
yarn add react-router-dom
新建2个组件：

login.jsx:

import React from 'react'

export  default class Login extends React.Component{
    render(){
        return (
            <div>登录组件</div>
        )
    }
}

home.jsx:

import React ,{Component} from 'react'

export default class Home extends Component{
    render(){
        return (
            <div>主页面</div>
        )
    }
}

配置路由：
App.js文件修改如下：

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

import Login from './views/login/login'
import Home  from './views/home/home'

// 应用根组件
function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Route path='/login' component={Login}/>
        <Route path='/' component={Home}/>
      </Switch>
    </BrowserRouter>
  );
}

export default App;

访问 http://localhost:3001/login 默认端口是3000 。

访问 http://localhost:3001/

码云仓库：源码