yeoman生成react基本架构

工欲善其事必先利其器。在开始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的开发了。

上一篇:php各种主流框架的优缺点


下一篇:JavaScript主流框架3月趋势总结