TSLab【第1回 React定例会】React環境構築

React
  • URLをコピーしました!

こんにちは!RYOTAです!

ご覧いただきありがとうございます!

当記事はTSLab・React定例会のレポート記事になります!

目次

はじめに

私が運営しているTSLabでは、毎週定例でTypeScriptの勉強会を行なっているのですが、「React教えて!」とお声を頂いたのでReact定例会も実施することにしました。

今回は初回になるのでReact初心者さんに対象者を絞り、基礎の基礎の基礎を爆速で復習っていった回となります。

Reactの基礎を爆速で詰め込んでみたので、初めて触れる方は是非参考にしてみてください。

作業内容

流れとしてはプロジェクトを立ち上げて、適当なコンポーネントを作り、親子コンポーネント間でデータのやりとりをします。

手順は下記の通りです。

  1. Reactテンプレート作成
  2. 不要なファイルを削除して最小限化
  3. コンポーネントを作ってみる
  4. 親コンポーネントから子コンポーネントへデータを渡す

さっそく参りましょう!

Reactテンプレート作成

今回はお遊び用のプロジェクトを作成したいので、create-react-appでサクッと立ち上げて行きます。

Node.jsバージョン確認

まずはローカルにNode.jsが入っているか確認します。

$ node -v
# -> v16.13.2

バージョンが返ってくればOK。

reate-react-app

続いてReactプロジェクトを立ち上げます。

デフォルトはnpx create-react-appでいけますが、作業ディレクトリ直下に展開したいのでディレクトリ指定オプション(./)を追加します。

–template typescriptを追加することで初期状態からTSで構築できるのでほぼマスト。

$ npx create-react-app ./ --template typescript

Reactアプリ起動

インストールが完了したら起動確認します。

$ yarn start

はい、どん!

不要なファイルを削除して最小限化

初期のプロジェクトでは余計なCSSや画像ファイルが入ってゴチャゴチャしてるので、それらを削除して見やすくしていきます。(public、src 直下のみ)

残すファイルは下記の通り。

root/
  ├─ public
  │   └─ favicon.ico
  │   └─ index.html
  ├─ src
  │   └─ App.tsx
  │   └─ index.tsx
  │   └─ react-app-env.d.ts
  │   └─ reportWebVitals.ts

App.tsx修正

import React from "react";
import Layout from "./layout";

const App: React.FC = () => {
  return <>Test App</>;
};

export default App;

index.tsx修正

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

reportWebVitals();

この時点でエラーが出てなければひとまずOK!

コンポーネントを作ってみる

テスト用にコンポーネントを作成し、それをApp.tsxで呼び出して表示していきます。(※実際にはApp.tsxにはproviderなどを仕込むので、直接コンポーネントを呼び出しはしませんが、今回はテストの為あしからず。)

src直下にcomponentsディレクトリを作成し、その配下にコンポーネント名のディレクトリを作成します。

後の工程で親から子コンポーネントのデータ渡しをするので、Parent(親)という名前のコンポーネントを作成します。

├─ src
│   └─ components          // 追加
│        └─ parent      // 追加
│            └─ index.tsx  // 追加
│            └─ style.css  // 追加
│   └─ App.tsx
│   └─ index.tsx
│   └─ react-app-env.d.ts
│   └─ reportWebVitals.ts

Parentコンポーネント作成

ファイルが出来たらParentコンポーネントを実装します。と言ってもこれだけ。

import React from "react"; // Reactコンポーネントの場合はインポートがマスト
import "./style.css"; // CSSの適用

// 関数型コンポーネントを定義
const Parent = () => {
  return <div className="parent">Parent</div>; // return でレンダリングさせるDOM要素を記述
};

export default Parent; // 定義したコンポーネントを外部で呼び出すためにexport
.parent {
  /* 適当なCSS */
}

App.tsx修正

コンポーネントが出来たら、App.tsx内で呼び出して表示してあげます。

import React from "react";
import Parent from "./components/parent"; // 追加

const App: React.FC = () => {
  return (
    <>
      {/* コンポーネント呼び出し */}
      <Parent />
    </>
  );
};

export default App;

画面を確認してParentコンポーネント内で記述されてる文字列が表示されればOK。

親コンポーネントから子コンポーネントへデータを渡す

ここからが今日の本題です。

初学者さんがハマる第一ポイント、Propsの受け渡しをやっていきます。

データを受け取って表示するChild(子コンポーネント)を作成します。

├─ src
│   └─ components
│        └─ child       // 追加
│            └─ index.tsx  // 追加
│            └─ style.css  // 追加
│        └─ parent
│            └─ index.tsx
│            └─ style.css
│   └─ App.tsx
│   └─ index.tsx
│   └─ react-app-env.d.ts
│   └─ reportWebVitals.ts

Childコンポーネント作成

import React from "react";
import "./style.css";

type ChildProps = {
  hoge: string;
  fuga: number;
};

// React.FCにジェネリクスで型を付与することで、propsの型を縛ることができる
const Child: React.FC<ChildProps> = ({ hoge, fuga }) => {
  return (
    <div className="child">
      <div>{hoge}</div>
      <div>{fuga}</div>
    </div>
  );
};

export default Child;

Parentコンポーネント修正

import React from "react";
import "./style.css";
import Child from "../child"; // 追加

const Parent = () => {
  const testData = {
    hoge: "hoge",
    fuga: 1,
  };

  return (
    <div className="parent">
      {/* Childコンポーネントにpropsを渡す */}
      <Child hoge={testData.hoge} fuga={testData.fuga} />
    </div>
  );
};

export default Parent;

はい。これだけ。

画面を確認してtestDataで定義したデータが表示されていればOKです!

その他

ここまでの内容に加えて下記の内容も実施しましたが、記事として長くなるのでまたの機会にまとめようと思います。

その他の実施内容

  • 配列の要素だけ子コンポーネントを繰り返し表示
  • useStateを使った状態管理
  • 状態変更時のDOM要素と差分レンダリングについて
  • 親コンポーネントの状態を子コンポーネントから操作

さいごに

TSLabで初めてのReact勉強会を実施しましたが、短時間で相当ぶっ込んでしまった感があります。(笑)

ここまでの内容が理解できれば最小限の開発業務は出来るかなと思います。

2〜3時間で全て理解するのは難しいので、あとは自分の手で動かして復習していただければ良きですね!

今回は超基礎の基礎になるので、次回以降は「仮想DOM」や「状態管理ライブラリ」や「React hooks」について触れていこうと思います!

以上!最後までご覧くださりありがとうございました!

一緒にTypeScriptを学びたい方はぜひ下記のアカウントからご連絡ください!

React

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次