Front End Code Standards

Code styling and implementation standards for the front end oneleif website.

This code stack is Javascript using the React library.

All of these standards are able to be reevaluated and up for discussion; you can make a proposal by following these steps.

If you have any questions feel free to reach out in the #oneleif-website channel in our discord.

---

Table of Contents

• Code Block Styling
• Code Documentation Block
• JavaScript Documentation
• Variable Naming Convention
• React File Format
• React Function Styling
• File Naming Conventions
  • React Component File Naming
  • Javascript File Naming

---

Code Block Styling

When writing if/else or other block statements

• statements are on their own line
• spacing between if and bracket

if (/*logic*/) {
   //perform action
}
else if (/*logic*/) {
   //perform action
}
else {
   //perform action
}

Code Documentation Block

Code Documentation Blocks to be used above variables, consts, functions, and render

Example:

  /************************************
   * Constants
   ************************************/

  const EXAMPLE_CONST = "example const";

export default function ExampleComponent() {
  /************************************
   * State
   ************************************/

  const [exampleState, setExampleState = useState();

  /************************************
   * Life Cycle Hooks
   ************************************/

   useEffect(() => {

   }, []);

  /************************************
   * Functions
   ************************************/
  
   function exampleFunction() {

   }

Reason: This would help encapsulate the functionality/purpose of the code underneath these blocks

JavaScript Documentation

https://jsdoc.app/tags-returns.html

Above each function

/**
* Description of function goes here
* @param {<Type of Param>} <Name of Param> - <Description of Param>
* @returns {<Type of Returns>} <Name of Returns> - <Description of Returns>
*/

Reason: Classic JS docs

State Documentation

Above each state

/**
* Description of state goes here
*
* @type <Type of state>
* @default <default value if there is one>
*/

Reason: industry standard

Variable Naming Convention

Naming Style of class names

• variables should be in camelCase
• variables should be descriptive, avoid shortening names to keep names informative
• Example let exampleName; instead of let exName;

Reason: With a large code base and hope to have a lot of devs, having descriptive names with help newer and younger devs know what's going on

Naming Style of constants

• constants should be all caps
• constants should have underscores to delimit spaces
• Example const EXAMPLE_CONSTANT = "example"; instead of const exampleConstant = "example";

Reason: makes constants identifiable and readable, gives a good description of what they are or what they're used for

React File Format

• The use of functional components instead of class components
• using the keyword function and default export on same line
• imports at top of page (whitespace between different types of imports)
• constants above component
• useState at top of component
• useEffects under useState
• functions under useEffects
• render at the bottom of the page

Example:

import React, { useState, useEffect } from "react";

import Example from "example";

  /************************************
   * Constants
   ************************************/

  const EXAMPLE_CONST = "example const";

export default function ExampleComponent() {
  /************************************
   * State
   ************************************/

  const [exampleState, setExampleState = useState();

  /************************************
   * Life Cycle Hooks
   ************************************/

   useEffect(() => {

   }, []);

  /************************************
   * Functions
   ************************************/
  
   function exampleFunction() {

   }

  /************************************
   * Render
   ************************************/

  return (
    <div>
    </div>
  );
};

Reason: Using the function instead of the es6 method allows everything (parameters and export) to be on one line and helps the functional component stand out more. Life cycle at the top allows to see the actions performed on useEffect quickly and easily. Render at the bottom keeps a uniform file and no other reason lol

React Function Styling

Declare Functions with keyword 'function'

function exampleFunction() {

}

Reason: Easier to scan component for functions, especially with a large file. These functional components all start to look the same and this will help functions stand out

File Naming Conventions

React Component File Naming:

• Should be contained in Folders that are in PascalCase
• Should have .jsx extenstion on files that contain React/JSX
• Should be written in PascalCase

Example: (contained in src/components/MyComponent/MyComponent.jsx) MyComponent.jsx

Reason: These are the most common naming conventions when it comes to react

Javascript File Naming:

• Should be contained in Folders that are in kebab-case
• Should have .js extenstion on files that contain strictly Javascript
• Should be written in kebab-case

Example: (contained in src/components/compent-utils/component-utils.js) component-utils.js

Reason: readability.