Api Platform conference
Register now
API Platform Conference
September 19-20, 2024 | Lille & online

The international conference on the API Platform Framework

API Platform Conference 2024: meet the best PHP, JavaScript and API experts

Learn more about the event, register for the conference, and get ready for two days of inspiration, ideas, and knowledge-sharing with our incredible lineup of renowned specialists and advocates.

Register now

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:

Install

Bootstrap a React application:

npm create vite@latest my-app -- --template react-ts
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 dev

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!

Register the reducers and the routes:

// my-app/src/main.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="/" element={<App/>}/>
        {/* Add your routes here */}
        <Route path='*' element={<NotFound/>} />
      </Routes>
    </Router>
  </React.StrictMode>
);

Go to https://localhost/books/ to start using your app.

Screenshots

List Pagination Show Edit Delete

You can also help us improve the documentation of this page.

Made with love by

Les-Tilleuls.coop can help you design and develop your APIs and web projects, and train your teams in API Platform, Symfony, Next.js, Kubernetes and a wide range of other technologies.

Learn more

Copyright © 2023 Kévin Dunglas

Sponsored by Les-Tilleuls.coop