[今さら始める React マスター #2] 最初のReactアプリを作る

最初のReactアプリを作ろう

Reactを理解する一番の近道は、実際に小さなアプリを作ってみることです。今回は開発環境を準備し、最初のReactアプリを起動するところまで進めます。

必要なもの

• Node.js
• npm
• ブラウザ
• VS Codeなどのエディタ
• ターミナル

Node.jsが入っているか確認します。

node -v
npm -v

Viteでプロジェクトを作る

Reactの学習では、Viteを使うと手軽に始められます。

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

ブラウザで表示されたURLを開くと、Reactアプリが動いていることを確認できます。

ファイル構成を見る

最初に見るべきファイルは主に三つです。

ファイル	役割
src/main.jsx	Reactアプリの入口
src/App.jsx	画面の中心になるコンポーネント
src/App.css	App用のスタイル

JSXとは？

Reactでは、JavaScriptの中にHTMLのような構文を書きます。これをJSXと呼びます。

function App() {
  return <h1>Hello React</h1>;
}

HTMLに似ていますが、JavaScriptの一部として扱われます。

学習のポイント

最初は細かい仕組みをすべて理解しなくても大丈夫です。プロジェクトを作り、起動し、App.jsxを書き換える。この流れに慣れることが大切です。