Intégration analytics avec TypeScript, React et les Styled Components - partie 1: l'outillage
Tags: typescript, styledcomponents, googleanalytics, ga4
Published: 2022-12-05 08:08:23

Dans cette série de tutoriels, nous allons créer une application web toute simple avec trois technologies :
- [TypeScript](https://www.typescriptlang.org/) sera notre language de programmation,
- [React](https://reactjs.org/) sera notre framework pour développer notre application,
- [Styled Components](https://styled-components.com/) pour gérer les styles avec CSS-in-JS.

Nous allons ensuite traçer les actions utilisateurs dans l'application avec Google Analytics 4. Nous utiliserons aussi la librairie [Web Vitals](https://github.com/GoogleChrome/web-vitals) pour mesurer les performances de l'application et envoyer les résultats vers GA4.

L'objectif est de comprendre les workflow front-end modernes, et leurs intégrations avec Google Analytics.

# 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`](https://create-react-app.dev/) 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](https://webpack.js.org/) et [Babel](https://babeljs.io/) (configuré pour compiler TypeScript), ainsi que [web -vitals](https://github.com/GoogleChrome/web-vitals#send-the-results-to-google-analytics).
Tout ça en une seule commande !

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

```bash
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 :

```bash
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 :

```bash
npm i styled-components
```

Ensuite, nous installons les types styled-components pour TypeScript :
```bash
npm i --save-dev @types/styled-components
```
En savoir plus sur ces types sur : [https://github.com/DefinitelyTyped/DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped).

Nous venons d'installer le [fichier de déclaration] (https://medium.com/jspoint/typescript-type-declaration-files-4b29077c43) 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 :

```typescript
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](https://fr.reactjs.org/docs/components-and-props.html#gatsby-focus-wrapper) 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 :

```typescript
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 :

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mr9ojk5y5fhh32bduj2i.png)

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