🐙

Reactのハローワールド手順（初心者向け）

に公開
React
tech

とにかく早くハローワールドして、開発を進めるための手順をまとめました。

①アプリの雛形を作成する

ターミナルで以下のコマンドを入力すると、Reactアプリの雛形（ひな型）ファイル群が作成されます。

npx create-react-app アプリ名
  • アプリ名 は任意の名前に置き換えてください
  • このコマンドで、必要なファイルやフォルダが自動生成されます

②ファイルの整理

作成したアプリには不要なファイルやコードが含まれています。整理して、開発しやすい状態にしましょう。

  1. 作成したアプリを コードエディタ（VSCodeなど）で開きます
  2. 以下の不要ファイルは削除してOKです

①消してよいファイル

srcフォルダ内に消してよいファイルがいくつかあります。以下がそのファイルです。

src/
├ App.test.js
├ index.css
├ logo.svg
├ reportWebVitals.js
├ setupTest.js

②App.css

  • 中身はすべて削除して構いません

③App.js

  • 以下のコードに書き換えて、簡単なハローワールド画面を作成します
import './App.css';

function App() {
  return (
    <div className="App">
      <header>
        <h1>Hello World!!</h1>
      </header>

      <main>
        <section>
          <figure>
            <img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/female/25.png" />
          </figure>
        </section>
      </main>

      <footer>
        <p>Pokemon images are retrieved from<a href="https://pokeapi.co/about">Poke API</a></p>
      </footer>
    </div>
  );
}

export default App;

④index.js

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

ReactDOM.render(
    <App />,
  document.getElementById('root')
);

ファイルクリーニングは以上です。

③ ローカルサーバーの起動

整理が終わったら、ローカル環境で動作確認します。

npm start
  • コマンド実行後、ブラウザが自動で開き http://localhost:3000 にアプリが表示されます
  • 「Hello World!!」と画像が表示されれば成功です

これで Reactの最小限のハローワールドアプリ が完成です。
次のステップでは、ボタンを押したら動く、カウンターが増えるなどの簡単なインタラクティブ機能を追加してみましょう。

Discussion