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

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

本人也是第一次接触react,对本教程如疑问,欢迎评论 或 发送至 15521285778@163.com 交流

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 15521285778@163.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 后台管理系统配置的更多相关文章

  1. react+webpack+wepack-dev-server的环境中ant design图标离线的方法

    1.首先说说我老姜对官方提供的demo的理解, 在理解的过程也学到了不少知识. 上图(图0)展示的官网demo的目录结构,node_modules是自己用node下载的, iconfont中是自己的离 ...

  2. 二、React初体验之React组件创建

    (中间因为应付各种考试,处理其他事情,隔了好时间没更新,现在终于有时间了,续上!) 本文为React初始体验,因此先不考虑文件如何组织,尽量以最简单的方式让大家了解React其中的原理. 在创建组件( ...

  3. asp.net core2.1项目应用Ant Design(一)

    无意中发现了Ant Design这个组件库后,深深被他丰富的组件吸引了,大家感兴趣的可以去官网感受下,组件的应用和效果真是的太强大了,对于我们这些小公司,无自主研发前端团队的来说,无疑特别方便:htt ...

  4. 使用express、react、webpack打包、socket.io、mongodb、ant.design、less、es6实现聊天室

    拿到一个项目,我们应该如何去完成这个项目呢. 是直接上手? 还是先进行分析,然后再去解决呢?毫无疑问,如果直接上手解决,那么可能会因为知道目标所在,而导致出现各种问题. 所以,我们应该系统的分析这个项 ...

  5. React + Ant Design网页,配置

    第一个React + Ant Design网页(一.配置+编写主页) 引用博主的另外一篇VUE2.0+ElementUI教程, 请移步:  https://blog.csdn.net/u0129070 ...

  6. 使用Facebook的create-react-app脚手架快速构建React开发环境(ant.design,redux......)

    编程领域中的“脚手架(Scaffolding)”指的是能够快速搭建项目“骨架”的一类工具.例如大多数的React项目都有src,public,webpack配置文件等等,而src目录中又包含compo ...

  7. button样式篇一(ant Design React)

    这篇来介绍button中elementUi.iview.ant中样式结构 ant Design react ant-react中button分两个文件less: mixins.less:根据butto ...

  8. React+Ant Design设置左侧菜单导航路由的显示与隐藏(与权限无关)

    最近在学习react时,用到了很流行的UI框架Ant Design,也了解了一下Ant Design Pro,发现它们都有导航组件,Ant Design框架的导航菜单在这里,Ant Design Pr ...

  9. Ant Design of React 框架使用总结1

    一.  为什么要用UI 框架 统一了样式交互动画 . Ui框架会对样式,交互动画进行统一,保证了系统风格完整统一,不像拼凑起来的. 兼容性 ,不是去兼容IE 6 7 8那些低版本浏览器,而是对主流的标 ...

随机推荐

  1. CodeForces 730A Toda 2 (模拟)

    题意:给定一个序列,现在你每次至多给5个人的权值减小1,最少2个人,最小是0,使得剩下的所有权值都相等且尽量大. 析:用multiset来模拟,每次取权值最大的三个或者两个,直到最后相等.我开始没有这 ...

  2. 【性能测试】服务器资源监测工具sar安装

    [root@yyy ~]# sar Cannot open /var/log/sa/sa19: No such file or directory 在Linux系统中,运行sar命令,发现无法执行: ...

  3. 洛谷P4114 Qtree1(树链剖分+线段树)

    传送门 LCT秒天秒地用什么树剖 这题可以算是树剖的比较裸的题目了 把每一条边的权值下放到他两边的点中深度较深的那个 然后直接用树剖+线段树带进去乱搞就可以了 //minamoto #include& ...

  4. java 继承还是组合

    1.我真的需要上溯转型(upcasting)吗? 如果是,才会用到继承. 2.

  5. Windows下安装Ubuntu16.04双系统

    ROS需要在Ubuntu系统上开发,虚拟机跑Ubuntu开发ROS容易出现各种各样的问题,所以需要安装Ubuntu16.04双系统.笔者也是一步步按着网上的帖子来,由于网上的教程都不是最新的而且有的也 ...

  6. 题解报告:hdu 1257 最少拦截系统(贪心)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1257 Problem Description 某国为了防御敌国的导弹袭击,发展出一种导弹拦截系统.但是 ...

  7. strings命令的实现 2014-06-02 00:17 355人阅读 评论(0) 收藏

    本程序实现从文件中提取连续4个以上的可打印字符.模仿linux中string命令 #include <stdio.h> #include<stdlib.h> #include ...

  8. 转-AFNetwork 作用和用法详解

    来自:http://www.maxiaoguo.com/clothes/269.html AFNetworking是一个轻量级的iOS网络通信类库.它建立在NSURLConnection和NSOper ...

  9. 《Hadoop高级编程》之为Hadoop实现构建企业级安全解决方案

    本章内容提要 ●    理解企业级应用的安全顾虑 ●    理解Hadoop尚未为企业级应用提供的安全机制 ●    考察用于构建企业级安全解决方案的方法 第10章讨论了Hadoop安全性以及Hado ...

  10. 关于docker入门教程

    简介:docker入门教程 docker入门教程翻译自docker官方网站的Docker getting started 教程,官方网站:https://docs.docker.com/linux/s ...