YMLib - React - Hello world

Hello world

2025/11/30

事前にNode.jsのインストールが必要です。インストール済みのNode.jsのバージョンの確認をします。

>node -v
v22.18.0

>npm -v
10.9.3

Reactのプロジェクトはvite(ビート)で作るようです。以前はcreate-react-appで作っていたようですがこちらは非推奨になったようです。

npm create vite@latest

コマンドプロンプトでコマンドを実行します。

プロジェクト名を入力しEnterを押します。

Reactを選択しEnterを押します。

JavaScriptを選択しEnterを押します。

NoのままEnterを押します。

YesのままEnterを押します。

何か処理が始まりました。

起動しました。表示されているURLにブラウザでアクセスしてみます。

ページが表示されました。

フォルダを見るといろいろなファイルが生成されていました。

srcフォルダのApp.jsxを書き換えてみます。

App.jsx

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:

import './App.css'

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

export default App

App.jsxを書き換えて保存するとブラウザの表示も変わりました。

コマンドプロンプトの表示も変わっていました。

Ctrl+Cを押します。 Yと入力しEnterを押すと処理が止まりました。

コマンドプロンプトを上にスクロールさせるといままでの履歴が残っていました。

ブラウザはこのサイトにアクセスできませんと表示されました。

再度起動してみます。

cd hello-react
npm run dev

コマンドを入力してみます。

起動したらブラウザでページが表示されました。