Project Style Guide

Version History

Version Policy

Version	Date	Description	Responsable
0.1	22/03/2017	Document creation and adaptation	Luiz Guilherme

• This is an adapted guide based on the coding standard used by Airbnb and Google Style Guide. It's utilization was adapted for utilization in the project found here. This guide can be used openly, even if is this version, an adaptation of the project cited above.

• The reading and consult of this guide can be somewhat confusing for users that are not acquainted with Java, Javascript, ReactJS, JSX and HTML/CSS. It is recommended that you study them before utilizing this guide.

• It's also recommended the utilization of the Eclipse IDE for Java development during the process of development and for ReactJS development it's recommended a text editor like Atom, Sublime or Webstorm because it is more intuitive, easy to use and well documented. As a web browser, we recommend Google Chrome.

• If you have any doubts in relation of a code pattern, utilize the search function from your browser(CTRL+F on Google Chrome) before start coding!

• Alterations can be made without previous warning.

Index

1. Basic Rules
   1. Glossary
   2. Naming
   3. Formatting
   4. Comments
   5. Programming Practices
2. Java Style Guide
   1. Java Annotations
   2. Javadoc
   3. Instructions
   4. Declarations
   5. Getters and Setters
   6. Switch Statements
3. JavaScript Style Guide
   1. Instructions
   2. Declarations
   3. Policies
   4. JSDoc
4. ReactJS Style Guide
   1. JSX
   2. Instructions
   3. Declarations
   4. Ordering
   5. Props
   6. References
5. HTML and CSS Style Guide
   1. HTML Style Rules
   2. CSS Style Rules
   3. Document Structure

Basic Rules

• Only include one React component per file.
• However, multiple Stateless, or Pure, Components are allowed per file. eslint: react/no-multi-comp.
• Always use JSX syntax.
• Do not use React.createElement unless you're initializing the app from a file that is not JSX.

Glossary

Naming

Formatting

Comments

Programming Practices

Java Style Guide

Java Annotations

Javadoc

Instructions

Declarations

Getters and Setters

Switch Statements

Javascript Style Guide

Instructions

Declarations

Policies

JSDoc

ReactJS Style Guide

JSX

Instructions

Declarations

• Do not use displayName for naming components. Instead, name the component by reference.

// bad
export default React.createClass({
  displayName: 'ReservationCard',
  // stuff goes here
});

// good
export default class ReservationCard extends React.Component {
}

Ordering

Props

References

HTML and CSS Style Guide

HTML Style Rules

CSS Style Rules

Document Structure

⬆ Back to the top