Reactのハローワールド

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

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

ターミナルで以下のコマンドを入力すると、アプリケーションの雛形ファイル群が作成できます。

npx create-react-app アプリ名

②ファイルの整理

作成したアプリには不要なファイルやコード、変更があるので整理します。まずは、先ほど作成したアプリをコードエディタで開いて操作していきます。

①消してよいファイル

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

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

②App.css

App.css内のコードはすべて消してしまってOKです。

③App.js

Appjsのファイルは以下に変更します。

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

これでハローワールドできるはずです。