React入門

はじめに

React環境構築したはいいものの、それぞれのファイルが何を指しているかわからないイカだイカ🦑
今日は簡単なReactのプロジェクトを作成したので、それぞれのフォルダの役割を紹介していくイカ🦑

フォルダ構成

現在のフォルダ構成は下記のようになっているイカ🦑

my-rag-bot/
├── node_modules/
├── public/
│   ├── index.html
│   └── favicon.ico
├── src/
│   ├── components/
│   │   ├── Header.tsx      // 拡張子が .tsx になる
│   │   ├── ChatWindow.tsx
│   │   └── SendButton.tsx
│   ├── types/              // ★ 型定義ファイルを格納
│   │   └── chat.ts         // 例: メッセージオブジェクトの型定義
│   ├── App.css
│   ├── App.tsx             // メインコンポーネント
│   ├── index.css
│   └── main.tsx            // アプリケーションのエントリーポイント
├── **tsconfig.json** // ★ TypeScriptコンパイラの設定ファイル
├── .gitignore
├── package.json
└── README.md

前提知識

• .jsがJavaScript
• .tsがTypeScript
  • JavaScriptの進化系
  • JavaScriptの型をあらかじめ決めた言語
  • サーバーサイドでの実行も行われるように設計されている

各フォルダの処理

• src/main.tsx

  • Reactアプリケーション全体のエントリーポイント
  • Reactのレンダリングを開始するためのファイル

• index.html

  • Reactのページが動的に描画されるためのルート要素を提供している
  • つまり、index.htmlの中身を、main.tsxを用いて画面描画を行っている

• src/App.tsx

  • メインのコンポーネント
  • アプリケーション全体のレイアウトやルーティング（画面遷移）を管理する

• components/*.jsx

  • 再利用可能な部品（headerやfooter、普通の各画面など）を描画する

• package.json

  • 依存ライブラリを定義している

• node_modules/

  • package.jsonに基づいてインストールされたサードパーティ製のライブラリやツール本体が格納されている

• tsconfig.json

  • TypeScriptのコンパイルオプションを設定

おわりに

ここまでReactのっ買うファイルについて解説してきたイカ🦑
ページがindex.htmlだけで、その中身を動的に変えているってなんだか不思議だイカ🦑