w3ctech

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 # 生产环境配置

我们还缺人

是的,这篇文章是面向新手的,尽量保证通俗易懂,看图说话。所以年轻人,不要怕,我们这里有耐心的老师傅一步一步慢慢教你。对于经验丰富的老师傅我们当然也欢迎。

  1. 我们是一家工程师文化浓郁的科技公司(两位老板都是程序员出身)
  2. 我们比大多数地方更尊重和敬畏工程师的价值(薪酬绝对让你心动)
  3. 我们周末正常双休、不无意义加班、不搞996,我们相信金字塔绝对不是奴隶建造的
  4. 我们有补充医疗(含亲子),公司有多位幸福奶爸
  5. 每年一次集体出国旅游,每月一次集体腐败,不定期爬山、骑马什么的
  6. 我们连卷筒纸都是公司免费提供的!

坐标:北京朝阳区安定路39号长新大厦1502,距离地铁10号线安贞门站343米

好了,不啰嗦了,有兴趣的可以找我私聊:

微信/QQ/手机: 18883138506

邮箱: console.log(atob('eW91aHVhQGtvbmdtaW5nLWluYy5jb20K'))

w3ctech微信

扫码关注w3ctech微信公众号

共收到6条回复

  • 怎么做重要 还是做什么更重要?

    回复此楼
  • @fantasyEvi 做什么当然重要,可是怎么做很大程度上决定了能做成什么样以及做的过程中是否感到幸福!

    人生无非是逐步老去,最终归于尘土,但是怎么活重要还是着急去死重要?

    回复此楼
  • 可是招人没写很重要的东西,坐标

    回复此楼
  • 呃,好吧,这个确实很重要,坐标:距离地铁10号线安贞门站800米

    回复此楼
  • 文章还不错

    回复此楼
  • 能不能分享一下配置文件jar

    回复此楼