アジェンダ
React, TypeScriptを使用するためのフロントエンド開発環境構築手順をまとめます。ここでは、Vite, Styled-Componentsを使用することを想定しています。
手順
GitHubリポジトリのクローンとViteプロジェクトのセットアップ
1. GitHubリポジトリのクローン:
ターミナルまたはコマンドプロンプトで以下のコマンドを使用して、GitHubから空のリポジトリをクローンします。
git clone your-repository-url
cd repository-name
2. Viteプロジェクトの作成:
空のリポジトリディレクトリ内で、以下のコマンドを実行してViteプロジェクトを初期化します。
npm create vite@latest
プロンプトが表示されたら、プロジェクト名、フレームワーク（Reactを選択）、およびテンプレート（JavaScriptまたはTypeScript）を指定します。
3. 依存関係のインストール:
Viteプロジェクトが作成されたら、そのディレクトリに移動し、以下のコマンドで依存関係をインストールします。
cd your-project-name
npm install
4. 開発サーバーの起動:
以下のコマンドで開発サーバーを起動します。
npm run dev
Styled-Componentsのセットアップ
Styled-Componentsは、Reactコンポーネントにスタイルを適用するためのライブラリです。このライブラリをインストールするには、次のコマンドを実行します。
npm install styled-components
また、Styled-ComponentsをTypeScriptと共に使用するためには、対応する型定義もインストールする必要があります。
npm install --save-dev @types/styled-components
Reactコンポーネントにスタイルを適用するためのライブラリとその型定義です。
ReactとTypeScriptのセットアップ
1. ReactとTypeScriptのインストール:
以下のコマンドでReactとTypeScriptをインストールします。
npm install react react-dom
npm install --save-dev typescript @types/react @types/react-dom
Reduxの統合
1. Reduxのインストール:
Redux ToolkitとReact Reduxをインストールします。
npm install @reduxjs/toolkit react-redux
2. ストアの設定:
store.tsファイルを作成し、Reduxストアを設定します。
import { configureStore } from '@reduxjs/toolkit';
export const store = configureStore({
reducer: {},
});
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;
3. ReactコンポーネントでのReduxの使用:
React 18のcreateRoot APIを使用して、ProviderでReduxストアをReactアプリケーションに組み込みます。
import React from "react";
import ReactDOM from "react-dom/client";
import { Provider } from 'react-redux';
import { store } from './store';
import App from "./App";
import "./styles/index.css";
const rootElement = document.getElementById("root");
if (!rootElement) throw new Error('Failed to find the root element');
const root = ReactDOM.createRoot(rootElement);
root.render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>
);