零React基础入门Amaze UI Touch！
|
全文的目的是达成使用amazeui-touch进行项目开发，并且以我这个前端菜鸟所见所学来归纳整理。文章不对详细内容做讲解。 环境安装与前期准备我的基础环境：
基本的配置需求：
npm：http://www.alloyteam.com/2016... atom插件安装推荐两个插件：
webpack安装配置
教程
React核心部分当然还是React啦：
核心内容：
以前总结过一些内容：advanced React --含大量链接（国内外的教程和文章等），与React相配合的东西太多了(:dog) Router官方给出足够多的文档和例子来学习和理解router： https://github.com/reactjs/re... 浏览器
Gulp -- 非必选的Gulp是可选的：下面的链接随便看一个就能学会gulp，反正其实也是再用插件（-|-），详细的配置还是得看每一个插件的配置才行的。
browser-sync 配置https://addyosmani.com/blog/b... 可以使用USB链接，设置本地服务器端口就可以访问了。 sass -- 非必选touch使用sass编写css，这也是可选的，你可以直接用css，也可以sass。在webpack或者Gulp中为其配置编译即可
过程巴拉巴拉巴拉巴拉巴的把配置和依赖弄好以后呢，那么就到了项目时间。上面都是提到的各种需要的东西。 咱先看看版本： 让我们荡起双桨下面以一个小例子来讲讲： 第一步：构建你的目录结构 . ├── 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 (
<div>
<h1>Hello AMAZEUI-TOUCH</h1>
<Button>first amazeui-touch touch</Button>
</div>
)
}
};
// 渲染,当然你还需要一个 html来加载打包好的文件，手动创建一个就好。
ReactDOM.render(<FirstTouch />,document.getElementById('root'));
好了，让我们来瞅一瞅有木有成功：运行 Amaze UI Touch只提供 UI 组件（View），对配套技术不做限定，方便用户与现有技术栈快速整合，降低使用成本。 对于每个组件的使用和配置，请看Amaze UI Touch 文档。 当然要开发一个完整的项目，现在的东西还远远不够。 就酱，完。 原文链接 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |