react+antdUI脚手架

概述
这款基于React开发的UI框架,界面非常简洁美观,在这篇文章中我主要为大家介绍一下如何用Ant开始搭建React项目
详细
代码下载:http://www.demodashi.com/demo/12205.html

一、安装webstorm + Noje.js(全局安装)
详细安装这里略过

二、全局安装create-react-app脚手架
用管理员身份运行cmd,输入:

npm install -g create-react-app yarn

成功!

三、创建React项目antd-demo1
继续在cmd命令窗口输入:

create-react-app antd-demo1
(因为之前已经创建过一个antd-demo,此处的antd-demo1是项目名称)

如上图,则创建成功!

四、引入Ant Design组件库
cmd命令进入项目根目录:

yarn add antd

如图引入成功!

五、打开webstorm,导入antd-demo1项目

六、项目启动
打开cmd,进入项目位置,输入:

npm start

网页自动打开,如图:

项目基本构建完成!

七、创建自己的页面
1. 在src目录下创建一个Home文件夹用来存放自己的代码

2. 在myIndex.js页面添加如下代码:

import React,{Component} from ‘react‘;
import { Layout, Menu, Breadcrumb, Icon } from ‘antd‘;
import ‘antd/dist/antd.css‘;
import logo from ‘../logo.svg‘;
import ‘./myCss.css‘
const { Header, Content, Footer, Sider } = Layout;

//自定义组件SiderDemo
class SiderDemo extends Component {
state = {
collapsed: false,
mode: ‘inline‘,
};

toggle = () => {
this.setState({
collapsed: !this.state.collapsed,
});
}

render() {
return (
<Layout>
<Sider
trigger={null}
collapsible
collapsed={this.state.collapsed}
>
<div className="logo" />
<Menu theme="dark" mode="inline" defaultSelectedKeys={[‘1‘]}>
<Menu.Item key="1">
<Icon type="user" />
<span className="nav-text">nav 1</span>
</Menu.Item>
<Menu.Item key="2">
<Icon type="video-camera" />
<span className="nav-text">nav 2</span>
</Menu.Item>
<Menu.Item key="3">
<Icon type="upload" />
<span className="nav-text">nav 3</span>
</Menu.Item>
</Menu>
</Sider>
<Layout>
<Header style={{ background: ‘#000‘, padding: 0 }}>
<span style={{color:‘#fff‘, paddingLeft:‘2%‘, fontSize:‘1.4em‘}}>
<Icon
className="trigger"
type={this.state.collapsed ? ‘menu-unfold‘ : ‘menu-fold‘}
onClick={this.toggle}
style={{cursor: ‘pointer‘}}
/>
</span>
<span style={{color:‘#fff‘, paddingLeft:‘2%‘, fontSize:‘1.4em‘}}>Information Management System</span>
<span style={{color:‘#fff‘, float:‘right‘, paddingRight:‘1%‘}}>
<img src={logo} className="App-logo" alt="logo" />
</span>
</Header>
<Content style={{ margin: ‘0 16px‘ }}>
<Breadcrumb style={{ margin: ‘12px 0‘ }}>
<Breadcrumb.Item>User</Breadcrumb.Item>
<Breadcrumb.Item>Bill</Breadcrumb.Item>
</Breadcrumb>
<div style={{ padding: 24, background: ‘#fff‘, minHeight: 780 }}>

</div>
</Content>
<Footer style={{ textAlign: ‘center‘ }}>
Ant Design ©2016 Created by Ant UED
</Footer>
</Layout>
</Layout>
);
}
}

//输出组件
export default SiderDemo;
3. 在myCss页面添加

.App-logo {
animation: App-logo-spin infinite 10s linear;
height: 60px;
}

@keyframes App-logo-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}

.logo {
height: 32px;
background: #333;
border-radius: 6px;
margin: 16px;
}

.ant-layout-sider-collapsed .anticon {
font-size: 16px;
}

.ant-layout-sider-collapsed .nav-text {
display: none;
}
4. 修改src\index.css内容

body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
@import "./Home/myCss.css";/*引入自己写的css样式**/
5. 修改src\index.js内容

import React from ‘react‘;
import ReactDOM from ‘react-dom‘;
import ‘./index.css‘;//引入样式
import SiderDemo from ‘./Home/myIndex‘;//引入自己写的组件(class)
import registerServiceWorker from ‘./registerServiceWorker‘;

ReactDOM.render(<SiderDemo />, document.getElementById(‘root‘));
registerServiceWorker();
//registerServiceWorker就是为react项目注册了一个service worker,
// 用来做资源的缓存,这样你下次访问时,就可以更快的获取资

八、运行效果
此时如果cmd命令窗口未关闭,网页会自动刷新,如果关闭窗口,请按上述步骤5重新启动项目

成功!

代码下载:http://www.demodashi.com/demo/12205.html

注:本文著作权归作者,由demo大师发表,拒绝转载,转载需要作者授权
---------------------
作者:findhappy117
来源:CSDN
原文:https://blog.csdn.net/findhappy117/article/details/79377369
版权声明:本文为博主原创文章,转载请附上博文链接!

原文地址:https://www.cnblogs.com/qingkun/p/10855878.html

时间: 2024-09-29 05:12:11

react+antdUI脚手架的相关文章

react用脚手架创建一个react项目

官网地址:https://react.docschina.org/ 确保本地安装了Node.js node的版本大于8.10    npm的版本大于5.6 1.在本地的某个位置创建一个文件夹,执行以下代码: npx create-react-app my-app(项目名称 可以自定义) 等待...... 创建好项目后,跳转到项目跟目录: cd my-app 然后运行项目: npm start 弹出这个页面代表项目已经创建好了! 原文地址:https://www.cnblogs.com/fqh12

yeoman 的react redux 脚手架工具

https://www.npmjs.com/package/generator-react-webpack 上面的组件还是用的es6 的class ,在 http://www.imooc.com/video/13215 里面已经开始使用函数式的组件了. 也就是三个阶段  commonjs   |类    函数式|   (es6模块)

React 脚手架

React 脚手架,来让我们快速的搭建起来一个 React 的项目 1. 全局安装 React 的脚手架 npm i -g create-react-app 2. 创建项目 create-react-app 项目名 3. 进行项目指令: cd 项目名 4. 运行项目: npm start 这样我们 React 脚手架的项目搭建就完成了 接下来,让我们看看 React 脚手架,给我们下载的目录 现在我们就来看看每个文件的功能: 首先来看 README.md 文件,这里是对我们 React 脚手架的

react 脚手架 及路由和 redux

前提是我们需要下载 nodejs 使用 npm 下载 react 的脚手架,react-router-dom,redux 全局下载 react 的脚手架:npm i create-react-app -g 使用 react 脚手架创建一个 app 的项目:create-react-app app 根据指令进入 app 项目: cd app 下载 react 的路由插件:npm i react-router-dom -S 组件通信的优化: npm i redux -S 以上便是把我们的 react

react脚手架的建立——小白入门

一.介绍:React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设Instagram 的网站. 做出来以后,发现这套东西很好用,就在2013年5月开源了. 二.React脚手架:create-react-app React 的环境搭建,是比较繁琐的,有很多的依赖:react.react-dom.babel.webpack ... 需要很多的前置知识,很容易让人从入门到放弃. 于是就诞生了 脚手架 这种东西,

react.js 之 create-react-app 命令行工具系统讲解

react.js 教程之 create-react-app 命令行工具系统讲解 快速开始 npm install -g create-react-app create-react-app my-app cd my-app/ npm start 通过http://localhost:3000/查看你的app 使用 npm run build 编译打包程序 npm test 文件修改后测试,这部分内容后面讲 更新到最新版本 创建react app的主要分为两个包,一个包是create-react-a

react环境搭建

react.js有类似于vue-cli的脚手架 ---- create-react-app 以下是采用了淘宝国内镜像资源去下载的react脚手架图 安装完脚手架后,还必须初始化react应用在cmd键入: create-react-app my-app 到这里,react的脚手架工作已经准备完毕,使用npm start启动react应用 react脚手架启动项目完毕 原文地址:https://www.cnblogs.com/xiyangcai/p/8463545.html

001-前端系列-react系列

一.概述 原文地址:http://www.ruanyifeng.com/blog/2016/09/react-technology-stack.html 二.摘要 ES6 语法:教程 [可以了解] Babel:教程[可以了解] React:教程,示例库 [推荐官方https://reactjs.org/docs/hello-world.html] Webpack:教程 React 项目脚手架:代码库 Flex 布局:教程,示例 CSS Modules:教程,示例库 React-Router:教程

[Web 前端] webstorm 快速搭建react项目

cp from : https://blog.csdn.net/qq_39207948/article/details/79467144 前端新手如何安装webstorm ,初步搭建react项目 下载安装webstorm:配置成功: 配置成功后就可以开启webstorm项目了.(存微信收藏..) 1:在webstorm下配置node环境: 2:完成之后: React官方脚手架地址: https://github.com/facebook/create-react-app 在终端下安装执行npm