ここで最新のクイズアプリのデモを学ぶ

ねえ、反応シリーズ私の名前、RajdeepSinghへようこそ。

シリーズでは、reactjsについて学びますが、小さな反応プロジェクトであるプロジェクト名クイズアプリを作成します。

GitHubでコードをダウンロード：react-quiz-app

デモはこちら：ここをクリック

コードサンドボックスでデモを視聴し、コードをダウンロードする

はじめましょう：

要件：

1. 基本的なReact
2. コードエディタまたはIDE
3. 笑顔

ReactJSとは何ですか？

ステップ：

1. Reactアプリを作成する
2. フォルダーStrを学ぶ。
3. Index.jsファイル
4. デモデータ
5. コンポーネント

まず、ラップトップで新しいReactプロジェクトを作成します。次のコマンドを使用します。

npx create-react-app quiz-app 
cd quiz-app
npm start

Srcフォルダ内

コンポーネントフォルダ3コンポーネントファイルとデータファイル

Index.jsファイル

ファイルstr内のIndex.jsメインファイル。CSSファイルを追加し、index.jsにコンポーネントファイルをインポートします

ヘッダーとクイズのコンポーネントをこの場所にインポートします。

最も重要なのは、ここでレンダリングメソッドを作成することです。

クイズのスタイル：

本体、ヘッダー、カードとしてのMainDiv、およびボタンのすべてのスタイル。このファイルで作成

デモデータ：

data.jsファイルで、変数NameQuizdataを作成します。Quizdata変数の配列からデータを割り当てます。

インデックスごとに、オブジェクトを作成します。オブジェクトに、ID、クイズ、FindAnswer、およびrightanswersを追加します

FindAnswerで3つの値を持つ配列を追加します

コンポーネント

ヘッダ：

アプリタイトルの単純なh1タグを返すヘッダーコンポーネント

クイズ：

クイズコンポーネントは5ステップで動作します

1ステップ：

状態を作成します。状態では、オブジェクトを作成します。このオブジェクトでは、配列を使用してdataQuestion変数を作成します

2ステップ

関数を作成します。この関数の関数名setStateFunstionはreactsetStateメソッドを使用し、data.jsからデータを設定します

3ステップ

ComponentDidMountは、setStateFunstionと呼ばれる単純なものです。

4ステップ

このステップでは、map（）関数を使用します。Map（）関数はJavaScript配列で機能します。この配列でmap（）はデータを取得し、h2とAnswerコンポーネントを返します。

Answerコンポーネントは、ここで提供するデータヘルプ小道具にアクセスします

答え：

二段階：

Answer.jsを学ぶ2つのステップを使用してください

1ステップ：

最初のAnswer、2番目のclickCheck、3番目のrightAnaswerの3つのパラメーターで状態を作成します。

2ステップ

javascriptの三項演算子、マップ関数、およびイベント関数を使用して、ボタンを返す値を取得するためにクリックチェックtrueを実行します。このボタンでは、イベント関数を呼び出します。

一部のバディがボタンをクリックすると、このボタン関数はclickCheckでsetStateメソッドをfalseに設定します。

次に、三項演算子は偽のコードを実行して、回答データを非常に簡単に取得します。

結論

私の記事を読んでいただければ幸いです。独自のクイズアプリを作成してください

提案や問題。plzは私に言う。お気軽に

続きを読む

ReactJSとは何ですか？ react jsでローカルJSONファイルを読み取る方法は？

私に連絡して：

• https://www.facebook.com/officialrajdeepsingh/
• https://www.officialrajdeepsingh.dev/
• https://www.facebook.com/groups/JavaScriptcode/
• https://www.facebook.com/groups/pythoncodejoin/
• [email protected]