コンポネートの表示の仕方「reactメモ」 #React

・コンポネートとは、reactの画面に表示される「部品」のことである。
・JSXのアタイの中でタグとして記述。
・<コンポネート名　/> の形。
⚠︎コンポネート名は大文字スタート

react_app

<body>
    <h1>React</h1>
    <div id="root">wait.......</div>

    <script type="text/babel">
    let dom = document.querySelector('#root');

    const msg = {
     fontSize: "20px",
     fontWeight:"bold",
     padding: "10px",
     color:"white",
     backgroundColor:"darkblue",
     };

    //  ここから関数コンポーネート
    function Welcome(props){
      return <p style={msg}>Hello React!!</p>;
        }

    // 表示するコンポーネート
      let el = (
      <div>
        <Welcome/>
        </div>  
      );

      ReactDOM.render(el, dom);



    </script>
  </body>

・計算するコンポネート

let dom = document.querySelector('#root');

    const msg = {
     fontSize: "20px",
     padding: "10px",
     border:"double 5px magenta"
     };

     const msg2 ={
       fontSize: "16px",
       fontWeight: "bold",
       padding: "10px",
       backgroundColor:"cyan"
     };

    //  ここから関数コンポーネート
    function Calc(props){
      let total = 0;
      for(let i =1;i <= props.number;i++){
        total += i;
      }


    return <p style={msg}>1から, {props.number}までの
      合計は、「{total}」です。</p>;
  };
    // 表示するコンポーネート
      let el = (
      <div>
        <Calc number="100" />
        <Calc number="200" />
        <Calc number="300" />

        </div>  
      );

      ReactDOM.render(el, dom);