はじめに
フロントをReact, Typescript、バックエンドをJavaとSpringを使用したアプリの技術検証をする機会があったので、今回はフロントエンド側の基本的なセットアップの流れをご紹介します。
フロントセットアップ
フロントエンドは以下の技術スタックです。
開発環境
言語：
Typescript
ライブラリ
React
フレームワーク
Vite
まずはViteをインストールします。my-appの部分は好きなプロジェクト名にしてください。
npm create vite@latest my-app -- --template react-ts
インストールができたら、プロジェクト配下に移動します
cd my-app
その後、依存関係をインストールします。
npm install
完了したら、一度ローカルで起動をしてみてください。
npm run dev
問題なく起動ができればVite + Reactのロゴと文字が画面上に表示されます。
Hello Worldの表示
src配下にあるApp.tsxを以下のように書き換えることで画面上の表示を変更することができます。
App.tsx
import "./App.css";
function App() {
return (
<>
<div>
<h1>Hello World</h1>
</div>
</>
);
}
export default App;
index.cssとApp.cssが効いていると画面の中央に文字が表示されますが、これらのファイルの中身を消すことで以下のようにcssなしのまま表示ができます。
おわりに
ここまででフロントエンド側のセットアップが完了しました。
次の記事ではバックエンド側のセットアップを実施していきます！
JISOUのメンバー募集中！
プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
実践的なカリキュラムで、あなたのエンジニアとしてのキャリアを最短で飛躍させましょう！
興味のある方は、ぜひホームページからお気軽にカウンセリングをお申し込みください！
▼▼▼