零React基础入门Amae UI Touch！
全文的目的是达成使用amazeui-touch进行项目开发，并且以我这个前端菜鸟所见所学来归纳整理。文章不对详细内容做讲解。
环境安装与前期准备
我的基础环境：
Win10
ATOM ： GitHub出的开源的编辑器
CMDER ： http://cmder.net/ 命令行工具， windows下一个炒鸡好用的神器。
Node.js ： https://nodejs.org/en/ 官网直接下载最新版安装即可
基本的配置需求：
webpack: https://webpack.github.io/
Gulp - 可选的
Amazeui-touch
React
npm：
http://www.alloyteam.com/2016...
atom插件安装
推荐两个插件：
react 语法高亮，缩进，JSX语法识别
linter-eslint 实时检查语法
webpack安装配置
基础的css loaders, style-loader, file-loader和其他配置不谈
Babel： 编译ES6、ES7成ES5 ： https://babeljs.io/
hot-loader https://github.com/gaearon/re...
webpack-dev-server
ESLint ： 代码规范，质量检查： https://csspod.com/getting-st...
Babel ： 根据官方文档配置就好： https://babeljs.io/docs/setup...
教程
React
核心部分当然还是React啦：
https://blog.lwxyfer.com/adva... 可以解决大部分问题
https://github.com/airbnb/jav... 代码规范
https://blog.risingstack.com/... 最佳实践
核心内容：
virtual DOM
JSX
components
props
state
lifecycle
event
undirectional data flow
以前总结过一些内容：advanced React --含大量链接（国内外的教程和文章等），与React相配合的东西太多了(:dog)
Router
官方给出足够多的文档和例子来学习和理解router：
https://github.com/reactjs/re...
https://github.com/reactjs/re...
浏览器
必须是chrome啦
React Developer Tools ： 配合react开发
Gulp -- 非必选的
Gulp是可选的：下面的链接随便看一个就能学会gulp，反正其实也是再用插件（-|-），详细的配置还是得看每一个插件的配置才行的。
阮一峰大神写的很好：http://javascript.ruanyifeng....
browser-sync 配置
https://addyosmani.com/blog/b...
http://www.vanamco.com/device...
可以使用USB链接，设置本地服务器端口就可以访问了。
sass -- 非必选
touch使用sass编写css，这也是可选的，你可以直接用css，也可以sass。在webpack或者Gulp中为其配置编译即可
sass官网： http://sass-lang.com/
sass中文站点：http://sass.bootcss.com/
sass教程：http://www.w3cplus.com/sassgu...
sass指南 ： https://github.com/HugoGiraud... 本地安装即可
PPT，可以看下： http://zciwp.github.io/PPT/pl...
过程
巴拉巴拉巴拉巴拉巴的把配置和依赖弄好以后呢，那么就到了项目时间。上面都是提到的各种需要的东西。
至于详细的基于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 文档。
当然要开发一个完整的项目，现在的东西还远远不够。
就酱，完。
原文链接
关键字：html5, css, JavaScript, react.js
版权声明
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！
