Index

Tools used

Chrome DevTools

introduction

The application is developed in react using the typescript. template.

The use of the VSCode_ editor is suggested

Application state is managed using redux

The code is validated with eslint and prettier at commit time, using husky. The format of the commit is validated using commitlint (see below).

Stile & CSS

Only @emotion/react is used for the design

Code formatting

Formatting and code checks are intended to ensure the highest quality and consistency within the codebase.

During the commit phase, a script is automatically executed which formats the entire codebase according to the Prettier configuration defined within the code, subsequently in case there are typescript errors or the commit does not follow the defined formatting standard ( see Git Flow) an additional script will deny the commit

Configuration VSCode

Install Prettier extension
Go to to File -> Settings and search theme
Click on Edit in settings.json
Add this entry on opened file settings.json and save it

  "editor.tabSize": 2,
  "javascript.updateImportsOnFileMove.enabled": "always",
  "typescript.preferences.importModuleSpecifier": "relative",
  "typescript.updateImportsOnFileMove.enabled": "always",
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "typescript.preferences.importModuleSpecifier": "relative",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
    "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.tabSize": 2,
  "editor.formatOnSave": true,

Work flow

The package manager used is YARN - npm is not used -
Installing a new library requires permission from the Team Lead.
Changing formatting rules requires permission from the Team Lead.
Updating a library requires permission from the Team Lead.

Naming conventions

To facilitate development, it is important that component and/or function names follow the following rules of Naming Convention

Quick start

Make sure that you have Node.js and yarn installed.
Clone this repo using git clone --depth=1 https://github.com/bitRocket-dev/reactJS-app-boilerplate.git <YOUR_PROJECT_NAME>
Move to the appropriate directory: cd <YOUR_PROJECT_NAME>.
Run yarn in order to install dependencies.
At this point you can run yarn start to see the example app at http://localhost:3000.

Now you're ready to rumble!

riccardogenova / boilerplate-reactjs