首先确认安装了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. springMvc中实现拦截器Interceptor以及添加静态资源映射

    这个代码写了很久了,多久呢?2018年12-20号写的.... 废话不多说,简化一下,作为笔记. 注: public class springmvcConfig extends WebMvcConfi ...

  2. 模拟 hihoCoder 1177 顺子

    题目传送门 /* 模拟:简单的照着规则做就可以了,把各种情况考虑到,虽然比赛写的丑了点,但能1Y还是很开心的:) */ #include <cstdio> #include <cst ...

  3. HttpURLConnection与HTTP Client的区别,及多用前者

    转自: http://android-developers.blogspot.jp/2011/09/androids-http-clients.html Level 9以前用client,以后用url ...

  4. Android上的进程通信(IPC)机制

    Interprocess Communication Android offers a mechanism for interprocess communication (IPC) using rem ...

  5. 16-2 基于localStorage或sessionStorage的计数器

    localStorage 方法 localStorage 方法存储的数据没有时间限制.第二天.第二周或下一年之后,数据依然可用. <!doctype html> <html> ...

  6. Robot Framework and Ride

    Robot framework是诺西(NSN)开源的一套自动化测试工具,在通信设备自动化测试中很实用,它基于Python开发,主要模拟NMS网管配置数据到网元NODE,并读取配置看配置是否生效,ECI ...

  7. jquery 实现 点击把数据移动右侧 点击再次移回到左侧

    2018年第一发  希望新的一年和大家一下学习更多知识    JS://把数据左边挪到了右边,再从右边移动回来function moveOption(e1, e2){   $("#" ...

  8. php接收json格式数据(text/xml)

    在API服务中,目前流行采用json形式来交互. 给前端调用的接口输出Json数据,这个比较简单,只需要组织好数据,用json_encode($array) 转化一下,前端就得到json格式的数据. ...

  9. 高仿人人网客户端Android版项目源码

    高仿人人网客户端,有兴趣的盆友可以研究下,里面主要包含的一些UI设计与交互.(注:项目中有少许问题,apk能运行,希望开发者可以参考代码研究一下.) 源码下载:http://code.662p.com ...

  10. iOS Cell异步图片加载优化,缓存机制详解

    最近研究了一下UITbleView中异步加载网络图片的问题,iOS应用经常会看到这种界面.一个tableView上显示一些标题.详情等内容,在加上一张图片.这里说一下这种思路. 为了防止图片多次下载, ...