Modern bir Quiz uygulaması demosunu buradan öğrenin

Hey, Benim Adım Rajdeep Singh dizisine hoş geldiniz.

Seri olarak, tepki vermeyi öğreniyoruz, ancak küçük bir tepki projesi oluşturuyoruz: Proje Adı bilgi yarışması uygulaması.

GitHub'da kod indir: tepki-quiz-app

Demo Burada: buraya tıklayın

Code sandbox'ta Demoyu İzleyin ve Kodu İndirin

Hadi başlayalım:

Gereklilik:

1. Temel Tepki
2. Kod Düzenleyici veya IDE
3. Gülen yüz

ReactJS nedir?

Adım:

1. React Uygulaması Oluştur
2. Klasör Str öğrenin.
3. Index.js Dosyası
4. Demo Verileri
5. Bileşenler

İlk olarak, dizüstü bilgisayarınızda Yeni React Projesi Oluşturun Bu komutu kullanın:

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

Src klasöründe

Bileşenler klasörü 3 bileşen dosyası Ve bir Veri dosyası

Index.js Dosyası

str dosyasındaki Index.js ana dosyası. CSS dosyası ekliyoruz ve bileşen dosyasını index.js'ye aktarıyoruz

Header and Quiz bileşenini bu yere aktarıyoruz.

En Önemlisi burada bir render Yöntemi oluşturmaktır.

Sınav Stili:

Gövde, başlık, kart olarak MainDiv ve bir düğme için tüm Stiller. Bu dosyada oluştur

Demo Verileri:

data.js dosyasında bir Name Quizdata değişkeni oluşturuyorum. Quizdata değişkeninde diziden veri atarız.

Her indeks, bir nesne oluşturuyoruz. nesneye bir id, Quiz, FindAnswer ve doğru cevaplar ekliyoruz

FindAnswer'da diziyi üç değerle ekliyoruz

Bileşenler

Başlık:

Başlık bileşeni, uygulama başlığı için basit bir h1 etiketi döndürürüz

Test:

Sınav bileşenleri 5 adımda çalışır

1 adım:

Devleti oluşturun. In-State bir nesne oluşturuyoruz. bu nesnede bir dizi ile bir dataQuestion değişkeni oluşturuyoruz

2 adım

Bir fonksiyon oluşturuyoruz. işlev adı setStateFunstion bu işlevde tepki setState yöntemini kullanın ve veri formunu data.js olarak ayarlayın

3 adım

ComponentDidMount basit setStateFunstion diyoruz

4 adım

Bu adımda bir map() Fonksiyonu kullanıyoruz. Harita () işlevi bir JavaScript dizisiyle çalışır. Bu dizide map() veri alır ve sonra h2 ve Answer bileşenini döndürürüz.

Yanıt Bileşenleri, burada sağladığımız verilere erişim yardım malzemelerine erişir

Cevap:

İki adım:

answer.js öğrendiğimiz iki adımı kullanın

1 adım:

İlk Yanıt, ikinci tıklamaKontrol ve üçüncü sağAnaswer olmak üzere 3 parametreli bir durum oluşturun.

2 adım

Bir düğmeyi döndürmek için değer elde etmek için javascript üçlü operatörünü, harita işlevini ve olay işlevini tıklatarak Doğrula'yı kullanırız. Bu düğmede bir Olay işlevi çağırıyoruz.

Bazı arkadaşlar düğmeyi tıkladığında, bu düğme işlevi, clickCheck'te setState yöntemi false setini çağırır.

Ardından üçlü operatör, yanıt verilerini bu kadar basit almak için yanlış kod çalıştırır.

Çözüm

Umarım makalemi okursunuz Kendi sınav uygulamanızı oluşturun

Herhangi bir öneri ve sorun. lütfen bana söyle. özgür hisset

Daha fazla oku

ReactJS nedir? Tepki js'de yerel JSON dosyası nasıl okunur?

Bana ulaşın:

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