Project | Westargram

11664 ワード
React project WeCode テキストリンク
Wecodeは最初のプロジェクトWestartgramを完了しました.
クローンコードを行うためにINSTAGRAMも加わり、2週間でいろいろなことを学び、楽しい時間を過ごしました.

Reactの最初の項目

  • CRAを使用してチームメンバーとともに初期設定
    • を行います.
  • Git利用率

    • ログインページ



    実装機能

  • IDの"@"とパスワードが6文字を超えるログインボタン
    • を有効にする.
  • はAPI fetchにログインし、アクセストークンブラウザ
    • を格納する.

    ホームページ

  • 上栏,故事,种子,评论,侧面组合
  • mock dataを作成し、
    • を取得する
      <div className="feeds">
    {feed.map(feed => {
     return(
      	<Feed key={feed.id}
         user={feed.user}
         userImg={feed.userImg}
         feedImg={feed.feedImg}
         isLike={feed.isLike}
         like={feed.like}
         storyName={feed.storyName}
         story={feed.story}
         />   
        );
      })}
  </div>
    React Component,map()メソッドリアルコーディングキット

    ソース機能の購読


  • を押して画像をクリックまたはダブルクリックします.
  • 点賛数増減反映
    • キーフレーム
  • @を使用してハートアニメーション
    • を表示
    毎回反応が间违って血の海の画面が现れて、スパイダーマンの様子==私の様子
      handleLike = () => {
    this.setState({
      isLike: !this.state.isLike
    }, () => this.handleLikenumUp())
  }

  handleLikenumUp = () => {
    if(this.state.isLike){
        this.setState({
          like: this.state.like + 1
        })
    } else {
        this.setState({
          like: this.state.like - 1
        })   
    }
  }
     
 // JSX
 <div className="feedImage">
    <img alt="사진" src={feedImg} onDoubleClick={this.handleLike}/>
       { isLike && 
          <div className="heart">
            <i className="fas fa-heart"></i>
          </div>
       }
</div>

// SCSS
  .heart {
    position: absolute;
    top: 100px;
    left: 250px;
    color: white;
    font-size: 100px;
    animation: imageHeart 1s;
    animation-iteration-count: 1;
    opacity: 0;
  }
  @keyframes imageHeart {
    0%  { transform: scale(0); opacity: 1}
    50% { transform: scale(1); opacity: 1}
    100% { transform: scale(1)}
  }
}

    コメントの追加/好き/削除



    「パブリッシュ」ボタンがアクティブになるのは、
  • コメントInputウィンドウにコンテンツがある場合のみです.
    Spread演算子を使用して
  • コメントを追加し、コメントデータにオブジェクトとして追加します.
      handleInputChange = (e) => {
    this.setState({
        text: e.target.value,
    }, () => this.commentBtnOnOff()
  )}

  commentBtnOnOff = () => {
    if(this.state.text){
      this.setState({
        disabled: false
      })
    } else {
      this.setState({
        disabled: true
      })
    }
  }

  handleKeyPress = (e) => {
    if(e.key === 'Enter') {
        this.handleAddComment();
        this.setState({
          disabled: true
        })
    }
  }

  handleAddComment = () => {
    const { commentList , user, text } = this.state
    if(text){
      this.setState({
        commentList: [
          ...commentList,
          {
            id: commentList.length + 1,
            userName: user,
            content: text
          }
        ],
        text: ''
    });
    }
  }
  • filter,mapメソッドを用いたコメント賛/削除機能
    •   handleRemoveComment = (id) => {
    const nextCommnets = this.state.commentList.filter(
      (commnet) => {return commnet.id !== id})
      
      this.setState({
      commentList: nextCommnets
    })
  }

  handleLikeComment = (id) => {
    const nextLikedCommnets = this.state.commentList.map((comment) => {
      if( comment.id === id) {
        comment.isLiked = !comment.isLiked
      }
      return comment
    })
    this.setState({
      commentList: nextLikedCommnets
    })
  }

    アイデンティティー検索機能



    これはどのように実施するか悩んでいる機能です.
    いくつかの正規表現を使用することにします.
    Inputウィンドウテキストを検索して構成部品を再レンダリングする場合は、入力テキストを含むデータのみをフィルタします.
    text入力時にのみ結果値をレンダリングするために、条件レンダリングが適用されます.
      render() {
    const { feedList, text } = this.state
    const filterData = feedList.filter( user => {
      const regexp = new RegExp( text, 'ig')
      return user.userName.match( regexp )
    })
    
    ...
  
  <input onChange={this.handleInputChange} value={text} type="text" placeholder="검색"/>
   { text.length > 0 &&
      <ul className="searchList"> 
        {
          filterData.map(user => {
           return(
            <div className="filteredUser">
              <img alt="사진" src={user.img}/>
              <li>{user.userName}</li>
            </div>
           );
        })}  
      </ul>
   }

    インタラクティブWeb、ドロップダウンメニューの実装


  • メディアQueryによるレスポンスページ
    • の実装

    に感銘を与える


    2週間はSNS中毒のようにInstagramクローンに夢中
    HTML/CSS/JSをreactとして再作成した場合、最初にページをコンポーネント化したときは、画面が歪んだページのように、何かが出てきたと思ったら、reactはすぐに間違って対応してしまうので疲れます.

    しかし、一つ一つ実現していくにつれて達成感があり、とても面白かったです.
    同期たちと一緒にやった時、意志が傷つけられたようです.
    ずっとエラーが出て、反応しなかった・・・窒息寸前のコードを同期たちに見せると、一緒に悩んだり、心肺蘇生術を一緒にしたりした除細器のような同期たちに感謝します.
    間違いが300行でも同期達と一緒に壊れるなら…!

    レックとも親しくなったけど本当にいい奴だ
    今回は、結構構造と符号化が下手でしたが、次のプロジェクトでは、もっと深く考えて、より良いコードReactを使ってみます!
    Airflowを簡単にインストール
    goクロスコンパイル方法