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的思考和编写过程.认真完成这个实例 ...
随机推荐
- 回味经典——uboot1.1.6 之 第一阶段
转自:http://blog.csdn.net/lizuobin2/article/details/52054293 最近打算移植一个比较新的 uboot 到开发板,回想起来上一次移植 uboot1. ...
- dubbo 自定义过滤器,打印接口调用信息
dubbo提供了web filter类似的com.alibaba.dubbo.rpc.Filter,这样,我们可以在dubbo提供的服务提供方和消费方都可以自定义过滤 器,从而可以获得方法调用的时间或 ...
- app UI测试之UIAutomator
执行UIAutomator测试步骤 1.新建Java项目,导入android.jar和uiautomator.jar包,继承UiAutomatorTestCase 2.生成编译文件 android c ...
- 技术胖Flutter第三季-15垂直布局Column组件
博客地址: https://jspang.com/post/flutter3.html#toc-8eb 垂直布局 左对齐: crossAxisAlignment: CrossAxisAlignment ...
- roguelike地牢生成算法
文章原地址 上一个地图生成算法,这一次是一个地牢的生成算法,是一个国外的人写的算法,用dart语言写,我把它改成了unity-c#. 原作者博客地址:Rooms and Mazes: A Proced ...
- lua中文教程【高级知识】
一.编译和运行和调试 1.lua和其他解释型语言一样,先转换成为中间码再执行 2.dofile和loadfile的区别:loadfile编译返回不执行,返回错误代码:dofile执行,返回错误信息 3 ...
- LeetCode: 521 Longest Uncommon Subsequence I(easy)
题目: anysubsequence of the other strings. A subsequence is a sequence that can be derived from one se ...
- E20180709-hm
extract vt. 提取; (费力地) 拔出; 选取; 获得
- 洛谷P4717 【模板】快速沃尔什变换(FWT)
传送门 这玩意儿太骚了…… 参考了yyb巨佬的 //minamoto #include<iostream> #include<cstdio> #define ll long l ...
- [Xcode 实际操作]二、视图与手势-(7)UIView视图的渐变填充
目录:[Swift]Xcode实际操作 本文将演示创建一个具有渐变填充色的图形 import UIKit class ViewController: UIViewController { overri ...