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 == ...
随机推荐
- 应用CSS的page-break-after属性 实现WEB页面强制分页打印
虽然dedecms.com向大家介绍了很多CSS属性的相关知识,但有些非常冷门的属性还是有所欠缺.在B/S程序中,对打印页面的控制,CSS相对比较弱,例如: 自动分页, 就基本没啥实际用途.我们通常需 ...
- RequireJS 入门指南
RequireJS 入门指南 http://requirejs.org/ 简介如今最常用的JavaScript库之一是RequireJS.最近我参与的每个项目,都用到了RequireJS,或者是我向它 ...
- Dom解析xml源代码
import java.io.File; import java.io.IOException; import javax.xml.parsers.DocumentBuilder; import ja ...
- 由于检索用户的本地应用程序数据路径时出错,导致无法生成 SQL Server 的用户实例
/”应用程序中的服务器错误. 由于检索用户的本地应用程序数据路径时出错,导致无法生成 SQL Server 的用户实例.请确保该用户在此计算机上有本地用户配置文件.该连接将关闭. 堆栈跟踪: [Sql ...
- c/c++中typedef详解
1. typedef 最简单使用 typedef long byte_4; // 给已知数据类型long起个新名字,叫byte_4 你可以在任何需要 long 的上下文中使用 byte_4.注意 ty ...
- last error : SSL certificate problem, verify that the CA cert is OK. Details: error:14090086:SSL routines:SSL3_GET_SERVER_CERTIFICATE:certificate veri
今天在用搜狐提供的邮件群发系统的sdk,做发送邮件的测试时,提示: last error : SSL certificate problem, verify that the CA cert is O ...
- Python 用IMAP接收邮件
一.简介IMAP(Internet Message Access Protocol),这个协议与POP一样,也是从邮件服务器上下载邮件到本机,不过IMAP比POP的功能要更加强大些,IMAP除支持PO ...
- Unity3d物体模型(实现旋转缩放平移自动旋转)
基本功能实现:物体通过鼠标左键上下移动,中间键缩放.右键旋转,30秒没操作,物体自动旋转 实例代码: using UnityEngine; using System.Collections; publ ...
- 初试weka数据挖掘
初试weka数据挖掘 Posted on 2013-09-07 13:26 DM张朋飞 阅读(321) 评论(7) 编辑 收藏 偶然间在网上看到了一篇关于weka好的博文,就记录了下来…… weka下 ...
- 【NET】WebBrowser执行脚本以及一般操作代码
public class WebBrowserAssistant { System.Windows.Forms.WebBrowser wb; public WebBrowserAssistant(Sy ...