工欲善其事必先利其器。在开始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基本架构的更多相关文章

  1. JHipster生成微服务架构的应用栈(一)- 准备工作

    本系列文章演示如何用JHipster生成一个微服务架构风格的应用栈. 环境需求:安装好JHipster开发环境的CentOS 7.4(参考这里) 应用栈名称:appstack 认证微服务: uaa 业 ...

  2. JHipster生成微服务架构的应用栈(二)- 认证微服务示例

    本系列文章演示如何用JHipster生成一个微服务架构风格的应用栈. 环境需求:安装好JHipster开发环境的CentOS 7.4(参考这里) 应用栈名称:appstack 认证微服务: uaa 业 ...

  3. JHipster生成微服务架构的应用栈(三)- 业务微服务示例

    本系列文章演示如何用JHipster生成一个微服务架构风格的应用栈. 环境需求:安装好JHipster开发环境的CentOS 7.4(参考这里) 应用栈名称:appstack 认证微服务: uaa 业 ...

  4. JHipster生成微服务架构的应用栈(四)- 网关微服务示例

    本系列文章演示如何用JHipster生成一个微服务架构风格的应用栈. 环境需求:安装好JHipster开发环境的CentOS 7.4(参考这里) 应用栈名称:appstack 认证微服务: uaa 业 ...

  5. JHipster生成微服务架构的应用栈(五)- 容器编排示例

    本系列文章演示如何用JHipster生成一个微服务架构风格的应用栈. 环境需求:安装好JHipster开发环境的CentOS 7.4(参考这里) 应用栈名称:appstack 认证微服务: uaa 业 ...

  6. React Native 架构演进

    写在前面 上一篇(React Native 架构一览)从设计.线程模型等方面介绍了 React Native 的现有架构,本篇将分析这种架构的局限性,以及 React Native 正在进行的架构升级 ...

  7. 用yeoman搭建react画廊项目笔记

    1.安装yeoman   npm install yo -g yo --version //检测 yeoman版本,成功显示版本号,则安装成功 2.到yeoman官网 http://yeoman.io ...

  8. React Native 架构一览

    一.架构设计 整体上分为三大块,Native.JavaScript 与 Bridge: Native 管理 UI 更新及交互,JavaScript 调用 Native 能力实现业务功能,Bridge ...

  9. 【react】使用 create-react-app 构建基于TypeScript的React前端架构----上

    写在前面 一直在探寻,那优雅的美:一直在探寻,那精湛的技巧:一直在探寻,那简单又直白,优雅而美丽的代码. ------ 但是在JavaScript的动态类型.有时尴尬的自动类型转换,以及 “0 == ...

随机推荐

  1. javascript图片延迟加载(转载)

    <!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content=&q ...

  2. Hudson+Maven+Svn搭建持续集成环境

    Hudson+Maven+Svn搭建持续集成环境 博客分类: 配置管理 mavenSVNTomcat项目管理配置管理 一.所用开发工具 1.    Hudson: Hudson 是一种革命性的开放源码 ...

  3. java中dao层的通用层,通过反射机制,操作数据库的增删改,适用的范围是不包含属性类

    这里首先必须注意的是:类的类名.字段必须与数据库中的表名和字段名保持一致,否则无法通过反射机制作出通用层 /** * 学生信息类,数据库中的StuInfo表 * */public class StuI ...

  4. c#中queue的用法

    Queue队列就是先进先出.它并没有实现 IList,ICollection.所以它不能按索引访问元素,不能使用Add和Remove.下面是 Queue的一些方法和属性 Enqueue():在队列的末 ...

  5. 【转】在iOS开发中使用FMDB

    本文转载自:唐巧的博客 在iOS开发中使用FMDB APR 22ND, 2012 前言 SQLite (http://www.sqlite.org/docs.html) 是一个轻量级的关系数据库.iO ...

  6. [Usaco2008 Dec]Patting Heads 轻拍牛头[筛法]

    Description   今天是贝茜的生日,为了庆祝自己的生日,贝茜邀你来玩一个游戏.     贝茜让N(1≤N≤100000)头奶牛坐成一个圈.除了1号与N号奶牛外,i号奶牛与i-l号和i+l号奶 ...

  7. jquery数据验证插件

    jquery数据验证插件(自制,简单,练手)   一:最近项目中js数据验证比较多,为了统一风格,移植复用,于是顺手封装了Jquery的插件. (function($) { var defaults ...

  8. C#的匿名委托 和 Java的匿名局部内部类

    .NET:C#的匿名委托 和 Java的匿名局部内部类 目录 背景实验备注 背景返回目录 这几天重温Java,发现Java在嵌套类型这里提供的特性比较多,结合自身对C#中匿名委托的理解,我大胆的做了一 ...

  9. 有一个array的数组,长度为10000,大小不一,用算法找出该数组中的最大值。

    不用算法的答案是:   var a=[1,2,3,5……];alert(Math.max.apply(null, a));//最大值alert(Math.min.apply(null, a));//最 ...

  10. 原生Js封装的弹出框-弹出窗口-页面居中-多状态可选

    原生Js封装的弹出框-弹出窗口-页面居中-多状态可选   实现了一下功能: 1.title可自定义 可拖拽 2.width height可以自定义 3.背景遮罩和透明度可以自定义 4.可以自己编辑弹出 ...