Westagram - React

上のコードでは、1ヶ月の生活

コッドの生活に来てからもう一ヶ月になりました.この一ヶ月は本当にいろいろなことが起こりました.同期と初対面で気まずい思いをしたが、今は楽になった同期もいる.一ヶ月の生活の中で、同期の人からたくさんのことを学びました.知らなかったのはこうやってもやってみたし、そうやってもやってみたけど、成功しなかったし、挫折することが多いので、同級生たちに聞いてみたら、自分で探しても見て、反応を利用したWestagram wit reactプロジェクトが終わりました.ひとつひとつの瞬間を覚えているとは言えませんが、プロジェクトのひとつひとつの瞬間をじっくり振り返って、整理し直しましょう.

初期設定

チームメンバーと共同作業を想定し、プロジェクトを行った.もちろん、それぞれ登録やホームページを作成していますが、襟で作業内容を管理し、襟センターでそれぞれの進捗状況や実施内容をアップロードすることで、現在の業界の雰囲気を感じることができます.また、初期設定中に複数のプロトコルがない場合は、お互いのページに問題(特にCSS)が発生する可能性があり、後でプロジェクトを行う場合は、この部分で詳細な決定が必要になる可能性があります.

ログインページ

ログインページは本当に難しいです.もともとjavascriptで最初に実現したものを反応器に提出する過程で、それらの名前を再包装したのです.実際、Instagramの登録ページを1つずつ開くと、divのラベルが多すぎることに気づいたので、私は彼にそっくりにすると言ったが、散らかっていて認識しにくい.全く同じ真似は本当に私にコード能力を育成するのに役立ちますか?という考えもありました.だから渡す前に、それぞれの名前を整理してから持ってきて、しかも楽にしました.

ログインページの基本フレームワーク

return (
    <div className="loginContainer">
      <div className="loginForm">
        <h1 className="formTitle">Westagram</h1>

        <form className="loginIdPwBtn">
          <input
            id="inputId"
            type="text"
            placeholder="Phone number, username or email"
            onChange={handleIdInput}
            onKeyUp={isPassedLogin}
            onKeyPress={isLoginValid ? handleKeyPress : null}
          />

          <input
            id="inputPw"
            type="password"
            placeholder="Password"
            onChange={handlePwInput}
            onKeyUp={isPassedLogin}
            onKeyPress={isLoginValid ? handleKeyPress : null}
          />

          <button
            id={isLoginValid ? 'loginBtnActive' : 'loginBtnDisable'}
            onClick={onClick}
            disabled={!isLoginValid}
            type="button"
          >
            Log In
          </button>
        </form>

        <div className="formOr">
          <h4 className="orText">OR</h4>
        </div>

        <div className="formLinkBtn">
          <a href="https://google.com/">
            <i className="fab fa-facebook-square" />
          </a>
          <a className="linkBtn1" href="https://www.facebook.com/">
            Log in with Facebook
          </a>
        </div>

        <a className="formForgotPw" href="https://www.facebook.com/">
          Forgot password?
        </a>
      </div>
    </div>
  );

ログインページの機能を実現

1.余計な状態は極力避ける

const [isActive, setIsActive] = useState(false);

 const isPassedLogin = () => {
    return idInput.includes('@') && pwInput.length > 4
      ? setIsActive(true)
      : setIsActive(false);
  };

このコードは、無効化ボタンに関する宣言と関数です.ただしisActiveは単独で指定する必要はありません.

const isLoginValid = idInput.includes('@') && pwInput.length > 4;

const isPassedLogin = () => {
   return isLoginValid;
  };

上のコードが代わることができるからです.Activeがなくても、この条件で代用できるので、コードを減らすことができます.

2.hooks宣言子はコンポーネントの最上位レベルに集中してメンテナンスと可読性管理を行う

私のコードは宣言と関数をめちゃくちゃに混ぜた.宣言と関数を上から下へ管理し、宣言を見た後、すぐに関数を表示し、理解します.この感覚で行うと,コードが長くなり,複雑になるとメンテナンスが難しくなるので,最上位管理の習慣を身につけなければならない.

3.インポート中に複数行書き込みを必要としないscssファイルを避ける

import React, { useState } from 'react';

このように一列で処理できるのは一列でしょう.

import './reset.scss';
import './common.scss';

共通部分はIndexのみ導入して終了です.

4.機能実施

  const [idInput, setIdInput] = useState('');
  const [pwInput, setPwInput] = useState('');
  const isLoginValid = idInput.includes('@') && pwInput.length > 4;
  const navigate = useNavigate();

  const handleIdInput = event => {
    setIdInput(event.target.value);
  };

  const handlePwInput = event => {
    setPwInput(event.target.value);
  };

  const isPassedLogin = () => {
    return isLoginValid;
  };

  const handleKeyPress = e => {
    if (e.key === 'Enter') {
      goToMain();
    }
  };

  const goToMain = () => {
    navigate('/main-jihong');
  };

  const onClick = () => {
    goToMain();
  };

ユーザ状態によりIDとPWの入力値の変化を検出する

KeyUp、KeyPressイベントでEnterpriseキーを使用してページを切り替え

useNavigateによるページ間切替/SPAの特性

3つの演算子を使用してボタンを有効にする

5.機能の実装時にレンダリングされた画像

ホームページ

ホームページは本当に難しいです.コメントの削除や「いいね」ボタンのアクティブ化など簡単な操作がこんなに難しく、開発者たちは起きられないように見え、自分を責めている.

ホームページの基本フレームワーク

ホームページは部品を作る良い機会です.レイアウトを見るとNav/Mainに分かれていて、そのまますべてのものをホームページに入れています.しかし、素子の再使用を学習する際、MainはFeed/ASide部分に分けることができ、素子を使って作るとメンテナンスが容易になります.

ホームページの構成

<>
  <Nav />
  <div className="container">
    <main className="main">
      <div className="feedBox">
        {feedList.map((feed, idx) => {
          return (
            <Feed
              userName={feed.userName}
              userImg={feed.userImg}
              feedImg={feed.feedImg}
              key={idx}
              description={feed.description}
              userComments={feed.comments}
            />
          );
        })}
      </div>
      <Aside />
    </main>
  </div>
</>

ホームページの機能を実現

1.コメントおよびコメント機能の追加と削除

学習内容:map,filter
従来の作業では,ハードコーディングが行われているため,1つのシードしか生成されず,主コメントウィンドウの構造で直接実現できる.しかし,シードを素子に変える過程で,中間段階を解放する必要がある.そのため、ホームページから要約部分にpropsを渡し、要約部分からコメントウィンドウにpropsを渡し、この部分ではpropsに対して多くの混同と衝突がある.これまでは、完全理解というよりは、徐々に創造し、理解し続ける過程が必要だった.

1.1シード部分の論理

  const [comments, setComments] = useState(userComments);
  const [commentInput, setCommentInput] = useState('');
  const [isLiked, setIsLiked] = useState(false);

  const isLikeClick = () => {
    setIsLiked(!isLiked);
  };

  const onChange = event => setCommentInput(event.target.value);

  const onSubmit = event => {
    event.preventDefault();
    setComments([
      ...comments,
      {
        userName: 'guest',
        comment: commentInput,
        id: Math.ceil(Math.random() * 100),
      },
    ]);
    setCommentInput('');
  };

      <div className="userComment">
        <div className="comment">
          {comments?.map((comment, idx) => {
            return (
              <CommentItem
                userName={comment.userName}
                id={comment.id}
                key={idx}
                comment={comment}
                comments={comments}
                setComments={setComments}
              />
            );
          })}
        </div>
      </div>
      <form className="feedComment" onSubmit={onSubmit}>
        <div className="writeComment">
          <img className="profileImg2" src={userImg} alt="프로필" />
          <input
            className="inputComment"
            onChange={onChange}
            value={commentInput}
            type="text"
            placeholder="댓글 달기..."
          />
          <button className="inputBtn">게시</button>
        </div>
      </form>

1.2コメントウィンドウ一つのロジック

const CommentItem = ({
  comment,
  index,
  id,
  setComments,
  comments,
  userName,
}) => {
  const [isLiked, setIsLiked] = useState(comment.isLike);
  const isLikeClick = () => {
    setIsLiked(!isLiked);
  };

  const deleteComment = id => {
    setComments(comments.filter(user => user.id !== id));
  };

  return (
    <div>
      <li key={index}>
        <span>{userName}</span>
        {comment.comment}
        <button className="likeBtn" onClick={isLikeClick}>
          <i className={`${isLiked ? 'fas' : 'far'} fa-heart`} />
        </button>
        <button className="deleteBtn" onClick={() => deleteComment(id)}>
          X
        </button>
      </li>
    </div>
  );
};

2.ネックデータと定数データの利用

学習内容:useEffectとfetchデータの利用
現在の業界では、フロントエンドとバックエンドのコラボレーションにより、ページをユーザーと対話できます.しかし、作業速度に差がある場合、機能をテストするには何を使用しますか?ネックデータと定数データを利用します.ハードコーディングではなく、実現したい機能をデータに関連付けてテストすることを学びました.また、userEffectとは、リアクターのレンダリング中にインポートしなければならない情報は、レンダリングのたびにインポートされるのではなく、最初のレンダリング時にインポートされることを意味します.useEffectを使用しないと、情報が多ければ多いほどサーバの負荷が大きくなります.

  useEffect(() => {
    fetch('/data/feedJihongData.json', {
      method: 'GET',
    })
      .then(res => res.json())
      .then(data => {
        setFeedList(data);
      });
  }, []);

作成されたディレクトリデータ

ポスト

実施目標と実施概要

このようにプロジェクトを振り返ると、自分がもう一度どんなロジックを駆使して機能を実現しているのか、「この時にこれを使っていたのか」/「この時にこれを使っていたのか」、「ああ、この時は本当にダメだったのか、お疲れ様でした」など、何の見当もつかない瞬間を思い出して新鮮でした.しかし、プロジェクトが終わってから全体を振り返る習慣よりも、後で中間的に振り返る習慣を身につけて、もっと詳しく書きます.