React学习实例总结,包含yeoman安装、webpack构建
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构建的更多相关文章
- react学习笔记(一)用create-react-app构建 React 开发环境
React 可以高效.灵活的用来构建用户界面框架,react利用高效的算法最小化重绘DOM. create-react-app 是来自于 Facebook,通过该命令不需配置就能快速构建 React ...
- React 入门实例
React 入门实例教程 一.安装 React 的安装包,可以到官网下载. $ git clone git@github.com:ruanyf/react-demos.git 如果你没安装 git, ...
- 由React学习到Yeoman安装以及遇到的问题
离职闲下来之后想着学一些新知识,本来是想从react入手,结果延伸出去的内容就像一棵树的树枝,不断增加. 学习计划是从这里开始的(6周学习计划,攻克javascript难关 https://zhuan ...
- webpack前端构建工具学习总结(一)之webpack安装、创建项目
npm是随nodeJs安装包一起安装的包管理工具,能解决NodeJS代码部署上的很多问题: 常见的使用场景有以下几种: 允许用户从NPM服务器下载别人编写的第三方包到本地使用. 允许用户从NPM服务器 ...
- webpack学习笔记一:安装webpack、webpack-dev-server、内存加载js和html文件、loader处理非js文件
一 .webpack学习环境准备: 1:window系统 2:安装node.js 官方网址 下载好后下一步下一步安装即可 安装步骤略过....... 3:nrm的安装 打开cmd命令控制台 输入:n ...
- React学习笔记-1-什么是react,react环境搭建以及第一个react实例
什么是react?react的官方网站:https://facebook.github.io/react/下图这个就是就是react的标志,非常巧合的是他和我们的github的编辑器Atom非常相似. ...
- webpack学习(一)起步安装
起步 webpack 用于编译 JavaScript 模块.一旦完成安装,你就可以通过 webpack 的 CLI 或 API 与其配合交互.如果你还不熟悉 webpack,请阅读核心概念和打包器 ...
- webpack学习(一)项目中安装webpack
如何在项目中安装webpack,webpack-cli? 前提:电脑安装了 node和npm包管理工具 1 创建项目文件夹或者在已有的项目中打开终端 输入相关命令: npm init 因为已经安装好 ...
- React基本实例
学习React不是一蹴而就的事情,入门似乎也没那么简单.但一切都是值得的. 今天给大家带来一个详细的React的实例,实例并不难,但对于初学者而言,足够认清React的思考和编写过程.认真完成这个实例 ...
随机推荐
- 【旧文章搬运】关于NtUserBuildHwndList的一点记录~
原文发表于百度空间,2011-04-07========================================================================== 该函数与r ...
- 面试题:sql数据查询
前几天参加一个面试,面试公司让做一套题,sql题不是很难,但是我第一次还是写错了,回来后,重新写了下.简单记录下吧, 1.题目: 2.测试数据 select * from student ; inse ...
- 有关map中使用iterate迭代器遍历的不保序问题和list remove(object)的细节问题
今天在做项目的过程中发现了如下两个问题: 一 使用map的iterator迭代器对map进行遍历得到的结果是不保序的,也就是每次输出结果都是不一样的.针对这个问题,看以下iterator迭代器的源码. ...
- Bean的基于XML配置方式
基于XML配置 Beans.xml <?xml version="1.0" encoding="UTF-8" ?> <beans xmlns= ...
- 红帽系统制作yum本地源
1 首先得吐槽吐槽,机房冷就算了,不能用手机(哈哈你懂的),没有站的位置,显示屏看不清楚.就这样开始制作yum本地源. 2 记下注意得两点,以防以后会忘记 a:可能是因为红帽系统,加上是实用光盘挂载的 ...
- 模拟定位工具gps mock
1. 到应用宝下载http://sj.qq.com/myapp/detail.htm?apkName=com.lexa.fakegps 2. 在 setting 里面 开发者选项 3. 把 模 ...
- 也谈Flash mmorpg地图问题【转】
网上看一篇关于目前几个流行flash mmorpg地图实现的分析,这里也想说说自己的一些看法. 常见的三种方式:1.整图2.Tile元素拼装3.栅格化切片 整图 整图加载很好理解直接加载一张背景图.这 ...
- 深入理解Java中方法的参数传递机制
形参和实参 我们知道,在Java中定义方法时,是可以定义参数的,比如: public static void main(String[] args){ } 这里的args就是一个字符串数组类型的参数. ...
- css控制页面文字不能被选中user-select:none;
现象:html中可能有些地方不想让用户复制文字,或是用a标签做了个点击按钮,点快的时候文字会被选中,很丑,这个时候可以使用下面的方案禁止文字选中. 原因:鼠标点快了文字会被选中. 解决方案:不同的浏览 ...
- Weekly Contest 78-------->811. Subdomain Visit Count (split string with space and hash map)
A website domain like "discuss.leetcode.com" consists of various subdomains. At the top le ...