Comment créer une application ReactJS en 5 minutes?

Dans cet article, je vais créer une application ReactJS simple avec la récupération des données de l’API en 5 minutes, étape par étape.

LIRE AUSSI: Comment installer ReactJS sur Ubuntu 20.04

ReactJS est l’un des frameworks front-end les plus populaires de nos jours, que beaucoup de gens trouvent utile d’apprendre. Pour créer une application ReactJS, ce serait un plus d’avoir les bases de React.js, Javascript, HTML et CSS.

Créer une application ReactJS

Avant toute chose, vous devez installer Node.js et npm sur votre ordinateur, pour cela vous pouvez regarder cet article qui montre comment installer Nodejs et NPM sur votre ordinateur.

1. Installez create-react-app

Au début, nous devons installer l’outil create-react-app. C’est un outil fourni par les créateurs de ReactJS, qui permet créer une application ReactJS de façons simple et rapide avec toutes les dépendances nécessaires.

Pour installer l’outil, nous devons utiliser la commande suivante dans la ligne de commande:

npm install -g create-react-app

 

Une fois le processus d’installation terminé, nous sommes prêt à créer notre application ReactJS.

2. Créez l’application

Désormais, il est très facile de créer notre première application ReactJS à l’aide de l’outil create-react-app.

Nous pouvons le faire avec une seule commande dans notre ligne de commande. Tout d’abord, accédez au dossier dans lequel vous souhaitez avoir votre application via la ligne de commande, puis exécutez la commande suivante, où reactapp est le nom de notre application:

npx create-react-app reactapp

Vous pouvez vous sentir libre de définir un nom différent pour votre application. Si le processus s’est terminé avec succès, vous devriez avoir votre dossier avec l’application prête! Lançons l’application maintenant.

3. Démarrez l’application

Démarrons notre application reactapp avec les commandes suivantes:

cd reactapp 
npm start

La première commande est utilisée pour entrer dans le dossier de notre application, et la seconde démarre notre application.

Par défaut, l’application est ouverte sur localhost: 3000, mais nous pouvons changer le port dans les paramètres.

Une fois l’application démarrée, la fenêtre du navigateur apparaîtra à la bonne adresse et vous verrez l’image suivante dans le navigateur:

Et dans votre terminal, vous verrez les informations suivantes:

Il semble que notre première application soit en cours d’exécution, récupérons maintenant quelques données de l’API.

 

4. Création d’un appel API

Ouvrons le code de l’application dans votre éditeur de code préféré. Dans le dossier ./src, il y a notre composant principal App.js. Ouvrons-le et jetons un œil à ce qu’il contient.

On peut y voir le code que l’on voit sur https: // localhost: 3000.

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

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</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;

 

Commençons par modifier le composant pour le transformer en composant de classe, ce qui sera beaucoup plus pratique dans notre cas. Nous voulons que notre composant App.js se présente de la manière suivante:

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <p>Hello world!</p>
    );
  }
}
export default App;

J’ai supprimé les importations App.css et logo.svg car nous n’en avons plus besoin. De plus, j’ai importé le composant «react», que j’ai utilisé pour créer un composant de classe. Ajoutons du code JSX personnalisé dans l’instruction return() et rechargeons la page pour voir le résultat!

Maintenant, définissons un state local dans lequel nous allons enregistrer nos données à partir de l’API.

import React, { Component } from 'react';

class App extends Component {
constructor(props) {
    super(props);
    this.state = {
      posts: []
    }
  }
  render() {
    return (
      <p>Hello world!</p>
    );
  }
}
export default App;

J’ai ajouté un constructeur et passé des props, puis j’ai défini un state local qui va contenir la liste des articles.

Très bien, maintenant je suis prêt à créer un appel à l’API. Je vais utiliser une fausse API du site Web JSONPlaceholder (https://jsonplaceholder.typicode.com/).

Pour obtenir les données, j’utiliserai la méthode .fetch de Javascript.

Créons un appel:

import React, { Component } from 'react';

class App extends Component {
constructor(props) {
    super(props);
    this.state = {
      posts: []
    }
  }
  componentDidMount() {
    const url = "https://jsonplaceholder.typicode.com/posts";
    fetch(url)
    .then(response => response.json())
    .then(json => this.setState({ posts: json }))
  }
  render() {
    return (
      <p>Hello world!</p>
    );
  }
}
export default App;

Dans le code ci-dessus, j’ai récupéré des données de l’API et enregistrées dans notre state local. Voyons quel est le format de nos données avant d’afficher les articles:

[
  {
    "userId": 1,
    "id": 1,
    "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
    "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
  },
  {
    "userId": 1,
    "id": 2,
    "title": "qui est esse",
    "body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla"
  },
  {
    "userId": 1,
    "id": 3,
    "title": "ea molestias quasi exercitationem repellat qui ipsa sit aut",
    "body": "et iusto sed quo iure\nvoluptatem occaecati omnis eligendi aut ad\nvoluptatem doloribus vel accusantium quis pariatur\nmolestiae porro eius odio et labore et velit aut"
  },
...
]

 

5. Affichage des données

Maintenant, nous avons recuperer les articles à partir de l’API et nous aimerions les afficher.

Nous allons stylisé l’affichage des articles, pour cela nous allons ajouter Bootstrap à notre application.

À partir du site Web Bootstrap, nous obtenons un CDN, et nous devons le placer dans la section du fichier ./public/index.html.

....
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <title>React App</title>
  </head>
  <body>
....

 

Et c’est tout, nous pouvons utiliser Bootstrap maintenant. Créons un code JSX pour nos données.

....
render() {
    return (
      <div className="container">
        <div class="jumbotron">
          <h1 class="display-4">Blog posts</h1>
        </div>
        <div className="card">
          <div className="card-header">
            Featured
          </div>
          <div className="card-body">
            <h5 className="card-title">Special title treatment</h5>
            <p className="card-text">With supporting text below as a natural lead-in to additional content.</p>
            <a href="#" className="btn btn-primary">Go somewhere</a>
          </div>
        </div>
      </div>
    );
  }
....

 

J’ai ajouté un conteneur, un en-tête et une carte dans lesquels je vais afficher les données de this.state.

LIRE AUSSI: Comment installer React Native sur Ubuntu

Utilisons les données avec la méthode map() et affichons-les sous forme d’articles.

import React, { Component } from 'react';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      posts: []
    }
  }

  componentDidMount() {
    const url = "https://jsonplaceholder.typicode.com/posts";
    fetch(url)
    .then(response => response.json())
    .then(json => this.setState({ posts: json }))
  }

  render() {
    const { posts } = this.state;
    return (
      <div className="container">
        <div class="jumbotron">
          <h1 class="display-4">Blog posts</h1>
        </div>
        {posts.map((post) => (
          <div className="card" key={post.id}>
            <div className="card-header">
              #{post.id} {post.title}
            </div>
            <div className="card-body">
              <p className="card-text">{post.body}</p>
            </div>
          </div>
        ))}
      </div>
    );
  }
}
export default App;

Nous avons transmis les données des articles à un élément de carte et avons défini post.title, post.body et post.id.

6. Ajoutez du style

Nous pouvons voir que notre application est presque prête maintenant.

Mais cela n’a toujours pas l’air superbe, nous allons donc ajouter un peu de style. Importons à nouveau un fichier App.css et définissons-y des marges pour que nos articles de blog soient beaux.

.app {
  padding: 10px;
}

.app .jumbotron {
  text-align: center;
}

.app .card {
  margin-bottom: 10px;
}

.app .card-header {
  color: white;
  font-weight: bold;
}

 

 

Notre application  Reactjs semble prête.

Conclusion

Dans cet article, nous avons appris à créer une application ReactJS simple avec la récupération de données à partir de l’API REST.

Nous avons créé une liste simple, affichant de courts articles de blog.

Nous avons utilisé une application create-react-app pour définir facilement une application React.js prête et Bootstrap pour le style.

 

Bon codage!

 

Merci pour la lecture!