[LWID] Westagram with react

3週目に反応を学び、2週目にJavaScriptで作成したWestagramで反応再作成を行いました.
今回も2週目にWestagramを作成したときに書いたように反応器に変えたときに詰まっていた部分と、プロジェクトを通して反応がわかる部分を整理してみました.
2週目に使用したWestagram後期
https://velog.io/@devpark_0x1c/TID-westagram-%EA%B5%AC%ED%98%84

ログイン

setStateのプロパティによるエラー

handleInput = e => {
   this.setState({
     [e.target.name]: e.target.value,
   });
   this.validLoginButton();   
};

validLoginButton = () => {
    const { inputId, inputPassword } = this.state;
    inputId.includes('@') && inputPassword.length >= 5
      ? this.setState({ isDisabled: false })
      : this.setState({ isDisabled: true });
  };

ログインボタンを今回の必須課題の@が含まれ、パスワードが5文字以上の場合にのみアクティブにするために、上記の関数を作成して実行しました.これは6文字の場合に実行されます.だからコンソールを選びました私はlogでinputIdinputPasswordを調べて、私が入力したのは遅い配列です.
setStateの特性上,上記の現象が発生したため,以下の文章を作成しsetStateコールバックを用いて問題を解決した.
https://velog.io/@devpark_0x1c/TIL-setState%EC%97%90-%EB%8C%80%ED%95%9C-%EC%9D%98%EB%AC%B8

メイン

ComponentDidMountの利用

Lifecycleについて、開発中に文章を書くとき、どのようにプロジェクトに適用すればいいのでしょうか.考えたことがある.でもWestagramで『あ~これで使えばいいんだよ』という程度のことがわかりました
私はjavascriptからjsonファイルを抽出してすべてのデータを取得していますが、Element自体にデータを置くのではなく、reactionもそうすべきだと思いますので、javascriptと同様にfetchを採用してstateにデータを保存する方法で行います.
画面が最初に実行されると、data付きjsonファイルからデータが抽出され、stateの転送ストリームはcomponentDidMountで完了する大きなタスクです.

componentDidMount() {
    this.addData();
  }

addData = () => {
  fetch('http://localhost:3000/data/userData.json')
    .then(res => res.json())
    .then(data => {
    this.setState({ userData: data });
  });
};

上記のように、addDataという関数を作成してfetchを行い、componentDidMountは対応する操作を実行します.componentDidMountは、1つの構成部品を実行するときにのみ実行されるため、上記のようにデータをインポートするときに使用できます.

コンポーネントの使用

反応を習って、不思議な感じがしますよ?このような構成?これは構成部分だと思います.
HTMLテンプレートを作成したら、新しいコンセプトを再利用できます~
コードもきれいになり、私の構成によって異なる内部分割方式を設定できる点が大きな利点であり、初期設計だけを考慮すれば不要なHTML作成時間を減らすことができます.
今回westagramは3人のチームメンバーと一緒に行い、このページを一緒に作成するのではなく、共通のコンポーネントを作成し、共有してそれぞれ使用します.
Instagramの最上位にあるnavを共有し、チームメンバーの善珠を使用しました.
共同作業を行う際に耳にするアイデアは、共同作業の内容について、最初の構造、クラス名、css、チームメンバーの間でよく相談し、創造しなければならないということです.私のやさしいビーズの命名規則が違うので、elementクラス名をkebab-caseに変更しました.善珠はcamelcaseで書かれているので、後でプロジェクトをするときは、メンバーたちがしっかり決めなければならないことを学びました.

ポスト

既存のJavaScriptから作成されたWestagramからreactに移行するプロセスでは、機能は追加されず、reactに変換することで関数宣言、コンポーネント使用、ライフサイクルがわかります.他の不足点は最初のプロジェクトを行う必要があります.そうすれば、異なるシーンに触れることができ、今勉強しているclass componentに対する理解を深めることができます.