Reactの環境構築と最初の画面 | React入門

プロジェクトを作る

Reactの開発にはNode.jsとnpmを使います。Node.jsをインストールしたら、ターミナルで次のコマンドを実行します。

ViteプロジェクトSHELL

npm create vite@latest react-practice -- --template react
cd react-practice
npm install
npm run dev

成功したときの例OUTPUT

Local: http://localhost:5173/

表示されたURLをブラウザーで開きます。開発中はファイルを保存すると、Viteが画面を自動更新します。

ファイルの役割

src/main.jsxはHTMLのrootへReactを取り付けます。src/App.jsxはアプリの画面、src/index.cssは全体のCSSです。最初はApp.jsxとCSSを中心に編集します。

main.jsxのイメージJSX

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App.jsx';

createRoot(document.getElementById('root')).render(
  <StrictMode><App /></StrictMode>
);

StrictModeは開発中に問題を見つけやすくするための仕組みです。本番ビルドの画面へ警告文が表示されるものではありません。

JSXを表示する

JSXではHTMLに似た記法で画面を書きます。JavaScriptの値は{}に入れ、複数の要素は親要素またはフラグメントで囲みます。

App.jsxJSX

export default function App() {
  const learner = 'Mika';
  return (
    <main>
      <h1>Reactの練習</h1>
      <p>学習者: {learner}</p>
    </main>
  );
}

表示結果OUTPUT

Reactの練習
学習者: Mika

JSXの属性はclassではなくclassName、ラベルのforではなくhtmlForを使います。HTMLの文字列をそのまま貼るのではなく、JSXのルールに合わせて書き換えます。

困ったときの確認

画面が真っ白になったら、ブラウザーのConsoleとターミナルのエラーを確認します。括弧やタグの閉じ忘れ、コンポーネント名の小文字、importのパス間違いが代表的な原因です。

エラーを読む順番

最初の赤いエラーを読む
ファイル名と行番号を開く
直前に編集した記号やパスを確認する
修正後に保存して再確認する

次はコンポーネントとJSXで、部品を分けて再利用する方法を学びます。

React入門の講座一覧

プロジェクトを作る

ファイルの役割

JSXを表示する

困ったときの確認