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

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

好了,言归正传,我们进入正题:

首选开发工具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

React项目新手指南的更多相关文章

  1. 如何在非 React 项目中使用 Redux

    本文作者:胡子大哈 原文链接:https://scriptoj.com/topic/178/如何在非-react-项目中使用-redux 转载请注明出处,保留原文链接和作者信息. 目录 1.前言 2. ...

  2. 使用 Dawn 构建 React 项目

    开发一个 React 项目,通常避免不了要去配置 Webpack 和 babel 之类,以支持 commonjs 或 es 模块及各种 es 新语法,及及进行 jsx 语法的转义.当然也可以用 cre ...

  3. 如何优雅地在React项目中使用Redux

    前言 或许你当前的项目还没有到应用Redux的程度,但提前了解一下也没有坏处,本文不会安利大家使用Redux 概念 首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与 ...

  4. 手把手教你用webpack3搭建react项目(开发环境和生产环境)(一)

    开发环境和生产环境整个配置源码在github上,源码地址:github-webpack-react 如果觉得有帮助,点个Star谢谢!! (一)是开发环境,(二)是生产环境. 一.首先创建packag ...

  5. 基于webpack的React项目搭建(一)

    前言 工欲善其事,必先利其器.为了更好的学习React,我们先简要的把开发环境搭建起来.本文主要介绍使用webpack搭建React项目,如果你对React或es6的基础语法还不了解,建议先去学习学习 ...

  6. React 项目生产版本迭代页面不刷新问题

    React 页面缓存 react 打包项目进行服务端部署后,会发现index.html被浏览器缓存,访问项目url指向的还是上个版本的内容.原理是index.html被缓存后,路由指向和跳转都是旧版的 ...

  7. react项目后台及上线步骤

    应同学要求,本人将react项目创建后台及上线流程书写如下: 前端部分 略…… 后台部分 (注:这里的后台是用的nodejs搭建的,使用的是express框架+ejs模板) 首先通过express快速 ...

  8. 如何在React项目中直接使用WebAssembly

    前言 自从入坑WebAssembly以来,躺了很多坑,也浏览了很多资料,都没有看到很多能够直接在前端项目中使用WebAssembly的例子.即使有,我自己按照介绍的步骤一步一步来, 也会报各种错误,官 ...

  9. nginx代理部署Vue与React项目

    nginx代理部署Vue与React项目 一,介绍与需求 1.1,介绍 Nginx (engine x) 是一个高性能的HTTP和反向代理服务,也是一个IMAP/POP3/SMTP服务.Nginx是由 ...

随机推荐

  1. 精练代码:一次Java函数式编程的重构之旅

    摘要:通过一次并发处理数据集的Java代码重构之旅,展示函数式编程如何使得代码更加精练. 难度:中级 基础知识 在开始之前,了解"高阶函数"和"泛型"这两个概念 ...

  2. Matlab的用法总结

    1. 对序列进行洗牌 randperm() randperm()产生随机的序列 %if filepaths 是一个5*1的结构体,then cshuffle = randperm(length(fil ...

  3. 20175208 《Java程序设计》第四周学习总结

    第五章主要学习内容 1.子类的继承性: (1)子类与父类在同一包中的继承性:子类自然地继承了其父类中不是private的成员变量作为自己的成员变量. (2)子类与父类不在同一包中的继承性:子类只继承父 ...

  4. Flutter从零到∞学习笔记

    有状态widget:StatefulWidget和无状态widget:StatelessWidget 前者不需要实现Widget build(BuildContext context). 具体的选择取 ...

  5. 【 记忆网络 2 】 End-to-End Memory Network

    继上一篇:Memory Network 1. 摘要 引入了一个神经网络,在一个可能很大的外部记忆上建立了一个recurrent attention模型. 该体系结构是记忆网络的一种形式,但与该工作中的 ...

  6. openvpn 初步使用

    服务端:Centos 7.2 openvpn 2.4.3 客户端:Windows 10 安装包 openvpn的官网在国内访问不了,服务端通过yum安装,客户端在第三方网站下载的 一般的国内源应该都包 ...

  7. activiti5/6 系列之--Activiti与BPMN2.0规范相关节点对应关系

    根据BPMN2.0规范的分类划分为以下部分: 1.启动与结束事件(event) 2.顺序流(Sequence Flow) 3.任务(Task) 4.网关(Gateway) 5.子流程(Subproce ...

  8. Codeforces 333E Summer Earnings - bitset

    题目传送门 传送门I 传送门II 传送门III 题目大意 给定平面上的$n$个点,以三个不同点为圆心画圆,使得圆两两没有公共部分(相切不算),问最大的半径. 显然答案是三点间任意两点之间的距离的最小值 ...

  9. vue 项目 使用sass

    1,使用save会在package.json中自动添加. npm install node-sass --save-dev npm install sass-loader --save-dev 注: ...

  10. Android 回退键监听

    回退键(back)监听:方法1:回调方法onBackPressed String LOG_TAG="TAG";  @Override    public void onBackPr ...