The conference dedicated to API Platform and its ecosystem

React Generator

List screenshot

The React generator scaffolds a Single Page Application or a Progressive Web App built with battle-tested libraries from the ecosystem:

It is designed to generate code that works seamlessly with Facebook's Create React App.

Install

Bootstrap a React application:

npm init react-app -- --template typescript my-app
cd my-app

Install the required dependencies:

npm install react-router-dom react-hook-form

Optionally, install Bootstrap and Font Awesome to get an app that looks good:

npm install bootstrap font-awesome

Finally, start the integrated web server:

npm run start

Generating a Web App

npm init @api-platform/client https://demo.api-platform.com src/ -- --generator react --resource book

Replace the URL by the entrypoint of your Hydra-enabled API. You can also use an OpenAPI documentation with -f openapi3.

Omit the resource flag to generate files for all resource types exposed by the API.

The code has been generated, and is ready to be executed!

// client/src/index.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import 'bootstrap/dist/css/bootstrap.css';
import 'font-awesome/css/font-awesome.css';
// Import your routes here
import App from './App';

const NotFound = () => (
  <h1>Not Found</h1>
);

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <Router>
      <Routes>
        <Route path="/" component={Welcome} strict={true} exact={true}/>
        {/* Add your routes here */}
        <Route render={() => <h1>Not Found</h1>} />
      </Routes>
    </Router>
  </React.StrictMode>
);