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的思考和编写过程.认真完成这个实例 ...
随机推荐
- Ubuntu环境下gedit以及vim的一些个简单配置
Gedit的配置: 参见 http://www.cnblogs.com/csulennon/p/4198054.html Gedit插件安装 Gedit快捷键 参见我的博客 添加快捷键 Ctrl + ...
- sql语句之约束条件
not null约束,需设置默认值 sex enum('male','female') not null default 'male' unique 约束,值唯一 单列唯一: create table ...
- 洛谷 - SP3871 GCDEX - GCD Extreme - 莫比乌斯反演
易得 $\sum\limits_{g=1}^{n} g \sum\limits_{k=1}^{n} \mu(k) \lfloor\frac{n}{gk}\rfloor \lfloor\frac{n}{ ...
- 七牛上传图片视频demo
/引入Plupload .qiniu.js后 varuploader = Qiniu.uploader({ runtimes:'html5,flash,html4',//上传模式,依次退化 brows ...
- 聊聊IT行业加班的问题
IT行业(包括互联网行业)是快速发展的行业,有时候一家公司同时可能要开发多个项目,并发进行,在公司开发人员相对固定的情况下,要想在指定的时间内完成项目谈何容易. 项目多.任务重.需求的不明确.技术难关 ...
- 花花的森林(倍增,LCA
花花的森林,嗯,这是一篇正经的题解. 模拟考的时候没有看出来要怎么求啊,暴力地树形DP.换根.合并.求直径.居然也险险地拿到了80分,不过我们要正经地想正解. 容易想到我们可以让时光倒流,让空间扭转, ...
- 如何对接payjs的个人微信扫码支付接口
在众多个人支付接口的产品中,要寻找一个稳定可靠的产品是比较难的,所幸遇到payjs,感觉逼格较高,非常满足自己的品味.推荐大家使用.下边是我在对接payjs的过程中的一些经验和技巧,分享给大家. 一. ...
- [題解](二分答案/單調隊列)luogu_P1419尋找段落
果然又抄的題解... 顯然答案具有單調性,而對于平均數計算的式子我們移一下項, 若s[l..r]>mid*(r-l+1)无解, 於是我們把每個數都減去一個mid,看和的正負即可,如果為正就可能有 ...
- BOM主要对象属性方法总结
BOM window对象 浏览器实例,全局对象 1.窗口位置: screenTop,screenLeft(screenX,screenY):窗口相对于屏幕左边和上边的位置 moveTo(x,y):将窗 ...
- 51nod 2133 排队接水
Bryce1010模板 http://www.51nod.com/onlineJudge/questionCode.html#!problemId=2133 #include <bits/std ...