Project 84 of 100 - アコーディオン スタイルの FAQ ページ

おい!私は 100 個の React.js プロジェクトを作成することを使命としています.私の dev.to プロファイルまたは私の最新情報をフォローしてください.質問がある場合はお気軽にお問い合わせください.ご協力ありがとうございました!

今日デプロイされたアプリへのリンク: Link
リポジトリへのリンク: github

これは、John Smilga による React プロジェクトの構築に関するシリーズの 15 のパート 4 であり、YouTube でカバーされています.

今日は、John Smilga のコースから以前に学んだ知識の要約と見なすことができます.機能コンポーネント、props の受け渡し、state と useState フック、条件付きレンダリング、基本的な JSX に取り組みます.

100 日間のプロジェクトを通じて私のブログ投稿をフォローしている場合、または過去数回の投稿で John Smilga プロジェクトだけをフォローしている場合は、上記のすべてを知っているので、これらの FAQ の質問に対するアコーディオン効果の開閉.

まず、プロジェクトを設定するために、ローカルの data.js ファイルから JSON データを取得します.そのファイル内のオブジェクトは次のようになります.

  {
    id: 1,
    title: 'Do I have to allow the use of cookies?',
    info:
      'Unicorn vinyl poutine brooklyn, next level direct trade iceland. Shaman copper mug church-key coloring book, whatever poutine normcore fixie cred kickstarter post-ironic street art.',
  }

実際にそのデータを取り込むために、今回は useEffect を気にしません.データはローカルなので、デフォルトのエクスポートから直接取得し、次のように App.js の質問変数のデフォルト状態として保存できます.

import React, { useState } from 'react';
import data from './data';

function App() {
  const [questions,setQuestions] = useState(data)
  ...
}

App.js のリターンとして、超基本的なページをセットアップして、質問を反復処理し、data.js からの各質問に対して Question コンポーネントをレンダリングできるようにします.

補足: React 機能コンポーネントでの John Smilga の戻り値のすべてが括弧を使用しない方法が気に入っています.あなたがそれらを必要としないことはわかっていますが、何らかの理由でそれらがないと不安を感じます.私の意見では、それらを使用すると少しきれいに見えますが、おそらくこれはより簡潔です.また、コンポーネントを呼び出すときに、構造化されていないオブジェクトを小道具として中括弧で囲むだけで、オブジェクトのプロパティを小道具として定期的に分解する方法も気に入っています.

return <main>
    <div className='container'>
      <h3>questions and answers about login</h3>
      <section className='info'>
        {
          questions.map((question) => {
            return <SingleQuestion key={question.id} {...question} />
          })
        }
      </section>
    </div>
  </main>;

ここで、SingleQuestion コンポーネントで、data.js ファイルからわかっている props を分解し、データを表示するためにいくつかの JSX をセットアップします.

const Question = ({title,info}) => {

  return <article className='question'>
    <header>
      <h4>{title}</h4>
      <button className='btn'>
      </button>
    </header>
    <p>{info}</p>
  </article>;
};

コンポーネントが一覧表示され、データが表示されましたが、アコーディオン機能はなく、ボタンは何も表示しません.アコーディオン機能を実現するには、各質問のコンポーネントに、開いているか閉じているかを追跡するための状態が必要です.次に、状態変数が true または false の場合に、情報テキストを条件付きでレンダリングする必要があります.

const Question = ({title,info}) => {
  const [showInfo,setShowInfo] = useState(false)

  return <article className='question'>
    <header>
      <h4>{title}</h4>
      <button className='btn'>
      </button>
    </header>
    {showInfo && <p>{info}</p>}
  </article>;
};

最後に、条件付きレンダリングを追加して、showInfo 状態変数の値に基づいて (react-icons npm パッケージから) 別のアイコンをユーザーに表示します. onClick メソッドは、状態変数の真偽を切り替えます.

      <button className='btn' onClick={() => setShowInfo(!showInfo)}>
        {showInfo ? <AiOutlineMinus /> : <AiOutlinePlus />}
      </button>

これで終わりです.これは簡単なプロジェクトであり、完全にレビューされていますが、ポケット (およびポートフォリオ) にアコーディオン プロジェクトがあるのは素晴らしいことだと思います.フロントエンドに行く場合、ある時点でこれらのいずれかを構築する必要がある可能性があります.そうでない場合でも、最新の React の最も基本的な原則 (JSX、機能コンポーネント、反復、条件付きレンダリング、useState フック) のいくつかについての良いレビューです.

このようなプロジェクトが好きで、最新情報を知りたい場合は、私の Twitter をチェックしてください.明日は別のプロジェクトでお会いしましょう.