React

NodeJS requis

Création du projet :

npx create-react-app my-app

Eventuellement avec le support typeScript :

npx create-react-app my-app --template typescript

Démarrage du serveur

cd my-app
npx start

Un composant peut être créé à partir d'une fonction :

function Hello() {
  return (
    <div>
      <h1>props.message</h1>
    </div>
  );
}

export default Hello;

Un composant peut être créé à partir d'une classe ES6 :

import React from "react";

class Hello extends React.Component {
  render() {
    return <h1>{this.props.message}</h1>;
  }
}
export default Hello;

Un composant peut être créé à partir d'une classe TypeScript:

import React from "react";

export default class Hello extends React.Component<{message: string}> {
  render() {
    return (
      <h1>{this.props.message}</h1>
    );
  }
}

La classe Hello déclare explicitement une propriété de nom message de type string.

Utilisation de Hello dans l'App, et initialisation en JSX de la prop message avec l'attribut message :

import Hello from './hello';

function App() {
  return (
    <div className="App">
      <Hello message="Hello World!"/>
    </div>
  );
}

export default App;