L'intermédiaire

React JS est un framework Javascript. Il n’est pas le seul. Il existe également Angular et Vue pour ne citer que ceux-là. Aujourd’hui incontournable pour la construction de site web rapide et à jour avec l’avenir du Javascript qui prend de l’ampeleur, je le teste sur l’API native de WordPress.

React js

React est donc un framework Javascript. En résumé, il compile votre site en un fichier HTML dynamique avec Javascript. Il fonctionne surtout à l’aide de composants. Une fois installé, il aspire une partie du web sous forme de composants que vous décidez d’utiliser ou non dans votre projet. Si l’outil n’est pas dans la liste, vous pouvez l’installer et l’intégrer dans votre projet en réalisant une petite recherche sur le web ou en vous rendant directement sur la documentation de l’outil en question. Par exemple, moi, j’ai voulu intégrer une fonte d’îcones en ligne nommée FonteAwesome (dont je vous en ai déjà parlé ici). Pour ce faire, je dois installer le composant et ensuite l’intégrer de cette manière :

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faGithub } from '@fortawesome/free-brands-svg-icons'

Dans cet exemple, j’importe la fonte et plus précisément l’icone de Github.
Au préalable, j’importe la librairie de cette manière :

npm i --save @fortawesome/fontawesome-svg-core

D’autres outils utilisés ? Oui. J’ai également importé le composant « Link » & « Anchor« , afin de pouvoir naviguer à travers le site. Une fois ces composants installés, vous pouvez créer des routes qui vous permettront de réaliser des permaliens élégants et dynamiques qui chargeront les composants que vous créez en fonction de l’url transmise dans votre navigateur. Dans mon cas, les catégories ou l’url de recherche charge le contenu en fonction de ce qui se passe dans l’URL. Mais en réalité, tout le site fonctionne ainsi. Le résultat donne un site ultrarapide, qui charge du contenu à la même vitesse que si vous cochiez une checkboxe. Voilà l’exemple : https://lintermediaire.be/react/

API WordPress et React.js

Avec Javascript (entre autres), nous pouvons charger une API pour exploiter les données d’un service externe et les faire apparaître sur son projet. C’est évidemment possible de le faire avec React. Des composants rendent possible cette intégration, mais voilà comment réaliser simplement cette requête :

const [lastPost, setlastedPost] = useState([])

const fetchLastedPost = () => {
fetch(« https://lintermediaire.be/wp-json/wp/v2/posts?_fields=id,title,date,custom_details,excerpt,slug,featured_media&per_page=1&page=1&order=desc »)
.then(response => {
return response.json()
})
.then(data => {
setlastedPost(data)
})
}

useEffect(() => {
fetchPostsData()
}, [])

userEffect permet de réaliser des actions au sein de vos composants. Dans ce cas-ci, je lance la requête qui exécutera la fonction « setlastedPost », qui changera la valeur de mon objet nommé « lastPost ». Sans rentrer dans une formation à React, cela permet d’importer l’objet créé (via l’useState à la première ligne) à travers mon/mes composant(s) qui en aurait besoin. Voilà un dernier morceau de code pour vous montrer à quoi cela ressemble :

import {React, useState, useEffect} from 'react'
import { BrowserRouter, Routes, Route } from "react-router-dom"

import WrapWebsite from "./inc/WrapWebsite"
import Header from "./inc/Header"
import Home from "./Home"
import Sidebar from "./inc/Sidebar"
import Error404 from "./Error404"
import Single from "./Single"
import ConfigWebsite from '../data/content'

function App() {
  
  /* usestates ...*/
  
  return (
    <BrowserRouter>

    <div id="wrapper">

    <WrapWebsite>

    <Header />

    <Routes>
      <Route index element={<Home Posts={Posts} setPosts={setPosts} lastPost={lastPost} setlastedPost={setlastedPost} cats={cats} setCategories={setCategories} />} />
      <Route path="*" element={<Error404 />} />
      <Route path={"/article/:PostId"} element={<Single />} />
    </Routes>

    </WrapWebsite>

    <Sidebar cats={cats} setCategories={setCategories} />

    </div>

    </BrowserRouter>

    )
}
export default App

Voilà à quoi ressemble un fichier appelé par React.
Dans cet exemple, vous verrez que j’importe « BrowserRouter » qui m’aide à réaliser les permaliens si vous voulez, les URLS qui composeront mon site. J’importe également des fonctions utiles à React à la première ligne. Tous les autres imports sont des composants créés le développeur (moi). On peut leur donner le nom que l’on veut, mais la sémantique recommande de toujours le faire avec une majuscule. Ensuite, on l’inclut dans notre projet comme une balise. (<Header />). Si vous regardez la ligne :

<Route path={« /article/:PostId »} element={<Single />} />

Vous verrez qu’il y a un pararmètre dans l’url qui sera dynamique. Ici, cela appelera le composant « 
<Single /> mais avec l’ID de l’article en paramètre, ce qui me permettra ensuite d’appeler l’url de API de WordPress avec l’ID correspondant. Je chargerai dans ce cas uniquement les données de l’article.

Pourquoi utiliser React ?

Si vous avez lu cet article (ou encore celui-ci), vous savez que je joue depuis un certain temps avec l’API WordPress. Dans ce cas-ci, on utilise React pour faire un site ultrarapide et très léger. Il suffit de comparer le site actuel avec mon exemple. Est-ce utile ? En fait oui, le nombre de requêtes est limité, et à l’aube de la constuction d’un monde plus juste sur le plan social et plus durable sur le plan écologique, le « web vert » prendra de plus en plus de l’ampleur. Un framework comme React rend votre site super rapide, mais aussi très léger sur le serveur, ce qui a un impact positif sur le serveur (allumer jour et nuit, masi avec plus de site web…) (Même si dans les faits, un site web « vert » n’existe tout simplement pas 😉 )

Là où React pose encore question, c’est au niveau de sa sécurité ou de son SEO. Il y a des méthodes pour les travailler, et je vous en ferai part au cours de l’année 2024. En attendant, vous avez un exemple d’implémentation d’un contenu d’un site WordPress avec React. Je n’ai pas parlé du style, mais voilà comment injecter une feuille de style (ici la principale) avec React :

import './assets/css/main.css';

L’HTML (et le style qui va avec) provient du template https://html5up.net/editorial.

Et voilà un schéma de la structure du projet :

assets/css/main.css

components
–inc/Header.js, Banner.js, Sidebar.js, WrapWebsite.js, Form.js
–App.js, Blog.js, ContactForm.js, Error404.js, Home.js, Search.js, Services.js, Single.js

data/content.js
img/
index.js