工欲善其事必先利其器。在开始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. ADFS 2.0 配置简介 PartⅢ – 声明规则语言

    上一篇我们最终把 ADFS 与应用之间的信任关系建立起来了,但是应用接收到的声明信息只有默认的两个,这次我们就来学学怎么配置声明. 一.声明存储配置 ADFS 目前默认支持三种方式的声明值存储,另外还 ...

  2. james+javamail入门

    James+Javamail构建邮件服务(一) 本文描述如何使用James搭建具备一定邮件过滤.邮件操作功能的邮件服务器,以及使用Javamail实现对James服务器邮件的收发功能. 1关于Jame ...

  3. Function.prototype.toString

    语法:fn.toString(indentation) 改方法返回当前函数源代码的字符串,而且还可对此字符串进行操作,比如: function num(){ }; var str = num.toSt ...

  4. js urlencode , encodeURIComponent

    js 对文字进行编码涉及3个函数:escape,encodeURI,encodeURIComponent,相应3个解码函数:unescape,decodeURI,decodeURIComponent ...

  5. asp.net MVC2.0学习笔记

    asp.net;与mvc都是不可替代的:只是多一种选择:(解决了许多asp.net的许多缺点) model:充血模型.领域模型:很大程度的封装: 控制器:处理用户的交互,处理业务逻辑的调用,指定具体的 ...

  6. poj3006 筛选法求素数模板(数论)

    POJ:3006 很显然这是一题有关于素数的题目. 注意数据的范围,爆搜超时无误. 这里要用到筛选法求素数. 筛选法求素数的大概思路是: 如果a这个数是一个质数,则n*a不是质数. 用一个数组实现就是 ...

  7. Spectral Clustering

    谱聚类算法(Spectral Clustering)优化与扩展   谱聚类(Spectral Clustering, SC)在前面的博文中已经详述,是一种基于图论的聚类方法,简单形象且理论基础充分,在 ...

  8. 企业架构研究总结(28)——TOGAF架构开发方法(ADM)之需求管理阶段

    1.11 需求管理(Requirements Management) 企业架构开发方法各阶段——需求管理 1.11.1 目标 本阶段的目标是定义一个过程,使企业架构的需求可以被识别.存储并与其他架构开 ...

  9. jQuery event的复制粘贴的坑

    jQuery为了兼容性会把系统暴露出来的event重新整理一遍,但是复制粘贴的event就被丢掉了. 所以要在所有原生浏览器想实现复制粘贴,大家都用flash实现了.其实只要用原生的方法捕获事件就ok ...

  10. ios开发屏幕问题

    1. 程序要要支持Iphone 和 ipad,所以首先必需创建一通用程序,这一操作只要在创建程序时在 devices那栏上勾选universal即可,完成后会发现有两个.xib文件,但只有一个view ...