React and NodeJS

This document is made to let the developer know what kind of best practices there are that can be used with React and NodeJS.
The reason for this is, because this project use react and nodejs for the frontend. This document can help the developer if the pick up this project and want to expand the features of it.

React

We will first talk about the best practices with React. Those are:

Keep components small and function-specific:

With React it is possible to have huge components that executes a lot of tasks. But if you want to improve the design components, you have to keep those components small. By doing this you will make each component correspond to one function.

Reusability is important:

So keep creation of new components to the minimum required. By sticking to the rule of one function = one component, you can improve the reusability of components. By reusing components across your project or across any number of projects, not only will you achieve consistency, you’ll also be contributing to the community. On the other hand, if any component becomes huge, unwieldy and difficult to maintain, it’s better to break it up into as many smaller components as required.

Consolidate duplicate code – DRY your code:

You can achieve this by scrutinizing the code for patterns and similarities. If you find any, it’s possible you’re repeating code and there’s scope to eliminate duplication. Most likely, a bit of rewriting can make it more concise.

Put CSS in JavaScript:

It is common practice to put CSS styles in a separate SCSS file. But when the project starts to scale up, this method may not be feasible. The solution for this is to place the CSS in JS, for that there are many libraries that enables you to do that. EmotionJS and Glamorous are a few examples you can use.

This is an example of hwo you can use EmotionJS:
- first step is to install EmotionJS with npm.
npm install --save @emotion/core
- After that you need to import the EmotionJS in your application:
import { jsx } from '@emotion/core'
- After the EmotionJS has been imported to the project you can set the properties of an element:

    let Component = props => { 
      return (
        <div
          css={{
            border: '1px'
          }}
          {...props}
        />
      )
    } 

Name the component after the function:

An example of this can be ProductTable - it conveys instantly what the component does. Otherwise, you will get confused if you name the component based on the need for the code.
Another example is that it’s preferable to name a component Avatar so that it can be used anywhere.

Separate stateful aspects from rendering:

In React the components can be stateful or stateless.
Stateful:
Store information about the component state and provide context. Stateless:
Have no memory, so no information about the component, and cannot give context.

It is better to have one stateful component to load data and have stateless components display that data. This reduces the complexity of the components.

Use snippet libraries:

Using snippet libraries helps you with being up to date with the most recent syntax. They also help you with keeping your code bug free.

There are many snippet libraries that you can use, like, ES7 React, Redux, JS Snippets, etc.

Write tests for all code:

It is a good idea to write tests for any new component that you create. As a good practice, you should create a __Test__ directory within your component’s directory to house all relevant tests.

Something you can do is divide the tests in React into two parts:
- Tests that focus on the functionality of components using a React app.
- Tests on your complete application once it renders in the browser.

NodeJS

---

Last update: June 26, 2022