1.对齐方式

//如果没有属性,在自闭和标签前添加一个空格:
<Footer /> //如果可以放在一行,放在一行上即可:
<Footer bar="bar" /> //如果是多个属性,直接属性换行对齐的方式,同时闭合标签是换行的:
<Footer
 bar="bar"
 className="footer"
/> //如果是多行,采用缩进的书写方式:
<Footer
  bar="bar"
  className="footer"
>
  <Button />
</Footer>

2.命名规则

//属性名称始终使用驼峰命名法
<Footer
  className="footer"
  showStatus="this.state.showStatus"
/> //文件名使用帕斯卡命名。 例如: ReservationCard.jsx
import ReservationCard from './ReservationCard'; //React 组件使用帕斯卡命名,引用实例采用驼峰命名。
const reservationItem = <ReservationCard />; //组件名称应该和文件名一致, 例如: ReservationCard.jsx 应该有一个ReservationCard的引用名称。
//但是, 如果是在目录中的组件, 应该使用 index.jsx 作为文件名 并且使用文件夹名称作为组件名
//即ReservationCard文件夹的目录里面有一个index.jsx的文件,组件的调用方式如下:
import ReservationCard from './ReservationCard'; //React 组件的内部方法命名不要使用下划线前缀
onClickSubmit(){}

3.属性的书写规范

//当标签没有子元素时,始终使用自闭合标签
<Footer className="footer" /> //当标签有子元素时,选择使用双标签闭合
<Footer
  bar="bar"
  className="footer"
>
  <Button />
</Footer>

  

react书写规范小记的更多相关文章

  1. 4.1 react 代码规范

    关于 基础规范 组件结构 命名规范 jsx 书写规范 eslint-plugin-react 关于 在代码的设计上,每个团队可能都有一定的代码规范和模式,好的代码规范能够提高代码的可读性便于协作沟通, ...

  2. CSS书写规范、命名规范、网易CSS框架NEC

    网易CSS框架NEC:http://nec.netease.com/ NEC框架的CSS规范:  CSS规范 - 分类方法 CSS规范 - 命名规则 CSS规范 - 代码格式 CSS规范 - 优化方案 ...

  3. html和css书写规范

    HTML 规范 分离的标记.样式和脚本 结构.表现.行为分离 在可能情况下验证你的标记 使用编辑器验证你的标记是否正确,一般编辑器都自带有这个功能. 技术不支持的时候使用备胎,如canvas 编码格式 ...

  4. 数据库DDL语句书写规范

    数据库DDL语句书写规范 1.SQL语句编写说明编写SQL语句应遵循统一的规范,包括大小写.空格.换行.缩进等等,只有完全一样的SQL才能在数据库中共享,从而减少硬解析. 字段类型.长度:根据数据情况 ...

  5. CSS书写规范

    一.CSS书写顺序 1.位置属性(position,top,right,z-index,display,float等) 2.大小(width,height,padding,margin) 3.文字系列 ...

  6. 推荐大家使用的CSS书写规范、顺序

    写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,这里总结一个CSS书写规范.CSS书写顺序供大家参考,这些是参考了国外一些文章以及我的个人经 ...

  7. 分享给大家的CSS书写规范、顺序

    写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,这里总结一个CSS书写规范.CSS书写顺序供大家参考,这些是参考了国外一些文章以及我的个人经 ...

  8. css命名书写规范小结。

    单行形式书写风格的排版约束 1.   每一条规则的大括号 { 前后加空格 2.   多个selector共用一个样式集,则多个selector必须写成多行形式 3.   每一条规则结束的大括号 } 前 ...

  9. CSS书写规范及顺序

    CSS书写顺序 1.位置属性(position, top, right, z-index, display, float等)2.大小(width, height, padding, margin)3. ...

随机推荐

  1. vue短信验证码组件

    Vue.component('timerBtn',{ template: '<button v-on:click="run" :disabled="disabled ...

  2. 笨办法学Python(十一)

    习题 11: 提问 我已经出过很多打印相关的练习,让你习惯写简单的东西,但简单的东西都有点无聊,现在该跟上脚步了.我们现在要做的是把数据读到你的程序里边去.这可能对你有点难度,你可能一下子不明白,不过 ...

  3. window下mycat要放在根目录下

    原理文档没有跟我开玩笑呢? 建议放在盘符根目录下 ,无视的我,检查了多遍jdk环境,检查了多遍bat文件内容,仍然没有解决 找不到或无法加载主类 直到我乖乖的把目录放跟盘符才解决,心好累= =! 可能 ...

  4. jrtplib源码分析 第一篇 jthread的编译与分析

    第一篇 jthread的编译与分析 jrtplib代码依赖库jthread,因此先从jthread开始jrtplib的学习.首先从以下链接下载jthread的源代码http://research.ed ...

  5. Java UUID Generator(JUG)

    UG 是一个纯 Java 的 UUID 生成器. UUID是指在一台机器上生成的数字,它保证对在同一时空中的所有机器都是唯一的.通常平台会提供生成UUID的API.UUID按照开放软件基金 会 (OS ...

  6. InnoDB多版本(MVCC)实现简要分析

    转载自:http://hedengcheng.com/?p=148 基本知识 假设对于多版本(MVCC)的基础知识,有所了解.InnoDB为了实现多版本的一致读,采用的是基于回滚段的协议. 行结构 I ...

  7. 2018.7.6 js实现点击事件---点击小图出现大图---时间定时器----注册表单验证

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  8. Oracle 11g基础

    一.打开.关闭数据库 sqlplus "/as sysdba" connect system/manager as sysdba 关闭 shutdown immediate; 打开 ...

  9. maven parent version not found

    需要把parent工程,也就是package是pom的那个工程先install一下 要是不行的话可以试下mvn -X clean install,-X表示强制从远程库更新dependency:再不行可 ...

  10. [P1363] 幻想迷宫

    题目链接 很好的一道搜索题,应该是利用了离散化的思想我好蒟蒻呀 地图是根据给定的图无限的拼接的. 所以说暴力建图是不可取的. 其实不难看出,在跨越两张图时.我们就可以看做这个点时空穿梭一般.从底下回来 ...