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

##Propsとは

• 親コンポーネントから子コンポーネントへ値を渡すための仕組み
• 子コンポーネントの引数にpropsを指定する

• コンポーネント
  ⇨　画面要素の１単位。大（１画面）からの小（１つのテキストボックまだ様々）
• Props
  ⇨　コンポーネントに渡される引数的なもの

##propsでデータを受け渡す

App.jsx

import Article from './components/Article';

function App() {
  return (
   <div>
    <Article 
      title={'React入門'}
      content={'propsについて'}
   </div>
 );
};
export default App;

conponents/Article.jsx

const Article = (props) => {
　return (
     <div>
      <h2>{props.title}</h2>
      <p>{props.content}</p>
     </div>
  );
};  
export default Article;

##propsで受け渡セルデータ

• propsのデータは{}に記述
• 文字列、数値、真偽値、配列、オブジェクト、日付などOK
• 変数を渡すことも可能
• 文字列は{}なしでもOK

##Hands on

App.js

import React from "react";

const App = () => {
  const onClickButton = () => alert();
  const contentStyle = {
    color: 'blue',
    fontSize: '18px'
  };
  const contentSecondStyle = {
    color: 'yellow',
    fontSize: '18px'
  };
  return (
    <>
      <h1 style={{ color:'red'}}>おはよう</h1>
      <p style={contentStyle}>お元気ですか？</p>
　　　 <p style={contentSecondStyle}>お元気です</p>
      <button onClick={onClickButton}ボタン</button>
    </>
  );
};
export default App;

##上記のコードをcomponentを使用して書き換える

App.js

import React from "react";
import Message from "./components/Message";

const App = () => {
  const onClickButton = () => alert();
  
  return (
    <>
      <h1 style={{ color:'red'}}>おはよう</h1>
      //Patern 1
      <Message clolor='blue' greeting='お元気ですか？'/>
　　　 <Message clolor='yellow' greeting='お元気です'/>

     //Patern 2
      <Message clolor='blue'>お元気ですか？</Message>
　　　 <Message clolor='yellow'>お元気です!</Message>

      <button onClick={onClickButton}ボタン</button>
    </>
  );
};
export default App;

Message.js

import React from "react";

const Message = (props) => {
//console でpropsの中身を確認する
　//console.log(props);

  const contentStyle = {
    color: props.color,
    fontSize: '18px'
  };

return
//Patern 1
<p style={contentStyle}>{props.message}</p>;
//Patern 2
<p style={contentStyle}>{props.children}</p>;
};
export default Message;

##参考サイト
[モダンJavaScriptの基礎から始める挫折しないためのReact入門]
(https://www.udemy.com/course/modern_javascipt_react_beginner/learn/lecture/21899530#overview)
[propsとstateのイメージをつかむ【はじめてのReact】]
(https://qiita.com/rio_threehouse/items/7632f5a593cf218b9504)
[#04 新・日本一わかりやすいReact入門【基礎編】コンポーネントとprops]
(https://www.youtube.com/watch?v=Q-df0QgZuhE&t=325s)