手记

React入门:项目实践Gallery-in-React

yeoman

现代web app开发,著名的脚手架工具yeoman,在web项目立项的阶段,用yeoman生成项目文件、代码结构。yeoman自动将最佳实践和工具整合进来,大大加速和方便了后续的开发。

npm install -g yo //安装yeoman工具,需要nodejs环境
yo --version //查看yeoman版本

npm install -g generator-react-webpack //安装React的项目生成器
npm ls -g --depth=1 2>/dev/null | grep generator- //查看项目生成器版本
//-g是指查看全局的安装包,--depth 因为安装包是有树形层次联系的,depth指只查看深度为1的安装包
//npm ls -g 列出全局安装的npm包,npm包。往往会依赖其他的包,树状展示,1限制最多展示一层 2>dev>null 
//bash中:
//1表示standard out标准输出
//2表示standard error标准错误
//dev>null代表空设备文件
// | 表示通道,用来将上一个命令的输出内容作为下一个命令的输入内容
//总的:从输出中过滤错误消息

在github中创建repository,命名gallery-in-react(projectName),选择MIT的License,然后clone到本地 git clone http://github.com/.....

yo react-webpack projectName //在git生成项目后clone到本地,进入本地项目根目录再执行

在chrome浏览器中安装react developer tool工具。网址如下:
                https://chrome.google.com/webstore/search/react

安装后重启chrome浏览器,在审查元素时会出现一个叫做react的标签,可以查看react的component

启动项目:generator-react-webpack V2.0 移除了Grunt(而用webpack替代)。可以执行 npm start 或者npm run serve 启动服务。在localhost:8000可以看到运行的页面效果。

关于generator-react-webpack2.0版,目录结构大变样,已经是只需要webpack就能启动项目。

|____.babelrc  // ES6配置文件
|____.editorconfig  // EditorConfig插件配置文件,用于统一编码风格。
|____.eslintrc  // ESLint(代码检测工具)的配置文件,支持JSX语法
|____.gitignore  // 需要git同步时忽略文件夹的配置文件
|____.yo-rc.json  // 用来记录yeoman的配置文件
|____cfg  // 这里存放webpack配置
| |____base.js  //  webpack基础配置
| |____defaults.js  //  webpack一些其他的默认配置
| |____dev.js   // 测试环境的webpack配置,启动npm run start的时候会使用这份webpack设置。
| |____dist.js  // 线上环境的webpack配置,启动npm run dist的时候会使用。
| |____test.js  // 做单元测试的时候使用,npm run test
|____dist  // webpack输出目录
| |____README.md
| |____static
| | |____favicon.ico
| | |____README.md
|____karma.conf.js  // 单元测试配置文件
|____npm-debug.log  // 日志文件
|____package.json  // 重要!包结构配置文件,并且存放了启动脚本,npm script
|____server.js  // node服务器,用于本地启动这个项目,正是这个脚本启动了webpack编译。
|____src // 源代码目录
|____test //  单元测试目录
|____webpack.config.js //  重要,webpack配置文件入口

Nodejs中,__dirname表示当前执行脚本所在目录。
loaders 配置在 cfg/defaults.js 中, plugins 配置现在改成分别放置了,例如 cfg/dev.js 中有 dev 所需要的 plugins,而 cfg/dist.js 中有 dist 所需要的 plugins

webpack的配置:
1、autoprefixer-loader用来处理css文件,自动为其中的css规则添加前缀的工具
nmp install autoprefixer-loader --save-dev、
2、为crg文件夹中的default.js配置css的auto-prefixer的配置 !autoprefixer-loader?{browser:["last 2 version"]}!

scss中,@at-root { } 可以让写在其他类名里面的css样式,提升到最外层(在scss文件丢失的情况下,也能很好的修改css文件)

1人推荐
随时随地看视频
慕课网APP