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 == ...
随机推荐
- Web面试之JQuery
程序员Web面试之JQuery 又到了一年一度的毕业季了,青春散场,却等待下一场开幕. 在求职大军中,IT行业的程序员.码农是工科类大学生的热门选择之一, 尤其是近几年Web的如火如荼,更是吸引了 ...
- SignalR 2.0 入门与提高
SignalR 2.0 入门与提高 SignalR 2.0 最近整理了SignalR2.0 部分知识点,原文翻译,由于自己是土鳖,翻译得不好的地方,欢迎指正!仅供各位初学者学习! 第一节. 入门ASP ...
- 订单处理(c#实现)
State模式的经典应用场景:订单处理(c#实现) State模式在对象内部状态发生变化的时候,改变自身的行为,这通常是通过切换内部状态对象实现的,对象将自身在各个状态的行为推给了状态对象,从而解开了 ...
- oracle导入数据
oracle导入数据时候注意点: 1.imp system/admin@oracle9i file=E:\shujukuwenjian\2014-04-01.dmp fromuser=ptb_supe ...
- Scala中的语言特性是如何实现的(3) -- Trait
我的新博客地址:http://cuipengfei.me/blog/2013/10/13/scala-trait/ 我在Coursera上跟了一门叫做Functional Programming Pr ...
- [转]OpenSolaris 2009.06, dev setup
Source:http://seriouswebapps.com/opensolaris-200906-dev-setup 1. Snapshot the root zfs pool This all ...
- [转]About the security content of iOS 8
Source:http://support.apple.com/kb/HT6441 For the protection of our customers, Apple does not disclo ...
- [转]Running JavaScript in an iOS application with JavaScriptCore
原文:https://www.infinum.co/the-capsized-eight/articles/running-javascript-in-an-ios-application-with- ...
- Java:终结器
目录 背景Java版:终结器防卫者C#版:“终结器防卫者”备注 背景返回目录 多数情况我们不需要重写 finalize 方法,只有当我们需要持有未托管资源的时候才需要,而此时重写 finalize 方 ...
- 3分钟教你做一个iphone手机浏览器
3分钟教你做一个iphone手机浏览器 第一步:新建一个Single View工程: 第二步:新建好工程,关闭arc. 第三步:拖放一个Text Field 一个UIButton 和一个 UIWebV ...