React18+Tsを使用してプロジェクトを作成する

1. プロジェクトを作成する

まず、create-react-app ツールを使用して新しい React プロジェクトを作成します。

npx create-react-app 项目名 --template typescript

2. 依存関係をインストールする

Scaffolding を使用してプロジェクトを作成すると、react-dom およびその他の依存関係が付属しますが、react で使用されるルーティングメソッドは、react-router-dom です。

npm install  react-router-dom

3. ファイル構造

デフォルトでは、create-react-app テンプレートは次のようないくつかのファイルとフォルダーを自動的に生成します。

- node_modules
- public
    |- index.html
    |- favicon.ico
- src
    |- App.css
    |- App.tsx
    |- index.tsx
    |- logo.svg
    |- react-app-env.d.ts
    |- setupTests.ts
- package.json
- README.md
- tsconfig.json

node_modules: すべてのプロジェクトの依存関係を保存します。
public:index.html ファイルや favicon.ico ファイルなどの静的リソースファイルを保存します。
src: アプリケーションのソースコードを格納します。
App.css と App.tsx: React コンポーネントのスタイルとロジックです。
Index.tsx: アプリケーションのエントリポイントです。
tsconfig.json: TypeScript 構成情報を保管します。

4. 構成スタイル

上記の手順を完了すると、sass やless などのプリプロセッサを使用してスタイルを処理することもできます。

npm install sass stylelint stylelint-config-standard-scss --D

こうすることで、sass スタイルをプロジェクト内で直接使用できるようになります。
ここに画像の説明を挿入します

5. ルーティングの設定

新しいルーターフォルダーを作成し、その中にindex.tsxファイルを作成します。

import {
    
     lazy } from "react";
import {
    
     RouteObject } from "react-router-dom";
import Home from "../views/home";

const New = lazy(() => import("../views/editor/new") as any);
const Article = lazy(() => import(`../views/Article/[id]`) as any);
const routes: RouteObject[] = [
  {
    
    
    path: "/",
    element: <Home />,
  },
  {
    
    
    path: "/new",
    element: <New />,
  },
  {
    
    
    path: "/article/:id",
    element: <Article />,
  }
];

export default routes;

App.tsx フォルダーのルーティングを使用して、
ここに画像の説明を挿入します
ルートディレクトリのindex.tsx でルーティングをラップします。

正常に実行されると、http://localhost:3000 を通じてアプリケーションにアクセスできるようになります。

最後にバージョン情報を入れる
ここに画像の説明を挿入します