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.
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
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:
// 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>
);
Go to https://localhost/books/
to start using your app.
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