node v20.5.0を使用
(各種ライブラリのバージョンを見たい場合はpackage.json
を参照してください)
上記のnodeが入っている状態で
- npm install
- npm run dev
を行い、 http://localhost:5173/
をブラウザで表示する
(サーバーを閉じる際はCtrl + C
)
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のファイル
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と同様にダッシュ付きで書かれます。
- JSXでは、属性はキャメルケースで記述されます(例:
-
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からJSX(TSX)に変換できるツールがあるので、そちらのツールなどを使用しても問題ありません。
https://transform.tools/html-to-jsx
使用したいものがあれば、好きなものを使用して構いません。 (プライバシーポリシーのページであるPrivacy.tsxでは、material-uiのライブラリがサンプルで入れてあります。)