摘要:全文的目的是达成使用进行项目开发,并且以我这个前端菜鸟所见所学来归纳整理。环境安装与前期准备我的基础环境出的开源的编辑器命令行工具,下一个炒鸡好用的神器。只提供组件,对配套技术不做限定,方便用户与现有技术栈快速整合,降低使用成本。
全文的目的是达成使用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 () } }; // 渲染, 当然你还需要一个 html来加载打包好的文件,手动创建一个就好。 ReactDOM.render(Hello AMAZEUI-TOUCH
, 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
摘要:全文的目的是达成使用进行项目开发,并且以我这个前端菜鸟所见所学来归纳整理。环境安装与前期准备我的基础环境出的开源的编辑器命令行工具,下一个炒鸡好用的神器。只提供组件,对配套技术不做限定,方便用户与现有技术栈快速整合,降低使用成本。 全文的目的是达成使用amazeui-touch进行项目开发,并且以我这个前端菜鸟所见所学来归纳整理。文章不对详细内容做讲解。 环境安装与前期准备 我的基础环...
摘要:推崇一切皆组件的组件化理念,目前它提供包含专门针对跨屏网页开发的以及针对移动端的混合应用开发框架,在全球权威的代码托管平台上,的数量超过,名列国内开源项目前茅。但是很多人会有疑问,与有什么不同下图给你答案。官方网站官方网站 Amaze UI 推崇一切皆组件的组件化理念,目前它提供包含专门针对跨屏 HTML5 网页开发的 Amaze UI Web 以及针对移动端的 HTML5 混合应用开...
摘要:推崇一切皆组件的组件化理念,目前它提供包含专门针对跨屏网页开发的以及针对移动端的混合应用开发框架,在全球权威的代码托管平台上,的数量超过,名列国内开源项目前茅。但是很多人会有疑问,与有什么不同下图给你答案。官方网站官方网站 Amaze UI 推崇一切皆组件的组件化理念,目前它提供包含专门针对跨屏 HTML5 网页开发的 Amaze UI Web 以及针对移动端的 HTML5 混合应用开...
阅读 1968·2021-09-29 09:35
阅读 1786·2019-08-30 14:15
阅读 2944·2019-08-30 10:56
阅读 922·2019-08-29 16:59
阅读 531·2019-08-29 14:04
阅读 1267·2019-08-29 12:30
阅读 978·2019-08-28 18:19
阅读 441·2019-08-26 11:51