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! できたか確かめます。

できました。

bootstrap 5 を導入

see: https://www.npmjs.com/package/bootstrap

npm install bootstrap@v5.3.6 --save-dev

src/App.tsx に bootstrap を import:

import 'bootstrap/dist/css/bootstrap.min.css';

src/App.tsx のレンダリング部分のコードに bootstrap が適用できたか確認するための記述を追加:

function App() {
  return (
    <>
      <div className="h1">Hello, World!</div>
      <div className="h2">Hello, World!</div>
      <div className="h3">Hello, World!</div>
    </>
  );
}

npm run dev して確かめます:

できました。