Skip to content

Latest commit

 

History

History
168 lines (108 loc) · 4.65 KB

README.md

File metadata and controls

168 lines (108 loc) · 4.65 KB

React Boilerplate

Project Setup

  1. Run yarn install (yarn is required on your local machine)

  2. Create a .env file in the project’s root and fill in the variables from .env-example

  3. Run yarn start (this will start your project in dev environment)

Production

  1. Run yarn build to create a production build. The final output will be located in a /build folder.

Folder Structure

The project contains the following tree structure:

  • assets

    Contains the project’s assets that are used throughout the application.

    • images

    Contains all images

  • components

    Contains all reusable components

  • global

    Contains all global variables and styles that are used throughout the application

  • pages

    Contains all components that represent a React Route.

  • services

    All global state (server and client) is stored here

    The state is exposed via hooks to the components

  • store

    Contains the redux store for client side data management and react-query cache for server side data management

  • utils

    Contains utility functions that are used throughout the application

Conventions

  • This project follows functional paradigm and is built only with functional components using React hooks

  • Each component is put into a folder named the same as we would like to call the component (ex: NavLink)

  • The component is written in an index.js file and it’s styles are written as styles.module.scss (CSS Modules are used for styling)

  • If there are additional files that are needed for the component (animations, tests) they are put into their own folders inside the component’s folder.

    Example:

    /NavLink
    /animations
        index.js
    /tests
        index.test.js
    index.js
    styles.module.scss

  • If a particular component is only used and only makes sense inside another component (For example we want to divide a component into multiple subcomponents for readability) then we create another components folder inside the parent and create the component there.

    Example:

    /Header
    /components
        /HeaderPromo
            index.js
            styles.module.scss
    index.js
    styles.module.scss

  • Multiple components that have something in common (styling or context) can be grouped into a folder that is named after the thing that they have in common and is written in lowercase.

    Example:

    /src
    /components
        /Divider
        /form-elements
            /Input
            /Select
            /Checkbox
        /Product

  • If a group of components have some styles in common then those styles are created inside the folder as: _styles.scss

    These styles contain variables and mixins that are used by the components

  • We can create an index.js as well to export all components from inside the folder

    Example:

    /src
    /components
        /form-elements
            /Input
            /Select
            /Checkbox
            _styles.scss
            index.js

  • Use named exports instead of default exports

  • Both absolute and relative paths are used depending on which one is shortest

  • When importing global styles inside other sass files use absolute paths: @import '~global/styles'

Linting

Eslint

This project uses Airbnb's eslint config and typescript-eslint.

Install and configure an ESLint plugin for your IDE to be able to see all eslint errors.

All customized rules are inside .eslintrc.

All files that should be ignored by eslint are specified inside .eslintignore.

Stylelint

Stylelint is used for linting the CSS.

Install a stylelint plugin in your IDE to be able to see all potential errors.

All rules can be found inside .stylelintrc file.

Code with linting errors should not be pushed to repositories. For that reason a pre-hook is attached that checks for any linting errors when committing.

If you find a certain rule to be invaluable and make the code worse, talk with the team to potentially get it disabled.

Dependencies

  • react-router-dom (page routing)

  • redux (storing client side data)

  • react-redux (react wrapper for redux)

  • @reduxjs/toolkit (redux config / removes boilerplate)

  • react-query (storing server side data)

  • axios (http requests)

  • css-modules (styling)

  • autoprefixer (no need to add vendor prefixes when styling)

  • classnames (convenient way to add multiple class names)