Initier un projet avec React.js

React.js, la librairie conçue par Facebook est une façon flexible et rapide pour créer la logique cliente d'applications web.

Cet article est le premier d'une longue série pour survoler les différents aspects de l'outil.

Initier un projet

React propose un module «create-react-app» pour initialiser un projet minimal.

  1. La première étape consiste à installer le module à l'aide de npm :
    npm install -g create-react-app
  2. Une fois le module présent sur la machine, il suffit d'invoquer la commande :
    create-react-app <nom>
  3. À partir du répertoire du projet, pour le servir en local, il suffit de taper :
    npm start

Structure

Le projet nouvellement créé propose une page html des plus simple :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

La div «root» servira de point d'entrée à notre application contenue dans App.js :

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;

Installation manuelle

React utilise un certain nombre d'outils en interne qu'il gère et configure de façon transparente :

  • Webpack qui est responsable du packaging de l'application
  • Babel qui se charge de compiler le javascript de l'application
  • ESLint qui analyse le code de notre application à la recherche d'erreurs

React est une simple librairie qui peut être intégrée dans une application existante et est accessible via un CDN :

<script src="https://unpkg.com/react@15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>

Ou pour une version minifiée :


<script src="https://unpkg.com/react@15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>

Voir aussi

Post a Comment

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*