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 == ...
随机推荐
- J2EE总结(2)——Servlet/JSP
Servlet/JSP Servlet定义:部署在java的Webserver上的组件.整个java服务端程序都构建在Servlet之上,以多线程方式提 供服务,具有效率高.可扩展,可移植的特点. J ...
- 3DMax的OFusion插件的使用问题
使用OFusion将3D max导出到现场Ogre的Mesh该方法是经常使用的非.的一些问题,在这里为方便摘要. 1.OFusion得到: http://download.csdn.net/detai ...
- iis处理请求随记回顾
----http是无状态的, 每次http请求户不影响,都是独立的:不会记的上次请求: -------iis原理:输入地址--socket封装请求体报文--发送---iis解析封装响应体---返回: ...
- mysql删除和修改数据报错1175
当用MySQL Workbench进行数据库的批量更新时,执行一个语句会碰到以下错误提示: Error Code: 1175 You are using safe...without a WHERE ...
- js 将long日期格式 转换为标准日期格式方法
我们经常在操作的时候会发现从后台传递到view层的json中datetime类型变成了long型,当然你也可以从后台先转为string类型,但是如果是从和数据库对应的object中封装的话,就不能再去 ...
- 记录OC学习的一点一滴(一)
练习代码: 代码一:(面向过程的OC) // // main.m // Class01Test01 // // Copyright (c) 2014年 levi. All rights reserve ...
- Dynamics CRM不发布JS调试
本博客已迁移至 http://www.krely.cn/ 上个项目做了一年多,大多是在做JS的开发,由于开发人数比较多,着实被坑的不轻.因为JS修改完成之后必须要发布,对于我们动辄几千行的JS的调 ...
- Hashtable Dictionary List
Hashtable Dictionary List 谁效率更高 一 前言 很少接触HashTable晚上回来简单看了看,然后做一些增加和移除的操作,就想和List 与 Dictionary比较下存 ...
- window wamp下xhprof的安装使用,Graphviz配置
在新的工作安排下来前赶紧把手上工作优化下,本来是靠xdebug+grindview来的,不过还是麻烦,就换上这个轻量级的性能测试了.网上搜的大多都是lamp环境下的,wamp下的倒是不多,而且不好用, ...
- 更快的memcpy
更快的memcpy 写代码有时候和笃信宗教一样,一旦信仰崩溃,是最难受的事情.早年我读过云风的一篇<VC 对 memcpy 的优化>,以及<Efficiency geek 2: co ...