毎日投稿（React）

本日はReactの学習しました。

はじめて触れる言語のため、ワクワクでした！
とりあえず、コードを打ちまくりでした。

U-demyの動画を参考に学習しました！

モダンJavaSciptの基礎から始める挫折しないためのReact入門
https://www.udemy.com/course/modern_javascipt_react_beginner/

JavaScriptの基本的な部分を抑えつつ、
Reactを始めていったので、確かにJavaScriptは大事な存在だとこのコースを受けて思いました。
（まだReactでTODOアプリを作っていないのですが。笑）※明日やります。

今回は関数コンポーネントを使って”お元気ですか?”を呼び出し、またstyleもかけています。
以下、例です。

index.js

import React, { useEffect, useState } from "react";
import { ColorfulMessage } from "./Componets/ColorfulMessage";

export const App = () => {

 return (
    <>
      <h1 style={{ color: "red" }}>kodamaだよ。</h1>
      <ColorfulMessage color="blue">お元気ですか?</ColorfulMessage>
    </>

};

propsには格納しているのが以下の
{color: "blue", children: "お元気ですか?"}⬇️

ColorfulMessage.jsx

import React from "react";

export const ColorfulMessage = (props) => {
  const { color, children } = props;　//ここで分割代入か〜
  const styleContent = {
    color,
    fontSize: "20px"
  };
  return <p style={styleContent}>{children}</p>;
};

useEffect

自分的にはここがちょっとわからなかったポイントです。
useEffect....
動画を何度も見返したのですが、勘の鈍い私にはわからなかったので、公式のドキュメントを読んだりしたのですが、ちょっと理解できるものではなかったです。

今の認識であっているかわからないですが、
useEffectととして機能を使うならば、第二引数に変化したい変数を配列に格納する！
今回はnumが変化していくので入れています。

useEffect(() => {
    if (num > 0) {
      if (num % 3 === 0) {
        Faceflag || setFaceflag(true);
      } else {
        Faceflag && setFaceflag(false);
      }
    }
  }, [num]);

まだまだレンダリングがどこで起きるかわからないところが多いので、
console.logを使いながら、やっていきたいと思います。