Vite + React + TypeScript Hello, World!

覚え書きです。

使用した環境:

$ node --version
v22.14.0
$ npm -version
10.9.2

helloworld プロジェクトを作成:

npm create vite hello-world --template react-ts

質問されるので、React + TypeScript を選択した。

プロジェクトルートへ移動:

cd hello-world

依存するモジュールを入れる:

npm install

ポートを 8000 で起動するように修正:

package.json:

"scripts": {
  "dev": "vite --port 8000",      

--port 8000 を追加する。

起動して確かめる:

npm run dev

ブラウザで http://localhost:8000/ にアクセスします。

src/App.tsx を次のように書きかえる:

function App() {
  return (
    <div>Hello, World!</div>
  );
}

export default App;

src/main.tsx を修正 index.css は使わないのでコメントアウトします。

//import './index.css'

それでは再度 npm run dev して意図通り Hello, World! できたか確かめます。

できました。