[React #03] コンポーネントのネストとデータの流れ

function ParentComponent() {
  const message = "こんにちは、子コンポーネント！";
  return <ChildComponent greeting={message} />;
}

function ChildComponent(props) {
  return <p>{props.greeting}</p>;
}

function ParentComponent() {
  const [message, setMessage] = useState('親からのメッセージ');

  const handleChangeMessage = (newMessage) => {
    setMessage(newMessage);
  };

  return (
    <div>
      <p>{message}</p>
      <ChildComponent onMessageChange={handleChangeMessage} />
    </div>
  );
}

function ChildComponent(props) {
  return (
    <button onClick={() => props.onMessageChange("子からの新しいメッセージ")}>
      メッセージを変更
    </button>
  );
}

function ParentComponent() {
  const [counter, setCounter] = useState(0);

  return (
    <div>
      <p>カウンター: {counter}</p>
      <ChildComponent counter={counter} setCounter={setCounter} />
    </div>
  );
}

function ChildComponent({ counter, setCounter }) {
  return (
    <button onClick={() => setCounter(counter + 1)}>
      カウントアップ
    </button>
  );
}

const CounterContext = React.createContext();

function ParentComponent() {
  const [counter, setCounter] = useState(0);

  return (
    <CounterContext.Provider value={{ counter, setCounter }}>
      <ChildComponent />
    </CounterContext.Provider>
  );
}

function ChildComponent() {
  const { counter, setCounter } = useContext(CounterContext);

  return (
    <button onClick={() => setCounter(counter + 1)}>
      カウントアップ
    </button>
  );
}

// Action
const increment = () => ({ type: 'INCREMENT' });

// Reducer
function counterReducer(state = 0, action) {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    default:
      return state;
  }
}

// Store
const store = createStore(counterReducer);

// Component
function Counter() {
  const count = useSelector(state => state);
  const dispatch = useDispatch();
  return (
    <div>
      <p>カウント: {count}</p>
      <button onClick={() => dispatch(increment())}>カウントアップ</button>
    </div>
  );
}