1.安装yeoman

在安装nodeJs的基础上,输入命令:npm install -g yo grunt-cli bower,安装yeoman,grunt,bowerify

安装完成后,输入命令:yo --version,查看当前yeoman的版本号

yeoman官网地址:http://yeoman.io/

2.去http://yeoman.io/查看generator,安装generator

输入命令:npm install -g generator-react-webpack

3.安装generator完后,输入命令:npm ls -g depth=1 2>/dev/null | grep generator,查看webpack、react等的版本号

在windows系统下会报错,【grep是Linux里面的命令,因此需要linux环境,windows可以用Git bash,gitbash里有MinGW,可以执行执行一些linux命令】

参考文档:http://blog.csdn.net/esther_heesch/article/details/52972767

安装git的方法:http://jingyan.baidu.com/article/90895e0fb3495f64ed6b0b50.html

git bash运行的结果:

4.安装完git后,注册github账号,将github上新建的仓库导到本地来

使用git bash命令工具,在你将要导出项目的文件夹内,右键Git Bash Here打开命令工具

输入命令:git clone 新建仓库的地址

运行完命令后,就可以看到在导出项目文件夹内多出了以github上仓库名命名的项目文件夹

5.在命令行中输入命令:cd gallery-by-react,进入gallery-by-react文件夹

输入命令:yo react-webpack gallery-by-react,根据提示生成项目所需

运行完后的目录:

6.运行完后发现缺少Gruntfile.js,这是由于generator-react-webpack V2.0 移除了Grunt(webpack替代)。可以执行 npm start 或者npm run serve 启动服务

然后在网址上输入http://localhost:8000/webpack-dev-server/,即可访问

React学习实例总结,包含yeoman安装、webpack构建的更多相关文章

  1. react学习笔记(一)用create-react-app构建 React 开发环境

    React 可以高效.灵活的用来构建用户界面框架,react利用高效的算法最小化重绘DOM. create-react-app 是来自于 Facebook,通过该命令不需配置就能快速构建 React ...

  2. React 入门实例

    React 入门实例教程 一.安装 React 的安装包,可以到官网下载. $ git clone git@github.com:ruanyf/react-demos.git 如果你没安装 git, ...

  3. 由React学习到Yeoman安装以及遇到的问题

    离职闲下来之后想着学一些新知识,本来是想从react入手,结果延伸出去的内容就像一棵树的树枝,不断增加. 学习计划是从这里开始的(6周学习计划,攻克javascript难关 https://zhuan ...

  4. webpack前端构建工具学习总结(一)之webpack安装、创建项目

    npm是随nodeJs安装包一起安装的包管理工具,能解决NodeJS代码部署上的很多问题: 常见的使用场景有以下几种: 允许用户从NPM服务器下载别人编写的第三方包到本地使用. 允许用户从NPM服务器 ...

  5. webpack学习笔记一:安装webpack、webpack-dev-server、内存加载js和html文件、loader处理非js文件

    一 .webpack学习环境准备: 1:window系统 2:安装node.js  官方网址 下载好后下一步下一步安装即可 安装步骤略过....... 3:nrm的安装 打开cmd命令控制台 输入:n ...

  6. React学习笔记-1-什么是react,react环境搭建以及第一个react实例

    什么是react?react的官方网站:https://facebook.github.io/react/下图这个就是就是react的标志,非常巧合的是他和我们的github的编辑器Atom非常相似. ...

  7. webpack学习(一)起步安装

    起步   webpack 用于编译 JavaScript 模块.一旦完成安装,你就可以通过 webpack 的 CLI 或 API 与其配合交互.如果你还不熟悉 webpack,请阅读核心概念和打包器 ...

  8. webpack学习(一)项目中安装webpack

    如何在项目中安装webpack,webpack-cli? 前提:电脑安装了 node和npm包管理工具 1 创建项目文件夹或者在已有的项目中打开终端  输入相关命令: npm init 因为已经安装好 ...

  9. React基本实例

    学习React不是一蹴而就的事情,入门似乎也没那么简单.但一切都是值得的. 今天给大家带来一个详细的React的实例,实例并不难,但对于初学者而言,足够认清React的思考和编写过程.认真完成这个实例 ...

随机推荐

  1. EF Core的安装、EF Core与数据库结合

    一.新建一个.net core的MVC项目                         新建好项目后,不能像以前一样直接在新建项中添加ef, 需要用命令在添加ef的依赖      二.EF Cor ...

  2. msq 表操作与其数据类型

    一:表介绍 表相当于文件, 表中的一条记录就相当于文件的一行内容, 不同的是,表中的一条记录有对应的标题,称为表的字段: id,name, age, sex,称为字段, 其余的一行内容称为一条记录. ...

  3. Fitnesse的一个简单实例

    Fixture 代码 package eg; import org.joda.time.DateTime; public class JodaTime { int year; public Strin ...

  4. (水题)HDU - 1077 - Catching Fish - 计算几何

    http://acm.hdu.edu.cn/showproblem.php?pid=1077 很明显这样的圆,必定有两个点在边界上.n平方枚举圆,再n立方暴力判断.由于没有给T,所以不知道行不行.

  5. DLL中加载其它DLL使用LoadLibrary加载动态库失败的解决办法

    方式一 采用LoadLibraryEx 若DLL不在调用方的同一目录下,可以用LoadLibrary(L"DLL绝对路径")加载.但若调用的DLL内部又调用另外一个DLL,此时调用 ...

  6. hdu1158【DP】

    题意: 第一行项目数: 第二行每个工人的Hire Salary Fire money 第三行每个项目需要的人的数量: 工人在hire/fire的时候要付出额外的钱,如果已经hire了还没有fire就一 ...

  7. button 获取 cell

        - (void)cellBtnClicked:(id)sender event:(id)event {     NSSet *touches =[event allTouches];      ...

  8. MySQL--表操作1

    这是对自己学习燕十八老师mysql教程的总结,非常感谢燕十八老师. 依赖软件:mysql 系统环境:win 注:本次所有命令都是在命令行上执行 数据库的四大天王操作:增删改查 增删改查都是在对表进行操 ...

  9. UVa12304(计算几何中圆的基本操作)

    断断续续写了250多行的模拟,其间被其他事情打扰,总共花了一天才AC吧~ 这道题目再次让我明白,有些事情看起来很难,实际上并没有我们想象中的那么难.当然了我主要指的不是这个题的难度…… 也是初学计算几 ...

  10. 539 Minimum Time Difference 最小时间差

    给定一个 24 小时制(小时:分钟)的时间列表,找出列表中任意两个时间的最小时间差并已分钟数表示.示例 1:输入: ["23:59","00:00"]输出: 1 ...