JavaScript:React

差分

このページの2つのバージョン間の差分を表示します。

この比較画面へのリンク

両方とも前のリビジョン 前のリビジョン
次のリビジョン		 前のリビジョン
JavaScript:React [2022/11/29 23:51] – 削除 - 外部編集 (Unknown date) 127.0.0.1JavaScript:React [2025/04/12 05:15] (現在) – 外部編集 127.0.0.1
行 1: 行 1:
 +# React
  
 +- [[.React:ReactにおけるCSS|ReactにおけるCSS]]
 +- [[.React:create-react-appの制約|create-react-appの制約]]
 +- [[.React:emotionにおける動的なCSS|emotionにおける動的なCSS]]
 +- [[.React:カスタムフック|カスタムフック]]
 +
 +### React Router
 +
 +参考サイト：[[https://qiita.com/jima-r20/items/c7d636262a9ebf0bedbd|React Routerでルーティングを実装しよう - Qiita]]
 +
 +##### 概要
 +「**React Router**」とは、Reactを用いて作成したSPA(※)に対して、UIとURLを対応付けるためのライブラリである。
 +
 +※SPA・・・Single Page Application
 +
 +##### ライブラリ
 +
 +^ ライブラリ名               ^ 説明                    ^ 
 +| react-router         | ナビゲーションするためのコアライブラリ   | 
 +| **react-router-dom**     | DOMベースアプリのナビゲーションを行う  | 
 +| react-router-native  | ネイティブアプリのナビゲーションを行う   | 
 +
 +「react-router-dom」は「react-router」の上位互換のようなものであるため、
 +
 +基本的には「react-router-dom」を使用すればよい。
 +
 +
 +##### Routerの種類
 +
 +^ 種類             ^ 説明                             ^ URL例 ^
 +| BrouwerRouter  | TLD(※)やportの後の部分をすべてパスとして使用する  | localhost:3000/foo |
 +| HashRouter     | #以降の全てをパスとして使用する               | localhost:3000/#/foo |
 +| MemoryRouter   | ナビゲートにURLを使用しない                | localhost:3000 |
 +
 +### 環境構築
 +
 +##### npm start のポート番号を変更
 +
 +２種類の方法で変更できる。
 +
 +---
 +
 +1.環境変数''PORT''を設定する
 +
 +たとえば、4000番を指定する場合は下記のように実行する。
 +
 +<code>
 +$ PORT=4000 npm start
 +</code>
 +
 +---
 +
 +2.プロジェクトルートに''.env''ファイルを作って''PORT''を設定する
 +
 +.envファイルに以下のように記載して、''npm start''を実行する
 +
 +<code conf>
 +PORT=4000
 +</code>
 +---
 +参考サイト：[[https://qiita.com/urouro_net/items/dd7166f9728d08bc933b|create-react-app の npm start のポート番号を変える - Qiita]]
 +
 +
 +### react プロジェクト作成
 +
 +下記のコマンドを実行する。
 +
 +```
 +$ npx create-react-app <project name> --template=typescript
 +```
 +
 +バージョンを指定することも可能である。
 +
 +```
 +$ npx create-react-app@<version> <project name> --template=typescript
 +```
 +
 +指定できるバージョンは下記コマンドを実行。
 +
 +```
 +$ npm info create-react-app versions
 +```
 +
 +参考：https://qiita.com/hayato94087/items/5c586e80bfa18b1c537a
 +
 +### 関数コンポーネントの型定義
 +
 +引数(props)を受け取る場合の型定義は下記の２種類がある。
 +
 +- 引数に直接型注釈を指定するパターン
 +- ジェネリック型
 +
 +```
 +// props に直接型注釈を指定するパターン
 +const SampleComponent3 = (props: Foge) => {
 +  return <div>Hello {props.text}!</div>;
 +};
 +
 +// React.FC<P>のジェネリック型<P>として型を指定するパターン
 +const SampleComponent4: FC<Foge> = (props) => {
 +  return <div>Hello {props.text}!</div>;
 +};
 +
 +
 +const Parent: FC = () => {
 +  return (
 +    <>
 +      <SampleComponent3 text="TypeScript" />
 +      <SampleComponent4 text="TypeScript" />
 +    </>
 +  );
 +};
 +```
 +
 +
 +参考：[[https://zenn.dev/ogakuzuko/articles/react-typescript-for-beginner#2.-%E9%96%A2%E6%95%B0%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%81%AE%E5%9E%8B%E5%AE%9A%E7%BE%A9|【初心者】React × TypeScript 基本の型定義]]