摘要：全文的目的是達(dá)成使用進(jìn)行項(xiàng)目開(kāi)發(fā)，并且以我這個(gè)前端菜鳥(niǎo)所見(jiàn)所學(xué)來(lái)歸納整理。環(huán)境安裝與前期準(zhǔn)備我的基礎(chǔ)環(huán)境出的開(kāi)源的編輯器命令行工具，下一個(gè)炒雞好用的神器。只提供組件，對(duì)配套技術(shù)不做限定，方便用戶與現(xiàn)有技術(shù)棧快速整合，降低使用成本。

全文的目的是達(dá)成使用amazeui-touch進(jìn)行項(xiàng)目開(kāi)發(fā)，并且以我這個(gè)前端菜鳥(niǎo)所見(jiàn)所學(xué)來(lái)歸納整理。文章不對(duì)詳細(xì)內(nèi)容做講解。

我的基礎(chǔ)環(huán)境：

Win10

ATOM ： GitHub出的開(kāi)源的編輯器

CMDER ： http://cmder.net/ 命令行工具， windows下一個(gè)炒雞好用的神器。

Node.js ： https://nodejs.org/en/ 官網(wǎng)直接下載最新版安裝即可

基本的配置需求：

webpack: https://webpack.github.io/

Gulp - 可選的

Amazeui-touch

React

http://www.alloyteam.com/2016...

推薦兩個(gè)插件：

react 語(yǔ)法高亮，縮進(jìn)，JSX語(yǔ)法識(shí)別

linter-eslint 實(shí)時(shí)檢查語(yǔ)法

基礎(chǔ)的css loaders, style-loader, file-loader和其他配置不談

Babel： 編譯ES6、ES7成ES5 ： https://babeljs.io/

hot-loader https://github.com/gaearon/re...

webpack-dev-server

ESLint ： 代碼規(guī)范，質(zhì)量檢查： https://csspod.com/getting-st...

Babel ： 根據(jù)官方文檔配置就好： https://babeljs.io/docs/setup...

https://segmentfault.com/a/11...

https://egghead.io/lessons/re...

https://blog.risingstack.com/...

https://edspencer.net/2016/03...

核心部分當(dāng)然還是React啦：

https://facebook.github.io/re...

https://blog.lwxyfer.com/adva... 可以解決大部分問(wèn)題

https://github.com/airbnb/jav... 代碼規(guī)范

https://blog.risingstack.com/... 最佳實(shí)踐

核心內(nèi)容：

virtual DOM

JSX

components

props

state

lifecycle

event

undirectional data flow

以前總結(jié)過(guò)一些內(nèi)容：advanced React --含大量鏈接（國(guó)內(nèi)外的教程和文章等），與React相配合的東西太多了(:dog)

官方給出足夠多的文檔和例子來(lái)學(xué)習(xí)和理解router：

https://github.com/reactjs/re...
https://github.com/reactjs/re...

必須是chrome啦

React Developer Tools ： 配合react開(kāi)發(fā)

Gulp是可選的：下面的鏈接隨便看一個(gè)就能學(xué)會(huì)gulp，反正其實(shí)也是再用插件（-|-），詳細(xì)的配置還是得看每一個(gè)插件的配置才行的。

官網(wǎng)： http://gulpjs.com/

阮一峰大神寫(xiě)的很好：http://javascript.ruanyifeng....

https://css-tricks.com/gulp-f...

https://scotch.io/tutorials/a...

https://www.sitepoint.com/int...

https://www.smashingmagazine....

https://teamtreehouse.com/lib...

https://github.com/nimojs/gul...

http://www.hubwiz.com/course/...

https://addyosmani.com/blog/b...
http://www.vanamco.com/device...

可以使用USB鏈接，設(shè)置本地服務(wù)器端口就可以訪問(wèn)了。

touch使用sass編寫(xiě)css，這也是可選的，你可以直接用css，也可以sass。在webpack或者Gulp中為其配置編譯即可

sass官網(wǎng)： http://sass-lang.com/

sass中文站點(diǎn)：http://sass.bootcss.com/

sass教程：http://www.w3cplus.com/sassgu...

sass指南 ： https://github.com/HugoGiraud... 本地安裝即可

PPT，可以看下： http://zciwp.github.io/PPT/pl...

巴拉巴拉巴拉巴拉巴的把配置和依賴(lài)弄好以后呢，那么就到了項(xiàng)目時(shí)間。上面都是提到的各種需要的東西。
至于詳細(xì)的基于webpack搭建React開(kāi)發(fā)環(huán)境的過(guò)程，網(wǎng)上一搜一大堆，這里就不做過(guò)多的講解了。

咱先看看版本：node --version,官網(wǎng)下的話，一般下的是4.4.7長(zhǎng)期支持版本的，更加穩(wěn)定些嘛。
再看看NPM: npm --version，推薦升級(jí)到最新版：npm install npm@latest -g,npm包的管理方式更加扁平化了。

下面以一個(gè)小例子來(lái)講講：

第一步：構(gòu)建你的目錄結(jié)構(gòu)

.
├── 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  // 各種加載器

第三部： 配置項(xiàng)目所需:

// 將下載好 Amaze UI Touch， React ， React DOM
npm install --save amazeui-touch react react-dom 

第四部: 配置babel

// 創(chuàng)建并且配置 .babelrc：
touch .babelrc
// 配置
{
    "presets": [
        "es2015",
        "react"
    ]
}

第五部：配置webpack

// 各項(xiàng)配置的深入，請(qǐng)?jiān)斂磜ebpack的文檔。
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"
      },
    ]
  }
};

第六部：你的第一個(gè)項(xiàng)目：entry.js

// 引入你的依賴(lài)
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"; // 引入你需要的組件

// 你的第一個(gè)組件
class FirstTouch extends React.Component{
  render() {
    return (
      

        
Hello AMAZEUI-TOUCH
        first amazeui-touch touch
      
    )
  }
};

// 渲染, 當(dāng)然你還需要一個(gè) html來(lái)加載打包好的文件，手動(dòng)創(chuàng)建一個(gè)就好。
ReactDOM.render(, document.getElementById("root"));

好了，讓我們來(lái)瞅一瞅有木有成功：運(yùn)行 webpack-dev-server --progress --colors
瀏覽器打開(kāi)： 127.0.0.1:8100 (我們?cè)趙ebpack-dev-server中設(shè)置的端口)。沒(méi)有問(wèn)題的話，你就會(huì)看到頁(yè)面了，自己試一試吧。

Amaze UI Touch只提供 UI 組件（View），對(duì)配套技術(shù)不做限定，方便用戶與現(xiàn)有技術(shù)棧快速整合，降低使用成本。 對(duì)于每個(gè)組件的使用和配置，請(qǐng)看Amaze UI Touch 文檔。

當(dāng)然要開(kāi)發(fā)一個(gè)完整的項(xiàng)目，現(xiàn)在的東西還遠(yuǎn)遠(yuǎn)不夠。

就醬，完。

原文鏈接