<commit_before>---
date: "2017-11-09"
title: "ReasonReact, pour une UI qu'elle est bien typée"
tags:
  - reasonml
  - ocaml
  - react
authors:
  - bloodyowl
header:
  image: index.png
  linearGradient: #DD4B39, #DD4B39
---

Si comme moi, depuis l’apparition de React, vous vous êtes de plus en intéressés au typage pour vos applications front (c'est ça de commencer avec JS…), vous avez certainement utilisé les `propTypes` au début en vous disant "putain c'est cool de vérifier les types, ça m'évite bien des problèmes". Puis c’était sympa mais bon, faut quand même exécuter le bout de code qui pète et il est peut-être super chiant d'y accéder dans l'app. Du coup, vous vous êtes sûrement tournés vers Flow ou TypeScript.

Dans cet article, on va découvrir la *next-step* dans ce cheminement : écrire nos composants React dans un langage statiquement et fortement typé: Reason 🚀. Reason, c'est OCaml, avec son type-system puissant et une syntaxe plus simple quand on vient du JS. Si vous n’avez pas lu [l’introduction à ce langage](fr/articles/reason/introduction-reason/), c’est le moment.

Là, je vais vous présenter **ReasonReact**, des bindings API par dessus ReactJS supportés officiellement par l'équipe de Reason. Facebook *dogfood* la solution puisqu'elle est utilisée sur messenger.com pour la majeure partie de ses composants.

## Stateless

Commençons par le traditionnel HelloWorld™ :

```reason
/* Un composant ReasonReact se crée en deux temps: d'abord on crée le `component`
   à partir d’un appel à `statelessComponent` ou `reducerComponent` (il existe d'autres
   cas plus avancés, mais on s'y attardera pas dans cet article d'introduction). */
let component = ReasonReact.statelessComponent("HelloWorld");

/* Ensuite, on déclare une fonction `make` qui prend des arguments nommés
   (qui équivalent aux `props` de ReactJS) et un dernier argument non-nommé,
   contenant les `children`. Cette fonction doit retourner un record, dans
   lequel on spread notre `component` et dans lequel on définit une propriété
   `render` qui prend comme paramètre `self` (équivalent du `this`) et qui retourne
   un élément React. Là-dessus ça devrait pas trop vous chambouler de ce que<commit_msg>Fix broken link<commit_after>---
date: "2017-11-09"
title: "ReasonReact, pour une UI qu'elle est bien typée"
tags:
  - reasonml
  - ocaml
  - react
authors:
  - bloodyowl
header:
  image: index.png
  linearGradient: #DD4B39, #DD4B39
---

Si comme moi, depuis l’apparition de React, vous vous êtes de plus en intéressés au typage pour vos applications front (c'est ça de commencer avec JS…), vous avez certainement utilisé les `propTypes` au début en vous disant "putain c'est cool de vérifier les types, ça m'évite bien des problèmes". Puis c’était sympa mais bon, faut quand même exécuter le bout de code qui pète et il est peut-être super chiant d'y accéder dans l'app. Du coup, vous vous êtes sûrement tournés vers Flow ou TypeScript.

Dans cet article, on va découvrir la *next-step* dans ce cheminement : écrire nos composants React dans un langage statiquement et fortement typé: Reason 🚀. Reason, c'est OCaml, avec son type-system puissant et une syntaxe plus simple quand on vient du JS. Si vous n’avez pas lu [l’introduction à ce langage](/fr/articles/reason/introduction-reason/), c’est le moment.

Là, je vais vous présenter **ReasonReact**, des bindings API par dessus ReactJS supportés officiellement par l'équipe de Reason. Facebook *dogfood* la solution puisqu'elle est utilisée sur messenger.com pour la majeure partie de ses composants.

## Stateless

Commençons par le traditionnel HelloWorld™ :

```reason
/* Un composant ReasonReact se crée en deux temps: d'abord on crée le `component`
   à partir d’un appel à `statelessComponent` ou `reducerComponent` (il existe d'autres
   cas plus avancés, mais on s'y attardera pas dans cet article d'introduction). */
let component = ReasonReact.statelessComponent("HelloWorld");

/* Ensuite, on déclare une fonction `make` qui prend des arguments nommés
   (qui équivalent aux `props` de ReactJS) et un dernier argument non-nommé,
   contenant les `children`. Cette fonction doit retourner un record, dans
   lequel on spread notre `component` et dans lequel on définit une propriété
   `render` qui prend comme paramètre `self` (équivalent du `this`) et qui retourne
   un élément React. Là-dessus ça devrait pas trop vous chambouler de ce que
{'fraction_non_alphanumeric': 0.07144477205715581, 'fraction_numerical': 0.0063506464050805175, 'mean_word_length': 4.471464019851116, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4618890', 'n_tokens_mistral': 1394, 'n_tokens_neox': 1381, 'n_words': 623}