React Light 🕊️

Francois Dubrez inclus dans Tutoriel React JS

2020-10-02 542 mots 3 minutes

Contenu

Intro

Il existe un choix pléthorique de framework front pour prototyper rapidement des applications web. On peut aussi utiliser du VanillaJs car les APIs standards ont quand même pas mal évolué ces derniers temps. Pour ma part j’ai testé React et l’utilise régulièrement quand je veux faire du prototypage rapide.

Dans l’écosystème React, le réflexe pourrait être d’utiliser un projet comme create-react-app mais c’est un peu overkill pour aller rapidement. Le premier npm install fait mal si on a une mauvaise connexion internet.

JSX du sucre mais qui a un prix

On a l’habitude de développer nos composants React en utilisant du JSX. Cela veut dire que l’on va pouvoir ajouter du HTML dans nos composants.

On aime ou on aime pas, mais pour ma part je trouve ça élégant. Ça a aussi l’avantage de mettre en exergue le besoin de découper un composant quand il devient trop gros/complexe.
Ça reste du sucre syntaxique car on peut tout à fait coder des composants React sans JSX si on le souhaite, mais le sucre c’est difficile de s’en passer une fois qu’on y a goûté.

1
2
3
4
5


export default function HelloWorldComponent() {
  return (
    <div>Hello world!</div>
  );
}

Pour être utilisé dans notre navigateur, notre code JSX doit être transpilé en javascript. C’est là que Babel fait son entrée. Le projet create-react-app évoqué plus haut nous apporte justement tout l’outillage et une configuration par défaut pour que l’on ai pas à se soucier de cette partie là.

babel-standalone

babel-standalone est une version embarquable dans le navigateur de Babel. On va pouvoir servir notre code JSX statiquement et Babel s’occupera de transpiler en live nos composants JSX en Javascript.

L’intérêt, aucun outillage nécessaire et on peut servir notre appli statiquement en local via un python -m SimpleHTTPServer ou autre mais également sur un service comme Gitlab Pages.

Template pour “bootstrapper” rapidement un projet

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21


<!-- index.html -->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>babel-standalone project</title>
    </head>
    <body>
        <div id="root"></div>
        <script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script>
        <script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script>
        <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
        <script type="text/babel" src="components/App.js"></script>
        <script type="text/babel">
            ReactDOM.render(
                <App/>,
                document.getElementById('root')
            );
        </script>
    </body>
</html>

1
2
3
4
5
6


// components/App.js
export default function App() {
  return (
    <div>Hello world!</div>
  );
}

Grâce à ces deux fichiers, on a un site statique avec React, qu’on peut facilement éditer dans notre éditeur préféré (VSCode pour ma part).

Temps de mise en place du projet: le temps de copier/cloner le template
Build time: inexistant : c’est Babel qui transpile dans le navigateur
Performance: pour du prototypage ou des petites applis annexes la perte de performance est tout à fait acceptable au vu de la rapidité pour développer/tester/déployer.

Déploiement dans Gitlab Pages

L’arborescence de notre projet:

1
2
3
4
5


public/
    index.html
    components/
        App.js
.gitlab-ci.yml

Voila une configuration Gitlab minimale pour déployer notre site statique sur Gitlab Pages

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


# .gitlab-ci.yml
image: alpine:latest

pages:
  stage: deploy
  script:
    - echo 'Nothing to do, it's static bro...'
  artifacts:
    paths:
    - public
  only:
  - master

Vous pouvez retrouver le template illustrant cet article sur notre gitlab public : react-light-template.