Improving the the scholarX frontend codebase

Development ScholarX
1

This thread will be regarding the improvement of the codebase these are my findings feel free to update this thread I you happened to find anything.

Create reusable components

With react reusability is important. By reusing components across your project you can achieve consistency and will stop you from creating huge components that will be hard to maintain. To improve the reusability of components you can use the rule of one function = one component.

Use Fragments

Always use Fragment over Div. It keeps the code clean and is also beneficial for performance because one less node is created in the virtual DOM.

Importing order

Sorting your imports in a JS file has a lot of benefits. First at all makes it easier to see what you imported from specific packages, also if you group them, you can easily distinguish which imports are from third party packages or local imports.

The rule of thumb is to keep the import order like this:

  1. Built-in
  2. External
  3. Internal
import React from 'react';

import { PropTypes } from 'prop-types';
import MentorCard from 'components/MentorCard';

import pladeholderImage from '../../assets/images/placholder.png';
import colors from '../../styles/colors';

Don’t use Curly Braces with String Props

Usually when we are passing string props we use it like this,

name={“takumi”}

but instead of this we can use name=“takumi” like this.

Destructure props

Using restructuring makes you code clean.

Instead of this,

console.log(props.user.name)

We can use it like this,

const { user } = props
console.log(user.name)

Create layouts

When you are creating different views it’s always better to use a layout as your base otherwise you have to spend time writing css based on each view to keep the layout consistent.

TypeScript don’t use any type

I know this is not related to react and but most of the time this two go hand in hand. Don’t use it any type with anything if you are using any there’s no point in using TypeScript.

TypeScript interfaces vs types

This one also not related to React. When it comes to interfaces and type you may think it’s the same. yeah, it’s similar but the key distinction is that a type cannot be re-opened to add new properties vs an interface which is always extendable.

for example this can be done,

interface Window {
title: string
}

interface Window {
ts: TypeScriptAPI
}

but this can’t,

type Window = {
title: string
}

type Window = {
ts: TypeScriptAPI
}
4 Likes