工欲善其事必先利其器。在开始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. Web面试之JQuery

    程序员Web面试之JQuery   又到了一年一度的毕业季了,青春散场,却等待下一场开幕. 在求职大军中,IT行业的程序员.码农是工科类大学生的热门选择之一, 尤其是近几年Web的如火如荼,更是吸引了 ...

  2. SignalR 2.0 入门与提高

    SignalR 2.0 入门与提高 SignalR 2.0 最近整理了SignalR2.0 部分知识点,原文翻译,由于自己是土鳖,翻译得不好的地方,欢迎指正!仅供各位初学者学习! 第一节. 入门ASP ...

  3. 订单处理(c#实现)

    State模式的经典应用场景:订单处理(c#实现) State模式在对象内部状态发生变化的时候,改变自身的行为,这通常是通过切换内部状态对象实现的,对象将自身在各个状态的行为推给了状态对象,从而解开了 ...

  4. oracle导入数据

    oracle导入数据时候注意点: 1.imp system/admin@oracle9i file=E:\shujukuwenjian\2014-04-01.dmp fromuser=ptb_supe ...

  5. Scala中的语言特性是如何实现的(3) -- Trait

    我的新博客地址:http://cuipengfei.me/blog/2013/10/13/scala-trait/ 我在Coursera上跟了一门叫做Functional Programming Pr ...

  6. [转]OpenSolaris 2009.06, dev setup

    Source:http://seriouswebapps.com/opensolaris-200906-dev-setup 1. Snapshot the root zfs pool This all ...

  7. [转]About the security content of iOS 8

    Source:http://support.apple.com/kb/HT6441 For the protection of our customers, Apple does not disclo ...

  8. [转]Running JavaScript in an iOS application with JavaScriptCore

    原文:https://www.infinum.co/the-capsized-eight/articles/running-javascript-in-an-ios-application-with- ...

  9. Java:终结器

    目录 背景Java版:终结器防卫者C#版:“终结器防卫者”备注 背景返回目录 多数情况我们不需要重写 finalize 方法,只有当我们需要持有未托管资源的时候才需要,而此时重写 finalize 方 ...

  10. 3分钟教你做一个iphone手机浏览器

    3分钟教你做一个iphone手机浏览器 第一步:新建一个Single View工程: 第二步:新建好工程,关闭arc. 第三步:拖放一个Text Field 一个UIButton 和一个 UIWebV ...