Un template frontend React Typescript

Pour coder efficacement, il faut de bons outils

En développement, si l'on code avec les mauvaises technos, les mauvaises libs, les mauvaises versions, on perd du temps.

Dans l'idée, on aimerait une base de projet sur laquelle on vient ajouter les briques, histoire d'aller vite.

Dernièrement, je vous partageais mon template pour créer un projet backend Typescript rapidement .

Aujourd'hui, je vous propose mon template pour lancer rapidement projet frontend.

Nous allons partir sur React ma librairie frontend préférée. Je me suis lancé à l'époque en 2016, sur les conseils d'un ami, Kevin Vavelin qui est un des pionnier de la techno en France. Vous pouvez aussi faire appel à ses services de développeur, si vous avez un projet.

Depuis, je n'ai jamais lâché cette technologie, qui colle énormément à ma personnalité et ma vision du frontend.

Un projet React Typescript

Je l'ai dis il y a quelques années, Javascript pour moi, ce n'est plus possible, j'ai totalement arrêté au profit de Typescript. Et je vais être cache, je pense que le gain de temps avec Typescript, lorsque le projet commence à devenir de plus en plus complexe, est de 25% à 50% au bas mot. Etant donné que votre IDE vous affichera immédiatement les incohérences, cela vous permet de vous concentrer plus sur le code, et limiter vos scénarios de test à des cas simples.

Si vous n'avez pas encore franchi le pas, je vous laisse vous renseigner, mais pour avoir fait les deux et pour maîtriser les deux, je vous garantie que continuer en JS, c'est perdre du temps (après si vous aimez ça... 😂).

Nous allons créer ce projet étape par étape, suivez le guide !

Pourquoi ne pas partager un repository directement ? 🤔

• Premièrement, cela va verrouiller les versions des dépendances et il va falloir le maintenir le repo, je ne trouve pas cette approche intéressante.
• Puis, je pense que de décomposer le déploiement permettra à tout le monde d'ajouter une partie à son projet existant.

Avant d'aller plus loin, sachez que je travaille en Node v20, je vous laisse faire les installation avec votre nvm préféré. 😋

Nous allons utiliser les technologies suivantes:

• Typescript
• React.js
• Tailwind
• React-Query
• React-Hook-Form
• Jest
• SWC

Créer un projet Typescript avec Create-React-App

yarn create react-app <project-name> --template typescript
cd <project-name>

Installation de Tailwind CSS

Tailwind CSS c'est un peu comme si vous utilisiez un aspirateur aujourd'hui au lieu de passer le balai. L'un n'empêche pas l'autre, mais non seulement l'aspirateur aspire la poussière, le balai la déplace.

De la même manière, Tailwind fait tout ce que fait votre CSS, en ayant déjà packagé plusieurs règles CSS dans des classes, sans pour autant guider votre charte graphique comme le ferai un Bootstrap ou autre framework graphique.

yarn add -D tailwindcss

Nous allons maintenant générer notre fichier de configuration Tailwind:

npx tailwindcss init

Dans tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Dans index.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

Installation de Jest et SWC

Jest sert à tester votre projet, que ce soit un projet backend ou un projet frontend. Il est capable de tester les deux à condition de l'installer et de le configurer correctement.

SWC qui signifie Speedy Web Compiler est un projet Rust qui va nous aider à convertir nos sources Typescript en code Javascript pour que Jest puisse l'interpréter. Une simple conversion standard est beaucoup plus longue. Les maintainers parlent de 20x plus rapide en single core et 70x plus rapide en quad core.

yarn add -D jest @swc/core @swc/jest ts-node jest-environment-jsdom jest-transform-stub 

Création du fichier de configuration de Jest:

npx jest --init

Lors de votre configuration de Jest, choisissez jsdom au lieu de node, pour le reste, le défaut convient.

Dans le fichier jest.config.js:

module.exports = {
  transform: {
    '^.+\\.(t|j)sx?$': '@swc/jest',
    ".+\\.(svg|css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$":
      "jest-transform-stub",
  },
}

Dans vos fichiers de tests, soyez sûr d'ajouter:

import "@testing-library/jest-dom";

Par exemple, voici mon App.test.tsx après modifications:

import React from "react";
import "@testing-library/jest-dom";
import { render, screen } from "@testing-library/react";
import App from "./App";

test("renders learn react link", () => {
  render(<App />);
  const linkElement = screen.getByText(/learn react/i);
  expect(linkElement).toBeInTheDocument();
});

Pour lancer les tests, il ne vous reste plus qu'à exécuter:

npx jest

Utiliser des paths alias Typescript avec React

Les paths alias, c'est quoi ?

Et bien, lorsque vous voulez importer vos librairies et composants depuis votre page React, il arrive que vous ayez besoin de parcourir le file system. Pour vous éviter à résolve chaque path de manière relative et que votre code ressemble à cela:

import ButtonCustom from '../../components/buttons/ButtonCustom';
...

Vous pouvez utiliser des paths alias qui vous permettrons de gérer les imports depuis des paths absolus beaucoup plus simples:

import ButtonCustom from '@/components/buttons/ButtonCustom';
...

Et pour faire cela, rien de plus simple, il vous faut modifier votre fichier tsconfig.json:

"compilerOptions": {
    // ...
    "paths": {
      "@/*": ["./src/*"]
    },

Mais, ce n'est pas terminé !

Create-React-App, ne peut pas résoudre ces chemins vers vos fichiers directement, il lui faut une surcharge de configuration initiale. Désormais, cette fonctionnalité appartient à une autre package: Craco (Create React App Configuration Override):

yarn add -D @craco/craco

Dans un fichier craco.config.js, à la racine de votre projet, ajoutez les lignes suivantes:

const path = require("path");
module.exports = {
  webpack: {
    alias: {
      "@": path.resolve(__dirname, "src"),
    },
  },
};

Et dans votre fichier package.json remplacez votre bloc scripts par celui-ci:

  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "craco eject"
  },

Installation des dernières dépendances

Voici les derniers packages que j'installe sur mes projets front:

• React-Query pour sa simplification de requêtes et son caching key
• ClassNames pour gérer les classes conditionnels
• React-Hook-Form pour simplifier la gestion des formulaires

yarn add react-query classnames  react-hook-form 

Et pour la mise en forme, j'utilise les paquets suivants:

yarn add -D prettier @trivago/prettier-plugin-sort-imports

Dans un fichier .prettierrc à la racine, ajoutez les lignes suivantes:

{
  "importOrder": ["^components/(.*)$", "^[./]"],
  "importOrderSeparation": true,
  "importOrderSortSpecifiers": true,
  "plugins": ["@trivago/prettier-plugin-sort-imports"]
}

Maintenant, il vous reste à installer un React-Router-Dom si vous voulez créer un système de pages, et autres librairies que vous souhaitez utiliser.

J'espère vous avoir fait gagner du temps "partenaire !" 🤠