[初心者向け] これだけは覚えておこう！ReactのComponentとPropsについて徹底解説 #JavaScript

概要

フロントエンド開発でよく使用されるReactの概要と知っておくべき基本的な用語について解説していきたいと思います

Reactとは

Javascriptのライブラリの1つでUIを作成することに特化しています
Reactを使うことで効率よくUIを作成できます
Reactを理解するには後述する項目について知る必要があります

説明する項目一覧

Component
Props

Component

A component is a piece of the UI (user interface) that has its own logic and appearance. A component can be as small as a button, or as large as an entire page.

公式ドキュメントに記載の通りUIのひとまとまり(部品)です
componentの中にはボタンであったりページ全体として扱うものもあります
componentを使用することでよく使うUIを共通化して再利用しやすくしたり拡張しやすくなるなどメリットが大きいです

Componentの作成方法

一般的にcomponentはcomponentsフォルダ内に作成します
今回は例としてComponentItem.jsフォルダ内に作成します

tree
・
├── src
|   ├── components
|   |   └── ComponentItem.js
|   ├── App.js
|   ├── index.js
|   └── styles.css
└── package.json

一般的に作成する際はfunction Componentつまり関数として以下のように作成します
戻り値の中にJSXというHTML に似た構文を使用して、JavaScriptのコード内でUIを直感的かつ簡単に記述できる構文を使用します
別のファイルで使用する際は

export default component名

を記載します

src/components/ComponentItem.js

function ComponentPractice() {
  return <h2>This is a component</h2>;
}

export default ComponentPractice;

import　component名　from componentのパス

を記載するとcomponentを使用できます
また、CSSを適用させる際は適用させるタグ内に

<div className="App">

という風にclassNameを記載します
TailwindなどのCSSのライブラリを使う際も同様です

src/App.js

import "./styles.css";
import ComponentPractice from "./components/ComponentItem";

export default function App() {
  return (
    <div className="App">
      <h1>Hello World</h1>
      <ComponentPractice />
    </div>
  );
}

以下のように表示されたら成功です

Props

React components use props to communicate with each other. Every parent component can pass some information to its child components by giving them props. Props might remind you of HTML attributes, but you can pass any JavaScript value through them, including objects, arrays, and functions.

Reactでは親componentと子component間へ値を渡すなどの連携をする際にPropsを使用します
Propsとして渡すことができるものはオブジェクト、配列、関数含めて多岐に渡ります
いわゆる引数のようなものだと思えばイメージしやすいかと思います

Propsを使ったcomponentの作成方法

今回はInput.jsを作成してpropsを使ったcomponentを作成していきます

tree
・
├── src
|   ├── components
|   |   └── Input.js
|   ├── App.js
|   ├── index.js
|   └── styles.css
└── package.json

今回はfunction Componentを使うため、Propsを使うときは以下のように

function function_name(props) {

という風に引数にpropsと記載します
また、componentの使用先の引数をJSX内に指定することで
指定した引数を使って値を参照させることができます
今回は別のファイルでcomponentを使用した際の引数をlabelとして定義します

src/components/Input.js

function Input(props) {
  return (
    <div>
      <label>{props.label}</label>
      <input />
    </div>
  );
}

export default Input;

下記のようにInputのcomponent内に

label="社員番号"

という風に渡したいPropsの値を記載します

src/app.js

import "./styles.css";
import Input from "./components/Input";

export default function App() {
  return (
    <div className="App">
      <h1>ログイン画面</h1>
      <Input label="社員番号" />
      <Input label="パスワード" />
    </div>
  );
}