次世代フロントエンドツールViteを用いて、React+TypeScript+Tailwindcssの環境を開発する

Vite(読み方はヴィート)とは? 次世代フロントエンドツール 最先端をいく開発環境を構築しましょう と謳うように下記のような特徴を持つ。 瞬時にスタートするサーバ 超高速な HMR 豊富な機能 最適化されたビルド ユニバーサルなプラグイン 完全に型定義がされている API これを読んでもピンとこないと思うので、まずは環境構築をしてみてほしい。 そのスピードに驚くこと、間違いない。 React & TypeScrpt の環境構築 $ npm create vite@latest MyApp -- --template react-ts というコマンドを叩くだけで、 Need to install the following packages: create-vite@4.2.0 Ok to proceed? (y) y √ Package name: ... MyApp Scaffolding project in C:\Project\MyApp... Done. Now run: cd MyApp npm install npm run dev 環境が構築される。 この時点でもうReactの開発環境が構築されている。 Tailwindを導入する reactにおけるcssの取り扱いは少し癖があり悩むところがあるので、何も考えずにtailwindを導入する。 npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p 上記コマンドでTailwindのインストールと設定ファイルを作成する。...

投稿日 · 2023-05-14 · 更新日 · 2024-06-07 · 1 分 · nove-b