react初探索--react + react-router + ant-design 后台管理系统配置

Posted i-douya

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了react初探索--react + react-router + ant-design 后台管理系统配置相关的知识,希望对你有一定的参考价值。

首先确认安装了node环境,Node >= 6。

如果对react 及 ant-design 一无所知,建议去阅读下api文档,react 可以在 codePen 在线练习。 react Api中文文档     ant-design 中文文档

本人也是第一次接触react,对本教程如疑问,欢迎评论 或 发送至 [email protected] 交流

1,全局安装Create React App , 创建项目

  Create React App 是开始构建新的 React 单页应用程序的最佳方式。已经配置好了像 Babel 和 webpack 这样的构建工具,省去了很多配置的烦恼。

npm install -g create-react-app  //全局安装
create-react-app my-app //选择合适的目录创建你的项目, my-app 为你的项目名称
cd my-app //进入项目目录
npm run start //启动项目,会在浏览器中自动打开 http://localhost:3000/

  1)生成的项目目录如下

my-app/
 
      node_modules/           //依赖的包

      public/               
            index.html              //页面模板
            favicon.ico        //就是ico..
            manifest.json

      src/              //开发源码
            App.css
            App.js
            App.test.js
            index.css
            index.js        //js入口文件
            logo.svg
            registerServiceWorker.js

      package.json      
      README.md           

  2)项目启动之后界面

  技术分享图片

  在项目目录并未发现配置文件 webpack.config,在项目根目录执行 npm run eject 暴露出配置文件,执行完成会自动生成config文件夹及配置文件。

  技术分享图片

2,安装 less 及配置

  因为本菜鸟还没用过less,所以在此尝试学习使用less

npm install less-loader less --save-dev   //--save-dev 只在开发时依赖的包裹。 --save 发布时会依赖的包 

  修改 webpack.config.dev.js 和 webpack.config-prod.js

  改动1:exclude:[ ] 中的   /.css$/  改为  /.(css|less)$/

  改动2:test:/.css$/  改为  test: /.(css|less)$/

 

3,安装 ant design

npm install antd --save

 

4,安装 react-router-dom

  有些童鞋 可能安装的是 react-router,react-router 和 react-router-dom 配置差别很大,个人建议使用react-router-dom,附上两者差别说明:react-router 和 react-router-dom 的区别

npm install --save react-router-dom

 

5,创建组件 及 路由配置 

  因为 index.js是项目主入口文件,所以将路由配置在index.js。在github看大神代码路由都是单独放一个文件夹中配置的,因个人不太熟悉,所以先这样写,后续优化。

  在src 文件夹下 创建 components文件夹,将APP.js 移入componets,创建组件 Pagebutton.js,Test1.js,里面运用antd随便写点内容

  index.js 详细配置

import React,{ Component } from ‘react‘;
import ReactDOM from ‘react-dom‘;
import logo from ‘./logo.svg‘;

//引入antd导航组件
import {Menu, Icon, Layout} from ‘antd‘;

//引入ant-design样式
import ‘antd/dist/antd.css‘;
import ‘./components/App.css‘;

//引入路由
import {
    BrowserRouter as Router,
    Route,
    Link
} from ‘react-router-dom‘;

//引入样式
import ‘./index.css‘;

//引入组件
import App from ‘./components/App‘;
import Pagebutton from ‘./components/Pagebutton‘;
import Test1 from ‘./components/Test1‘;

import registerServiceWorker from ‘./registerServiceWorker‘;

const SubMenu = Menu.SubMenu;
//layout布局元素
const { Header, Footer, Sider, Content } = Layout;

class Hello extends Component{
    constructor(props){
        super(props)
        this.state={
            collapsed: true,
            mode:"inline",
            theme:"dark"
        }
    }
    toggleCollapsed = () => {
        this.setState({
            collapsed: !this.state.collapsed,
        });
    }
    render(){
        return(
            <Router>
                <Layout>
                    <Sider>
                        <div type="primary" className="App-logo-wrap" id="logo">
                            <img src={logo} className="App-logo" alt="logo"/>
                        </div>
                        <Menu
                            defaultSelectedKeys={[‘0‘]}
                            defaultOpenKeys={[‘0‘]}
                            mode={this.state.mode}
                            theme={this.state.theme}
                            inlineCollapsed={this.state.collapsed}
                        >
                            <Menu.Item key="0">
                                <Link to="/"><span><Icon type="mail" /><span>index</span></span></Link>
                            </Menu.Item>

                            <SubMenu key="sub1" title={<span><Icon type="mail"/><span>General</span></span>}>
                                <Menu.Item key="1">
                                    <Link to="/Pagebutton">Button</Link>
                                </Menu.Item>
                                <Menu.Item key="2">
                                    <Link to="/Test1">Icon</Link>
                                </Menu.Item>
                            </SubMenu>
                            <SubMenu key="sub2" title={<span><Icon type="appstore"/><span>Layout</span></span>}>
                                <Menu.Item key="3">Grid</Menu.Item>
                                <Menu.Item key="4">Layout</Menu.Item>
                            </SubMenu>
                            <SubMenu key="sub3" title={<span><Icon type="appstore"/><span>Navigation</span></span>}>
                                <Menu.Item key="5">Affix 固钉</Menu.Item>
                                <Menu.Item key="6">Breadcrumb 面包屑</Menu.Item>
                                <Menu.Item key="7">Menu 导航菜单</Menu.Item>
                                <Menu.Item key="8">Pagination 分页</Menu.Item>
                                <Menu.Item key="9">steps 步骤条</Menu.Item>
                            </SubMenu>
                            <SubMenu key="sub4" title={<span><Icon type="appstore"/><span>Data Entry</span></span>}>
                                <Menu.Item key="10">AutoComplete 自动完成</Menu.Item>
                                <Menu.Item key="11">Cascader 级联</Menu.Item>
                                <Menu.Item key="12">Checkbox</Menu.Item>
                                <Menu.Item key="13">DatePicker</Menu.Item>
                                <Menu.Item key="14">Form</Menu.Item>
                                <Menu.Item key="15">Input</Menu.Item>
                                <Menu.Item key="16">InputNumber</Menu.Item>
                                <Menu.Item key="17">Mention 提及</Menu.Item>
                                <Menu.Item key="18">Rate 评分</Menu.Item>
                                <Menu.Item key="19">Radio</Menu.Item>
                                <Menu.Item key="20">Select</Menu.Item>
                                <Menu.Item key="21">Switch</Menu.Item>
                                <Menu.Item key="22">TreeSelect</Menu.Item>
                                <Menu.Item key="23">TimePicker</Menu.Item>
                                <Menu.Item key="24">Transfer 穿梭框</Menu.Item>
                                <Menu.Item key="25">Upload</Menu.Item>
                            </SubMenu>
                            <SubMenu key="sub5" title={<span><Icon type="appstore"/><span>Data Display</span></span>}>
                            </SubMenu>
                            <SubMenu key="sub6" title={<span><Icon type="appstore"/><span>Feedback</span></span>}>
                            </SubMenu>
                            <SubMenu key="sub7" title={<span><Icon type="appstore"/><span>Other</span></span>}>
                            </SubMenu>
                        </Menu>
                    </Sider>

                    <Layout>
                        <Header>it is nothting</Header>
                        <Content>
                            <Route exact path="/" component={ App } />
                            <Route path="/Pagebutton" component={ Pagebutton } />
                            <Route path="/Test1" component={ Test1 } />
                        </Content>
                        <Footer>
                            React-Admin ?2018 Created by [email protected].com
                        </Footer>
                    </Layout>
                </Layout>
            </Router>
        )
    }
}


// 配置路由
ReactDOM.render(<Hello />, document.getElementById(‘root‘));
registerServiceWorker();

 

6,将项目上传至git

  参考方法:create-react-app创建项目 上传至git并预览   

  git地址:https://github.com/huangdouya/huangdouya.github.io

  预览地址:https://huangdouya.github.io/react-admin/build/#

  注意:上传至git之前,查看 .gitignore 文件内是否有 “/build” ,有的话删除,否则在gitignore会忽略build文件夹的上传,github无法预览。

  遇到问题:在git预览项目时页面刷新出现404。解决方法:使用HashRouter 代替BrowserRouter,出现任何问题都指向index.html,如有更好的方法,欢迎评论




以上是关于react初探索--react + react-router + ant-design 后台管理系统配置的主要内容,如果未能解决你的问题,请参考以下文章

初探React

初探react

初探react,用react实现一个todoList功能

初探react,用react实现一个todoList功能

[深入剖析React Native]React 初探

React初探之React特性