react搭配amazeui环境搭建

1、安装node

https://nodejs.org/en/download/

查看node npm版本

2、安装react

创建新的react单页面应用

npm install -g create-react-app

create-react-app react-demo

3、安装 amazeui

1)首先 cd react-demo进入到刚创建的项目之中

2)接下来可以执行安装: Npm install amazeui

4、安装amazeui 所需引用的react组件

npm install amazeui-react

5 页面配置

6组件的引用

7、运行

npm start

效果图（简单的按钮展示）

项目结构

Amazeui组件

Web组件基于 React.js 封装的 Web 组件，在 React 中，一切皆组件，无论是展示性的，还是带有交互功能的，都是组件；所有组件都是使用 JS 编写、渲染。

Amaze UI React 组件分为一下几个类型：

布局相关：用于布局的组件，如网格等；
HTML 元素：文本域、按钮、表格等 HTML 元素增强封装；
导航相关：用于导航的组件；
常用相关：其他常用的组件，如图标等；
交互组件：带交互功能的组件，如模态窗口等；
移动组件：针对移动端设计的组件。

布局相关(Layout)

网格Grid

等分网格AvgGrid

HTML元素 Elements

1) 按钮系列 Buttons

2) Form相关 Forms

3) 图片系列 Images

4) 缩略图 Thumbnail

5) 表格 Table

导航相关 Navs

1) 导航 Nav

2) 导航条 Topbar

3) 面包屑导航 Breadcrumb

4) 分页 Pagination

5) 标签页 Tabs

常用组件(Common)

1) 内容页Article

2) 小徽章Badge

3) 关闭按钮Close

4) 图标Icon

5) 列表List

6) 面板Panel

7) 进度条Progress

交互组件

警告框 Alert

1) 日期时间选择 DateTimePicker

2) 下拉 Dropdown

3) 模态窗口 Modal

4) 弹出层 Popover

5) 滚动侦测 ScrollSpy

6) 导航侦测 ScrollSpyNav

7) 下拉选框 Selected

8) 图片轮播 Slider

9) 顶部固定 Sticky

巴特西