😊

React入門ガイド（初心者向け完全版）

に公開
React
tech

このガイドでは、Reactの概要からハローワールド、開発、そして公開までの一連の流れを初心者向けにまとめています。

1. Reactの概要

Reactを使うべき理由

  • 効率的にUIを作れる
    Reactはコンポーネントという再利用可能な部品単位でUIを構築でき、大規模なアプリでも管理がしやすい。
  • 更新が軽快
    必要な部分だけDOMを更新するので、動作が速く滑らかな操作感を実現。
  • 学習と将来性
    多くの企業で採用されているため、学ぶことで実務でも役立つ。

どんなWebが作れるか

  • シングルページアプリケーション（SPA）
    ページを切り替えるのではなく、単一ページ内でコンテンツを切り替えるアプリ。ページ遷移が速く、ネイティブアプリのような操作感を実現。
  • 動的でインタラクティブなUI
    ボタンを押すとデータが変わる、リストが自動で更新される操作に強い。
  • 部分的なDOM更新
    変更があった箇所だけ更新されるため、軽快に動作。

Reactの実装で考えること

  • 「ある状態の時に何が表示されるべきか」を意識する
    例：ログイン中ならユーザー名を表示、ボタン押下でカウンター増加。
  • 状態（state）とプロパティ（props）を理解する
    • state：コンポーネント内で変化するデータ
    • props：親コンポーネントから渡されるデータ

2. Reactのハローワールド

① アプリの雛形を作成

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

npx create-react-app アプリ名
  • アプリ名は任意の名前に置き換えて実行
  • 必要なファイルやフォルダが自動生成されます

② ファイルの整理

不要なファイルを削除し、開発しやすい状態にします。

削除してよいファイル

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

App.css

  • 中身をすべて削除してOK

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" alt="Pokemon"/>
          </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 にアプリが表示されます

④ ローカルサーバーの停止

サーバーを停止するには、ターミナルで以下を入力します。
Ctrl + c

⑤ ビルド（デプロイ準備）

開発が一段落したら、その日のうちにビルドしてデプロイすると進捗を実感でき、モチベーションも上がります。

npm run build
  • このコマンドでbuildフォルダが作成されます
  • 作成されたbuildフォルダをNetlifyなどにアップロードすれば、Webアプリとして公開可能です

Reactアプリのデプロイ方法

① Netlifyにアクセス

まず、以下のリンクからNetlifyにアクセスします：
Netlify

  • アカウント作成（無料）をしてログインします

② アプリをアップロード

  1. ビルド済みのアプリを準備（Reactでは npm run build で build フォルダ作成）
  2. Netlifyの管理画面で、「Need to update your site? Drag and drop your site output folder here」 と書かれた箇所にbuildフォルダをドラッグ＆ドロップ
  • これだけでアプリが自動的に公開されます
  • 公開後、URLが発行されるのでブラウザで確認可能

③ 以前のバージョンに戻したい場合

  • デプロイしたアプリがうまく動かない場合でも安心
  • 戻したいバージョンを選択して「Publish deploy」 を押すと以前の状態に簡単に戻せます
  • 複数のデプロイ履歴が自動で保存されるため、失敗しても安心です

Discussion