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

react搭配amazeui环境搭建的更多相关文章

  1. React Native的环境搭建以及开发的IDE

    (一)前言 前面的课程我们已经对React Native的环境搭建以及开发的IDE做了相关的讲解,今天我们的主要讲解的是应用设备运行(Running)以及调试方法(Debugging).本节的前提条件 ...

  2. React Native iOS环境搭建

    前段时间React Native for Android发布,感觉React Native会越来越多的公司开始研究.使用.所以周六也抽空搭建了iOS的开发环境,以便以后利用空闲的时间能够学习一下. 废 ...

  3. react+webpack+babel环境搭建

    [react+webpack+babel环境搭建] 1.react官方文档推荐使用 babel-preset-react.babel-preset-es2015 两个perset. Babel官方文档 ...

  4. React+Webpack+ES6环境搭建(自定义框架)

    引言 目前React前端框架是今年最火的.而基于React的React Native也迅速发展.React有其独特的组件化功能与JSX的新语法,帮助前端设计有了更好的设计与便捷,而React Nati ...

  5. typescript+react+antd基础环境搭建

    typescript+react+antd基础环境搭建(包含样式定制) tsconfig.json 配置 // 具体配置可以看上面的链接 这里module moduleResolution的配置都会影 ...

  6. Android React Native 开发环境搭建---windows下

    环境搭建 环境搭建可以参考RN官网,也可以参考中文版本:http://reactnative.cn/docs/0.45/getting-started.html 如果你希望可以看到原版的安装流程,可以 ...

  7. 0.react学习笔记-环境搭建与脚手架

    0.环境搭建 笔者使用的是deepin/mac两种系统,因为两个电脑经常切换用.环境搭建没什么区别. 0.1 node安装 按照node官网叙述安装 # Using Debian, as root c ...

  8. react介绍、环境搭建、demo运行实例

    React官网:https://reactjs.org/docs/create-a-new-react-app.html cnpm网址:http://npm.taobao.org/ 1.react介绍 ...

  9. React Native Android 环境搭建

    因为工作需要,最近正在学习React Native Android.温故而知新,把学习的内容记录下来巩固一下知识,也给有需要的人一些帮助. 需要说明的是,我刚接触React Native也不久,对它的 ...

随机推荐

  1. PHP读取Excel文件(PHPExcel)

    /*     * 读取Excel文件     * */    require_once (dirname(dirname(dirname(__FILE__))).'/PHPExcel/PHPExcel ...

  2. Python3基础 在print中用 %d 输出一个整数

    镇场诗: 诚听如来语,顿舍世间名与利.愿做地藏徒,广演是经阎浮提. 愿尽吾所学,成就一良心博客.愿诸后来人,重现智慧清净体.-------------------------------------- ...

  3. UVa 270 & POJ 1118 - Lining Up

    题目大意:给一些点,找出一条直线使尽可能多的点在这条直线上,求这条直线上点的个数. 以每一个点为原点进行枚举,求其它点的斜率,斜率相同则说明在一条直线上.对斜率排序,找出斜率连续相等的最大长度. #i ...

  4. Mac 安装Eclipse

    1.下载 1.1.网址 http://www.eclipse.org/downloads/download.php?file=/technology/epp/downloads/release/mar ...

  5. zepto.js swipe实现触屏tab菜单

    今天我们来说下zepto.js,有兴趣的朋友可以先进这个网站“http://zeptojs.com/” ,这个可以说是手机里的jquery,但是它取消了hover,加上了swipe及tap这两个触屏功 ...

  6. 【bzoj3998】 TJOI2015—弦论

    http://www.lydsy.com/JudgeOnline/problem.php?id=3998 (题目链接) 题意 给出一个字符串,求它的字典序第K小的子串是什么,分情况讨论不在同一位置的相 ...

  7. Linux内存布局

    在上一篇博文里,我们已经看到Linux如何有效地利用80x86的分段和分页硬件单元把逻辑地址转换为线性地址,在由线性地址转换到物理地址.那么我们的应用程序如何使用这些逻辑地址,整个内存的地址布局又是怎 ...

  8. Eclipse 打开文件所在文件夹

    右击文件 > Show In > System Explorer

  9. javascript获取整数随机数

    javascript获取整数随机数 // 从4到10的随机数,|0是生成正整数 var numBars = Math.random()*6+4|0; 也可以通过右移0位(或者左移0位)进行取整 var ...

  10. java中Integer比较需要注意的问题

    java中Integer比较需要注意的问题 package com.srie.test; import java.util.HashMap; import java.util.Map; public ...