反応しましょう.学ぶ30日間で反応.18日目

その後、私は反応して動きました.30日間で「流暢」に反応することにしました.私はレッツゴーから同じアプローチを使用しています.これは私の手汚い例を取得し、カバーからカバーをカバーし、受動的にビデオを見て読書の代わりに歩く.
これは18日後の私の進歩の一部です.

反応はUIライブラリです.それは、

の多くをしません

反応はあなたのUI

を更新するためにバックグラウンドで実行されていません

ビュー(HTMLファイル)やコード(JSファイル)

のようなものはありません

反応は、あなたのアプリケーションを小さな構成要素

に分けるのを奨励します
コンポーネントは、支柱と状態を使用します.インプットを入力値として、内部としての状態を考える.更新は、すべての時間の状態は変更されたUIを更新します

各コンポーネントは、単一のrenderメソッドを持っている必要があります.それは1つのJSX要素だけを返さなければなりません.Javascript

の中でHTMLテンプレートとしてJSXを考えてください

は、文字列と原始値だけでなく、コンポーネントに渡すことができます

はクラスベースのコンポーネント

の上の機能ベースのコンポーネントを好む

は、状態を変えるために機能部品の中で状態を変えるために、const [value, func] = React.useState(initialValue)を使います.A Simple Intro to React Hooks

単一の大きな状態オブジェクトを持つ代わりに、状態を複数の状態変数に分離します.彼らが一緒に変わるならば、彼らをグループ化してください.Should I use one or many state variables?

APIエンドポイントを呼び出すためにReact.UseEffect(func, [variables])を使用します.これは、最初のレンダリング後、すべての状態を変更後に実行されます.この効果を一度だけ呼び出す場合は、空の配列を渡します.参照:Fix useEffect re-running on every renderとFive common mistakes writing react components (with hooks) in 2020

こんにちは、世界！

import React from 'react';
import ReactDOM from 'react-dom';

const HelloWorld = () => (
  <h1>Hello, World</h1>
);

ReactDOM.render(<HelloWorld />, document.getElementById('root'));

コンポーネントからAPIを呼び出す方法

const CallAPI = () => {
  const [value, setValue] = React.useState(initialValue);

  const fetchData = () => {
    fetch(someApiUrl)
    .then(response => response.json())
    .then(data => {
      const mappedValue = mapToValue(data);
      setValue(mappedValue);
      onSuccess();
    })
    .catch(error => console.error(error));
  };

  React.UseEffect(() => {
    fetchData();
  }, []);

  return (
    <SomeChildComponent values={stateValue} />
  );
}

あなたは、私がLetsReactでこれまでに使用したビデオとチュートリアルを見つけることができます

キャント91 / レット反応

反応しましょう：30日で反応を学んでください

ハッピーコーディング!