React项目新手指南

对于程序员而言：驼峰和下划线之间是一场宗派战争；大括号是否换行会成为一种党派；逗号写在行尾仍是行首的人来自不一样星球……

然而，无规矩不成方圆，任何一个团队，要想有高质量的产出，第一步必需要对一些基本的代码风格达成共识，不然用不了多长时间，你就会发现没人愿意维护某些代码了，由于那些代码散发出半年以上没冲过的马桶的味道，而更可怕的是团队成员之间的冲突和内耗会远超你的想象。

好了，言归正传，咱们进入正题：

首选开发工具WebStorm

工欲善其事必先利其器，对于程序员而言，一款趁手的编辑器将像屠龙宝刀同样珍贵，许多程序员终其一辈子都在追寻更好的硬件、软件、工做流程等。做为前端团队，咱们强烈推荐使用 WebStorm 。大致上，它长这样：

关于怎么下载，怎么安装，以及其余相似问题请自行Google。

新建项目

Talk is cheap. Show me the code. 好了，废话少说，咱们赶忙上代码：

是的，咱们的教程并非手把手的，按上图操做后将弹出输入框，填入你所获得的git仓库地址，并按照我的喜爱选择路径和命名后 WebStorm 将会自动拉取咱们最新的项目代码。

初始设置

由于咱们使用了最新最潮的ES6语法，并借助了React.js 来开发这个项目，因此咱们须要进行一些小设置来保证 WebStorm 可以正常识别咱们所写的代码。

按上图所示进入设置面板：

在 Languages & Frameworks > JavaScript 条目下开启JSX语法支持。

展开 JavaScript > Libraries ，勾选 ES6 语法支持。

 咱们使用ESlint来检查基本的语法错误，请继续展开 "JavaScript > Libraries > Code Quality Tools > ESLint" 菜单启用 ESLint。 ESLint 规则以 airbnb 为基础，考虑到中国国情以及团队习惯，咱们进行了部分细节调整：

 { "extends": "airbnb", "rules": { "comma-dangle": [1, "never"], // 不对数组或对象末尾逗号作强制要求 "spaced-comment": [0, "always"], // 不对注释前的空格作强制要求 "func-names": 0 // 容许使用匿名函数 } }

其余彻底沿用airbnb，详见 https://github.com/airbnb/javascript

代码风格设置

为了让编辑器产生的代码可以顺利经过ESLint的校验，咱们在airbnb开源的基础上定制了本身的代码风格：  在 "Editor > Code Style" 菜单中点击 "Manage..." 按钮；

在弹出来的对话框里选择 "Import..."

点击肯定后会出现文件选择对话框，选择本项目根目录下的 .jscsrc 文件

建议命名为KM，以便和其余代码风格区分。 本代码风格整体依然沿用 airbnb，一样对部分细节作了调整：

 { "preset": "airbnb", "excludeFiles": [ "dist/**", "node_modules/**", "webpack*", "styleguide.js" ], "requirePaddingNewLinesBeforeLineComments": null, // 不强制注释前空行 "requireTrailingComma": null, // 不强制要求末尾逗号 "validateQuoteMarks": null, // 字符串单引号，React 属性双引号 "validateIndentation": { "value": 2, "allExcept": [ "comments" // 忽略注释中的缩进 ] }, "maximumLineLength": { "value": 80, // 单行最长80个字符，注释除外 "allExcept": [ "comments", "urlComments", "functionSignature" ] }, "requirePaddingNewLinesAfterBlocks": null,// 区块之间不强制空行 "disallowEmptyBlocks": { "allExcept": "comments" // 不把注释当成空处理 } }

调整后规则的直观体现见 styleguide.html

快速启动

1. 首先请确保你已经安装好了 node 和 npm，建议使用 iojs/2.5.0并配置国内源

2. 进入工做目录新建分支   请尽可能以本次须要开发的功能或解决的问题进行分支命名，咱们提倡使用 GitHub Flow 进行分支管理。

3. 点击编辑器底部的 'Terminal'面板，并输入 npm i && npm start 后回车  当显示 webpack: bundle is now VALID. 字样时表示已经正常启动 

4.建议使用Chrome浏览器，访问 http://localhost:8000/ 便可。

5.修改JS文件，浏览器内容将自动发生变化（页面不会总体刷新）

目录结构

[./] | -- .editorconfig #编辑器配置，声明缩进方式 | -- .eslintignore #ESLint忽略名单 | -- .eslintrc #ESLint配置 | -- .gitignore # Git忽略名单 | -- .jscsrc #JavaScript Code Style 配置 | -- README.md | -- [css] | | -- index.styl | -- [dist] #打包后目录 | | -- daefde64ebc9619286d8.js | | -- fb5456ea68c860c4a4c93c71b1142220.css | | -- index.html | -- [docs] #说明文档 | | -- [img] | | -- styleguide.html | -- [js] | | -- app-router.js | | -- [components] # 组件 | | | -- dashboard.js | | | -- login.js | | | -- main.js | | -- index.js | | -- [utils] # 各类辅助小工具 | | | -- ajax.js | | | -- auth.js | -- package.json | -- server.js # 开发调试用 | -- webpack.config.develop.js # 开发环境配置 | -- webpack.config.js # 通用配置 | -- webpack.config.production.js # 生产环境配置

原文地址：https://www.w3ctech.com/topic/1496