Reactを基本からまとめてみた【5】【Props（プロップス）①】

Propsとは

親コンポーネントから子コンポーネントへ値を渡す為の仕組み。
『親』⇨『子』の１方向のみ。子コンポーネントでデータの書き換えは不可。

Propsのメリット

• コードの記述量が減る
• 効率よくフロントエンド開発が行える
• 『Component』+『Props』はUI開発において定番

Button.jsの修正

Button.js

import React from "react";

const Button = (props) => {
  return (
    <button className="ui basic button">
      <i className="icon user" />
      {props.title}
    </button>
  );
};
export default Button;

App.js

import React from "react";
import Button from "./Button";

const App = () => {
  return (
    <div>
      <div>App</div>
      <Button title="post" />
      <Button title="edit" />
      <Button title="delete" />
      <Button title="submit" />
    </div>
  );
};
export default App;

参考サイト

【React入門】#5 Props（プロップス）の理解