yeoman生成react基本架构
工欲善其事必先利其器。在开始react开始之前,我们先使用一系列的前段工具构建自己的前端集成解决方案。
环境配置:
Bower,node js,npm,Grunt,Gulp,Yeoman
作者一直使用Mac Os编程,不了解其他环境的情况。
首先安装node js
访问网址:https://nodejs.org/en/
现在安装node js。
因为npm有时下载包会速度会特别慢甚至完全卡死,所以推荐使用smart-npm来执行npm命令。
在命令行执行命令:
npm install --global smart-npm --registry=https://registry.npm.taobao.org/
这样smart-npm就安装好了。smart-npm与npm在使用上没有区别,
我在电脑已经有梯子的情况下在未安装sarmt-npm前执行后面yo命令是的时候依然会被卡住。
安装smart-npm 后就十分顺利的解决了。
smart-npm 到底是什么 参照 https://github.com/qiu8310/smart-npm/
安装 yeoman
snpm install -g yo
安装react-webpack
在:http://yeoman.io/generators/
页面搜索react,可以获得最新的react相关的基础框架。本文以 react-webpack为示例。
react-webpack 在github里的地址
https://github.com/react-webpack-generators/generator-react-webpack
在终端输入命令行:
snpm install -g generator-react-webpack
构建你的项目
在项目路径下使用命令行:
yo react-webpack gallerty-by-react
这是一句yeoman命令,意思是 使用名为 react-webpack 的框架构建你的 gallerty-by-react项目
最后在chrome应用商店添加react的调试小程序。
https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi
这样你的项目基础框架就构建好了。可以准备开始react的开发了。
yeoman生成react基本架构的更多相关文章
- JHipster生成微服务架构的应用栈(一)- 准备工作
本系列文章演示如何用JHipster生成一个微服务架构风格的应用栈. 环境需求:安装好JHipster开发环境的CentOS 7.4(参考这里) 应用栈名称:appstack 认证微服务: uaa 业 ...
- JHipster生成微服务架构的应用栈(二)- 认证微服务示例
本系列文章演示如何用JHipster生成一个微服务架构风格的应用栈. 环境需求:安装好JHipster开发环境的CentOS 7.4(参考这里) 应用栈名称:appstack 认证微服务: uaa 业 ...
- JHipster生成微服务架构的应用栈(三)- 业务微服务示例
本系列文章演示如何用JHipster生成一个微服务架构风格的应用栈. 环境需求:安装好JHipster开发环境的CentOS 7.4(参考这里) 应用栈名称:appstack 认证微服务: uaa 业 ...
- JHipster生成微服务架构的应用栈(四)- 网关微服务示例
本系列文章演示如何用JHipster生成一个微服务架构风格的应用栈. 环境需求:安装好JHipster开发环境的CentOS 7.4(参考这里) 应用栈名称:appstack 认证微服务: uaa 业 ...
- JHipster生成微服务架构的应用栈(五)- 容器编排示例
本系列文章演示如何用JHipster生成一个微服务架构风格的应用栈. 环境需求:安装好JHipster开发环境的CentOS 7.4(参考这里) 应用栈名称:appstack 认证微服务: uaa 业 ...
- React Native 架构演进
写在前面 上一篇(React Native 架构一览)从设计.线程模型等方面介绍了 React Native 的现有架构,本篇将分析这种架构的局限性,以及 React Native 正在进行的架构升级 ...
- 用yeoman搭建react画廊项目笔记
1.安装yeoman npm install yo -g yo --version //检测 yeoman版本,成功显示版本号,则安装成功 2.到yeoman官网 http://yeoman.io ...
- React Native 架构一览
一.架构设计 整体上分为三大块,Native.JavaScript 与 Bridge: Native 管理 UI 更新及交互,JavaScript 调用 Native 能力实现业务功能,Bridge ...
- 【react】使用 create-react-app 构建基于TypeScript的React前端架构----上
写在前面 一直在探寻,那优雅的美:一直在探寻,那精湛的技巧:一直在探寻,那简单又直白,优雅而美丽的代码. ------ 但是在JavaScript的动态类型.有时尴尬的自动类型转换,以及 “0 == ...
随机推荐
- javascript图片延迟加载(转载)
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content=&q ...
- Hudson+Maven+Svn搭建持续集成环境
Hudson+Maven+Svn搭建持续集成环境 博客分类: 配置管理 mavenSVNTomcat项目管理配置管理 一.所用开发工具 1. Hudson: Hudson 是一种革命性的开放源码 ...
- java中dao层的通用层,通过反射机制,操作数据库的增删改,适用的范围是不包含属性类
这里首先必须注意的是:类的类名.字段必须与数据库中的表名和字段名保持一致,否则无法通过反射机制作出通用层 /** * 学生信息类,数据库中的StuInfo表 * */public class StuI ...
- c#中queue的用法
Queue队列就是先进先出.它并没有实现 IList,ICollection.所以它不能按索引访问元素,不能使用Add和Remove.下面是 Queue的一些方法和属性 Enqueue():在队列的末 ...
- 【转】在iOS开发中使用FMDB
本文转载自:唐巧的博客 在iOS开发中使用FMDB APR 22ND, 2012 前言 SQLite (http://www.sqlite.org/docs.html) 是一个轻量级的关系数据库.iO ...
- [Usaco2008 Dec]Patting Heads 轻拍牛头[筛法]
Description 今天是贝茜的生日,为了庆祝自己的生日,贝茜邀你来玩一个游戏. 贝茜让N(1≤N≤100000)头奶牛坐成一个圈.除了1号与N号奶牛外,i号奶牛与i-l号和i+l号奶 ...
- jquery数据验证插件
jquery数据验证插件(自制,简单,练手) 一:最近项目中js数据验证比较多,为了统一风格,移植复用,于是顺手封装了Jquery的插件. (function($) { var defaults ...
- C#的匿名委托 和 Java的匿名局部内部类
.NET:C#的匿名委托 和 Java的匿名局部内部类 目录 背景实验备注 背景返回目录 这几天重温Java,发现Java在嵌套类型这里提供的特性比较多,结合自身对C#中匿名委托的理解,我大胆的做了一 ...
- 有一个array的数组,长度为10000,大小不一,用算法找出该数组中的最大值。
不用算法的答案是: var a=[1,2,3,5……];alert(Math.max.apply(null, a));//最大值alert(Math.min.apply(null, a));//最 ...
- 原生Js封装的弹出框-弹出窗口-页面居中-多状态可选
原生Js封装的弹出框-弹出窗口-页面居中-多状态可选 实现了一下功能: 1.title可自定义 可拖拽 2.width height可以自定义 3.背景遮罩和透明度可以自定义 4.可以自己编辑弹出 ...