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:

React ジェネレーターは、シングル ページ アプリケーションまたはプログレッシブ Web アプリを足場として、エコシステムからの実戦でテスト済みのライブラリーを使用して構築されます。

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

Facebook の Create React アプリとシームレスに連携するコードを生成するように設計されています。


Bootstrap a React application:

React アプリケーションをブートストラップします。

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:

必要に応じて、Bootstrap と Font Awesome をインストールして、見栄えの良いアプリを取得します。

npm install bootstrap font-awesome

Finally, start the integrated web server:

最後に、統合 Web サーバーを開始します。

npm run start

Generating a Web App

npm init @api-platform/client 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.

URL を Hydra 対応 API のエントリポイントに置き換えます。-f openapi3 で OpenAPI ドキュメントを使用することもできます。

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

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
        <Route path="/" component={Welcome} strict={true} exact={true}/>
        {/* Add your routes here */}
        <Route render={() => <h1>Not Found</h1>} />

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

アプリの使用を開始するには、https://localhost/books/ に移動します。


List Pagination Show Edit Delete