42tokyo_20240214

node v20.5.0を使用

（各種ライブラリのバージョンを見たい場合はpackage.jsonを参照してください）

環境構築(ローカル)

上記のnodeが入っている状態で

npm install
npm run dev

を行い、 http://localhost:5173/ をブラウザで表示する（サーバーを閉じる際はCtrl + C）

Dockerを使用したい場合

Dockerが入っている環境で

docker build -t 42tokyoevent20240214 .

を行い、完了したら、

docker run -p 5173:5173 -v $(pwd):/app -v /app/node_modules 42tokyoevent20240214

を行い、 http://localhost:5173/ をブラウザで表示する（サーバーを閉じる際はDocker DesktopからStopをする、ないし docker stop <container id> などを使用してください）

※両方の環境は同時に使用できないため、同一チームで環境が分かれる場合はそれぞれの package.json 、package-lock.json を共有しないようにしてください。

※Docker Desktopの設定によっては、 Segmentation fault のエラーが発生する場合があります。その際は、Docker Desktopの設定の「Choose file sharing implementation for your containers」の項目を「gRPC FUSE」にして、「Use Virtualization framework」のチェックを外して Apply & restart を行い、再度試してみてください。

ソースコードの説明

React.jsとTypeScriptを使用したSPAのアプリケーションになっています。

src/App.tsx
- 全てのページで共通のコンポーネントが書かれたファイル
src/Products.tsx
- 商品一覧ページのコンポーネントが書かれたファイル
src/Privacy.tsx
- プライバシーポリシーページのコンポーネントが書かれたファイル。サンプル用のファイルなのでこのイベントでは編集しません。
src/App.css
- App.tsxで用いるCSSのファイル
src/Products.css
- Products.tsxで用いるCSSのファイル

TSX(JSX)の基本ルール

JSXは、ReactコンポーネントのUI部分を記述する際に用いられる構文で、HTMLに似た書き方をしますが、実際にはJavaScriptの拡張です。

基本ルール

単一のルート要素
- JSXは単一のルート要素を返す必要があります。
- コンポーネントが複数の要素を返す場合、それらを一つの親要素でラップする必要があります。
- 通常、<div>タグがこの目的で使用されます。
```
return (
  <div>
    <h1>Title</h1>
    <p>Content</p>
  </div>
);
```
フラグメントの使用
- <div>を使いたくない場合は、Reactのフラグメント(<></>または<React.Fragment>)を使うことができます。
- これはブラウザのDOMツリーに何も追加せずに要素をグループ化します。
```
return (
  <>
    <h1>Title</h1>
    <p>Content</p>
  </>
);
```
タグの閉じ方
- JSXでは、全てのタグを閉じる必要があります。
- 自己閉じタグ（例：<img>、<input>など）にはスラッシュ/を付けます。
```
<img src="image.jpg" alt="Description" />
```
プロパティのキャメルケース
- JSXでは、属性はキャメルケースで記述されます（例：className, onClick）。
- ただし、aria-*やdata-*のような属性は、HTMLと同様にダッシュ付きで書かれます。

JavaScript式の埋め込み

波括弧{}を使用してJavaScriptの変数や式を埋め込むことができます。

これにより動的なコンテンツを簡単に埋め込むことが可能です。

const person = {
  name: "Name",
  theme: {
    backgroundColor: "blue",
    color: "white"
  }
};

return (
  <div style={person.theme}>
    <h1>{person.name}'s Todos</h1>
    ...
  </div>
);

実用例

export default function TodoList() {
  const person = {
    name: "Gregorio Y. Zara",
    theme: {
      backgroundColor: "black",
      color: "pink",
    },
  };

  return (
    <div style={person.theme}>
      <h1>{person.name}'s Todos</h1>
      <ul>
        <li>Improve the videophone</li>
        <li>Prepare aeronautics lectures</li>
        <li>Work on the alcohol-fuelled engine</li>
      </ul>
    </div>
  );
}

HTMLに慣れている場合

HTMLからJSX(TSX)に変換できるツールがあるので、そちらのツールなどを使用しても問題ありません。

https://transform.tools/html-to-jsx

ライブラリなど

使用したいものがあれば、好きなものを使用して構いません。（プライバシーポリシーのページであるPrivacy.tsxでは、material-uiのライブラリがサンプルで入れてあります。）

https://mui.com/

tmyuu/42tokyo_20240214