ReactアプリをAIで作る
アプリを説明すると、SupacodeがReactで書き上げます。コンポーネント、状態管理、スタイルはすべて読んで編集できるコードです。ライブプレビューで動き、変更はバージョンとして保存され、コードのダウンロードやGitHubへのプッシュもできます。
このプロンプトが入力された状態で作成画面が開きます。作成前に自由に編集でき、実行前に必要なクレジットが表示されます。
作成の流れ
アプリを説明する
何をするアプリで、どう使うのかを伝えます。構成でReactを選ぶか、「自動」に任せます。
少しずつ機能を足す
機能をひとつずつ頼みましょう。自分でファイルを変えたいときは、いつでもコードエディターを開けます。
公開または書き出し
公開してリンクを作るか、zipでダウンロードするか、GitHub同期を含むプランならGitHubにプッシュできます。
依頼できること
- 読みやすいReactコンポーネント
- 動きのある状態管理とフォーム
- レスポンシブなスタイル
- 変更のたびにライブプレビュー
- 復元できるバージョン履歴
プロンプト例:Reactアプリ:プロジェクト別のToDoリスト。期限の設定、ドラッグ&ドロップでの並べ替え、「今日」「今週」の絞り込みができて、データはブラウザに保存されるようにしてください。
ギャラリーの作品例
すべて見る
0 0テンプレートWebアプリ
Laneway — Team boards
@Supacode · React
0 0テンプレートWebアプリ
Parley — Team messenger
@Supacode · React
0 0テンプレート地域のお店・サービス
Rapid Rooter Plumbing
@Supacode · React
0 2テンプレートダッシュボード・ツール
Pennywise — Budget tracker
@Supacode · React
0 0テンプレート予約受付
Brightside Dental
@Supacode · React
0 0テンプレートNPO・慈善団体
Open Shelf — Community libraries
@Supacode · React
よくある質問
本物のReactコードですか?
はい。コードエディターですべてのファイルを読んで編集でき、プロジェクトをダウンロードすることもできます。
Next.jsを選ぶべきなのはどんなときですか?
ログイン、APIルート、サーバー側のデータ取得など、サーバーのコードが必要なアプリならNext.jsを選んでください。
手元のエディターで開発を続けられますか?
はい。GitHubにプッシュするか、zipでダウンロードしてローカルで続けられます。