JavaScript/React Coding Convention

Naming Conventions

• React UI component's names should use PascalCase.

  • Example: LoginScreen.js

• All other helper files should use camelCase.

  • Example: commonUtils.js

• All the folder names should use camelCase.

  • Example: components

• All variables names should be written in camelCase and not shortened.

  • Example:

var returnData;

• Do not use ambigious variable name. The example can be confusing, either it specifies file Z or multiple files (but typed cool).
  • Example:

var filez;

Spacing

• Appropriate spacing in arrays.
  • Example:

var levels = ["Low" ,"Medium" ,"High"];

• Appropriate spacing on both sides of the equal sign.
  • Example:

var worldPeace = false;

Datatype

• Do no use strongly typed datatype (string).
  • Example:

string codeSettingsTabMenuValue = "implines";

Comments

• Write descriptive and short comments.
  • Example:

var issuesString = parseGet(https://git.webug.se/Andras/BoundlessFlowCampus2K/issues); 		// Reads data from url to get all issues as a string

• We only use c++ comments " // " when commenting one line.
  • Example:

for (i = 0; i < 10; i++) {
  // if (i % 2 == 0) alert(i);
}

• When commenting more than one line, C comments should be used " /* */ ".
  • Example:

/*
 for (i = 0; i < 10; i++) {
   if (i % 2 == 0) alert(i)
 }
*/

Code

• Make sure to compare in a correct way.
  • Wrong:

if (worldPeace > 0) {
	// do something
}

• Right:

if (worldPeace) {
	// do something
}

• We use this function as a standard template for all functions.

 export default function Card({ title, children }) {             <-- We use this function as a standard template for all functions.   
   return (
     <div className={styles.card}>                                
       {title && <h3 className={styles.title}>{title}</h3>}      
       <div>{children}</div>                                     <-- We do not use spacing around <div></div>  
     </div>
   );
 }

API

Shared api function

export function useApi(API_URL,dependency) {
  const [data, setData]       = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError]     = useState(null);
 
  useEffect(() => {
    fetch(API_URL)
      .then(res => {
        if (!res.ok) throw new Error(`HTTP ${res.status}`);
        return res.json();
      })
      .then(json => {
        setData(json);
        setError(null);
      })
      .catch(err => setError(err.message))
      .finally(() => setLoading(false));
  }, [API_URL,dependency]);
 
  return { data, loading, error };
}

Return values

• data
  • The data fetched needs to be stored in JSON format.
• loading
  • Indicates if data is being loading.
    • Values.
      • True.
      • False.
    • While the value is true data is being loaded.
    • When data is done loading loading is set to false.
• error
  • The default value of error is null.
  • If an error occurs the error message is stored here .