Apps

015-Poke picture book｜Step1_React環境構築：ひな形作成

はじめに

Reactで環境を構築します。

ポケモン図鑑アプリを作成するために、まずはReactの開発環境を構築し、基本的なプロジェクトのひな形を作成します。

本記事では、Reactアプリをセットアップし、必要なライブラリをインストールする手順を解説します。

Step1-1：app構築・起動

mkdir 011-PokePictureBook
cd 011-PokePictureBook
mkdir frontend
cd frontend
node -v
npx create-react-app .
npm install react@19 react-dom@19
npm install web-vitals
npm install react-router-dom
npm start

Step1-2：不要なファイルを削除

以下のファイルを削除

setupTests.js
reportWebVitals.js
logo.svg
App.test.js

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

App.js

import './App.css';

function App() {
  return (
    <div className="App">
    </div>
  );
}

export default App;

-Apps