资讯专栏INFORMATION COLUMN

零React基础入门Amaze UI Touch!

王晗 / 1641人阅读

摘要:全文的目的是达成使用进行项目开发,并且以我这个前端菜鸟所见所学来归纳整理。环境安装与前期准备我的基础环境出的开源的编辑器命令行工具,下一个炒鸡好用的神器。只提供组件,对配套技术不做限定,方便用户与现有技术栈快速整合,降低使用成本。

全文的目的是达成使用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...

教程

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

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

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

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

React

核心部分当然还是React啦:

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

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://gulpjs.com/

阮一峰大神写的很好: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/...

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

) } }; // 渲染, 当然你还需要一个 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 文档。

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

就酱,完。

原文链接

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/86465.html

相关文章

  • React基础入门Amaze UI Touch

    摘要:全文的目的是达成使用进行项目开发,并且以我这个前端菜鸟所见所学来归纳整理。环境安装与前期准备我的基础环境出的开源的编辑器命令行工具,下一个炒鸡好用的神器。只提供组件,对配套技术不做限定,方便用户与现有技术栈快速整合,降低使用成本。 全文的目的是达成使用amazeui-touch进行项目开发,并且以我这个前端菜鸟所见所学来归纳整理。文章不对详细内容做讲解。 环境安装与前期准备 我的基础环...

    OldPanda 评论0 收藏0
  • Amaze UI Web 与 Amaze UI Touch 有什么不同?一张图给你解释!

    摘要:推崇一切皆组件的组件化理念,目前它提供包含专门针对跨屏网页开发的以及针对移动端的混合应用开发框架,在全球权威的代码托管平台上,的数量超过,名列国内开源项目前茅。但是很多人会有疑问,与有什么不同下图给你答案。官方网站官方网站 Amaze UI 推崇一切皆组件的组件化理念,目前它提供包含专门针对跨屏 HTML5 网页开发的 Amaze UI Web 以及针对移动端的 HTML5 混合应用开...

    SKYZACK 评论0 收藏0
  • Amaze UI Web 与 Amaze UI Touch 有什么不同?一张图给你解释!

    摘要:推崇一切皆组件的组件化理念,目前它提供包含专门针对跨屏网页开发的以及针对移动端的混合应用开发框架,在全球权威的代码托管平台上,的数量超过,名列国内开源项目前茅。但是很多人会有疑问,与有什么不同下图给你答案。官方网站官方网站 Amaze UI 推崇一切皆组件的组件化理念,目前它提供包含专门针对跨屏 HTML5 网页开发的 Amaze UI Web 以及针对移动端的 HTML5 混合应用开...

    jzman 评论0 收藏0

发表评论

0条评论

王晗

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<