Une application simple avec TypeScript, React et les Styled Components

Dans cette série de tutoriels, nous allons créer une application web simple avec trois technologies :

• TypeScript sera notre language de programmation,
• React sera notre framework pour développer notre application,
• Styled Components pour gérer les styles avec CSS-in-JS.

L'objectif est d'apprendre les bases de ces outils pour vous permettre d'écrire votre propre application en un rien de temps.
Voyons ce dont vous aurez besoin pour commencer.

Prérequis

Pour faire ce tutoriel, vous aurez besoin de :

• votre application de ligne de commande favorite
• node, npm et npx installés sur votre ordinateur. Au moment d'écrire cet article, j'utilise node 16.11.0, npx 8.0.0 et npm 8.0.0.

J'utilise également VSCode et la ligne de commande Git bash, mais vous pouvez utiliser la ligne de commande et l'éditeur de code que vous préférez.

Création d'une nouvelle application React avec TypeScript

La première étape consiste à utiliser create-react-app pour générer une application simple comme point de départ. create-react-app nous facilite la vie en configurant les outils de base automatiquement. Entre autres choses, il configurera automatiquement Webpack et Babel (configuré pour compiler TypeScript), ainsi que web -vitals.
Tout ça en une seule commande !

Naviguez dans le dossier où vous voulez que votre application soit installée, puis tapez la command suivante :

npx create-react-app my-react-ts-app --template typescript

Et voilà ! Votre application vit maintenant dans un nouveau dossier appelé /my-react-ts-app. Vous remarquerez quelques fichiers de configuration déjà en place tels que package.json et tsconfig.json. Vous avez également les fichiers source de l'application elle-même déjà en place dans le dossier /src.

Démarrez votre application en tapant :

npm start

Installer des Styled Components pour TypeScript

L'étape suivante consiste à ajouter des styled components à nos applications. Commencez par installer la bibliothèque styled-components :

npm i styled-components

Ensuite, nous installons les types styled-components pour TypeScript :

npm i --save-dev @types/styled-components

En savoir plus sur ces types sur : https://github.com/DefinitelyTyped/DefinitelyTyped.

Nous venons d'installer le fichier de déclaration qui contient tous les types nécessaires à l'utilisation des styled components en TypeScript. C'est parti !

Ajouter un nouveau composant stylé

Nous allons maintenant créer un composant de style très basique, avec un style conditionnel. Créez un nouveau fichier nommé "Heading.tsx" avec le contenu suivant :

import styled from 'styled-components';

export const Heading = styled.h1<{ active: boolean }>`
  color: ${props => (props.active ? 'red' : 'blue')};
`;

export default Heading;

Cela créera une nouvelle classe de composant <h1> qui prend un prop booléen appelé active. Si active est défini sur true, nous définissons la couleur de notre titre h1 sur bleu, sinon nous le peindrons en rouge.

Testons-le : ouvrez App.tsx et copiez le contenu ci-dessous :

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Heading from './Heading';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <Heading active={false}>My Heading</Heading>
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}


export default App;

Nous avons importé la classe de composants Heading et inséré un titre avec active défini sur false.
Voici à quoi devrait ressembler le résultat :

Joli travail! Vous êtes prêt à créer votre application React en TypeScript à l'aide des Styled Components !