html touch ui,零React基础入门Amaze UI Touch！

全文的目的是达成使用amazeui-touch进行项目开发，并且以我这个前端菜鸟所见所学来归纳整理。文章不对详细内容做讲解。

环境安装与前期准备

我的基础环境：

Win10

ATOM ： GitHub出的开源的编辑器

CMDER ： http://cmder.net/ 命令行工具， windows下一个炒鸡好用的神器。

Node.js ： https://nodejs.org/en/ 官网直接下载最新版安装即可

基本的配置需求：

Gulp - 可选的

Amazeui-touch

React

npm：

atom插件安装

推荐两个插件：

react 语法高亮，缩进，JSX语法识别

linter-eslint 实时检查语法

webpack安装配置

基础的css loaders, style-loader, file-loader和其他配置不谈

Babel： 编译ES6、ES7成ES5 ： https://babeljs.io/

webpack-dev-server

教程

React

核心部分当然还是React啦：

核心内容：

virtual DOM

JSX

components

props

state

lifecycle

event

undirectional data flow

以前总结过一些内容：advanced React --含大量链接(国内外的教程和文章等)，与React相配合的东西太多了(:dog)

Router

官方给出足够多的文档和例子来学习和理解router：

浏览器

必须是chrome啦

Gulp -- 非必选的

Gulp是可选的：下面的链接随便看一个就能学会gulp，反正其实也是再用插件(-|-)，详细的配置还是得看每一个插件的配置才行的。

browser-sync 配置

可以使用USB链接，设置本地服务器端口就可以访问了。

sass -- 非必选

touch使用sass编写css，这也是可选的，你可以直接用css，也可以sass。在webpack或者Gulp中为其配置编译即可

过程

巴拉巴拉巴拉巴拉巴的把配置和依赖弄好以后呢，那么就到了项目时间。上面都是提到的各种需要的东西。

至于详细的基于webpack搭建React开发环境的过程，网上一搜一大堆，这里就不做过多的讲解了。

咱先看看版本：node --version,官网下的话，一般下的是4.4.7长期支持版本的，更加稳定些嘛。

再看看NPM: npm --version，推荐升级到最新版：npm install npm@latest -g,npm包的管理方式更加扁平化了。

让我们荡起双桨

下面以一个小例子来讲讲：

第一步：构建你的目录结构

.

├── package.json // npm配置文件

├── README.md // README

├── webpack.config.js // webpack 配置文件

├── .babelrc // babel 配置文件

├── app // 源文件目录

│   ├── entry.js // 作为webpack的入口文件

│   ├── index.html // html

│   ├── js // js 目录

│   ├── style // style 目录

│   ├── build // 打包好的文件可以放这里

第二部：安装基本的

// 使用CMDER跑这些命令是极好的

npm init // 初始化npm，并且生成package.json

npm install --save-dev webpack webpack-dev-server // 下载webpack

npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react // 下载babel

npm install --save-dev style-loader css-loader file-loader // 各种加载器

第三部： 配置项目所需:

// 将下载好 Amaze UI Touch， React ， React DOM

npm install --save amazeui-touch react react-dom

第四部: 配置babel

// 创建并且配置 .babelrc：

touch .babelrc

// 配置

{

"presets": [

"es2015",

"react"

]

}

第五部：配置webpack

// 各项配置的深入，请详看webpack的文档。

const webpack = require('webpack');

module.exports = {

entry: './app/entry.js', // 入口

output: { // 输出

path: './app/dist',

filename: 'bundle.js',

},

devServer: { // webpack-dev-server

inline: true,

contentBase: './app',

port: 8100,

},

resolve: {

extensions: ['', '.js', '.jsx'],

},

module: {

loaders: [

{ // 配置babel加载

test: /\.js?$/,

exclude: /node_modules/,

loader: 'babel',

},

{ // 配置css加载，用sass的话，就配置sass的加载器就好

test: /\.css$/, loader: 'style-loader!css-loader'

},

{ // 配置字体文件加载

test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,

loader: 'file-loader'

},

]

}

};

第六部：你的第一个项目：entry.js

// 引入你的依赖

import React from 'react';

import ReactDOM from 'react-dom';

import 'amazeui-touch/dist/amazeui.touch.min.css'; // 引入打包好的touch的css，也可以直接单独引入模块的css

import { Button } from 'amazeui-touch'; // 引入你需要的组件

// 你的第一个组件

class FirstTouch extends React.Component{

render() {

return (

Hello AMAZEUI-TOUCH

first amazeui-touch touch

)

}

};

// 渲染, 当然你还需要一个 html来加载打包好的文件，手动创建一个就好。

ReactDOM.render(, document.getElementById('root'));

好了，让我们来瞅一瞅有木有成功：运行 webpack-dev-server --progress --colors

浏览器打开： 127.0.0.1:8100 (我们在webpack-dev-server中设置的端口)。没有问题的话，你就会看到页面了，自己试一试吧。

Amaze UI Touch只提供 UI 组件(View)，对配套技术不做限定，方便用户与现有技术栈快速整合，降低使用成本。 对于每个组件的使用和配置，请看Amaze UI Touch 文档。

当然要开发一个完整的项目，现在的东西还远远不够。

就酱，完。