Изучите демо-версию современного приложения Quiz здесь

Привет, добро пожаловать в сериал «Мое имя, Радждип Сингх».

Серийно мы учимся реагировать, но создаем небольшой реактивный проект — приложение-викторина «Название проекта».

скачать код на GitHub: react-quiz-app

Демо здесь: нажмите здесь

Посмотрите демоверсию в песочнице кода и загрузите код

Давайте начнем:

Требование:

1. Базовый ответ
2. Редактор кода или IDE
3. Улыбающееся лицо

Что такое ReactJS?

Шаг:

1. Создать React-приложение
2. Узнать Папка ул.
3. Файл index.js
4. Демонстрационные данные
5. Компоненты

Сначала создайте новый проект React на своем ноутбуке, используя эту команду:

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

В папке Источник

Папка компонентов 3 файла компонентов И файл данных

Файл index.js

Основной файл Index.js в файле str. мы добавляем файл CSS и импортируем файл компонента на index.js

Мы импортируем компонент «Заголовок и викторина» в это место.

Самое главное — создать здесь метод рендеринга.

Стиль для викторины:

Все стили для тела, заголовка, MainDiv в виде карточки и кнопки. Создать в этом файле

Демонстрационные данные:

В файле data.js я создаю переменную Name Quizdata. Мы присваиваем данные из массива в переменной Quizdata.

Для каждого индекса мы создаем объект. в объект добавляем id, викторину, FindAnswer и правильные ответы

В FindAnswer добавляем массив с тремя значениями

Компоненты

Заголовок:

Компонент заголовка мы возвращаем простой тег h1 для заголовка приложения

Контрольный опрос:

Компоненты викторины работают с 5 шагами

1 шаг:

Создайте государство. В состоянии мы создаем объект. в этом объекте мы создаем переменную dataQuestion с массивом

2 шаг

Создаем функцию. имя функции setStateFunstion в этой функции используйте метод setState реакции и установите форму данных data.js

3 шаг

ComponentDidMount просто вызываем setStateFunstion

4 шаг

На этом этапе мы используем функцию map(). Функция Map() работает с массивом JavaScript. В этом массиве map() получает данные, а затем мы возвращаем h2 и компонент ответа.

Реквизиты справки для доступа к данным компонентов ответа, которые мы предоставляем здесь

Отвечать:

Два шага:

используйте двухэтапный подход, мы изучаем Answer.js

1 шаг:

Создайте состояние с тремя параметрами: первый ответ, второй кликПроверить и третий правильный ответ.

2 шаг

Мы используем тернарный оператор javascript, функцию сопоставления и функцию события, чтобы clickCheck true получить значение для возврата кнопки. В этой кнопке мы вызываем функцию Event.

Когда какой-то приятель нажимает на кнопку, функция этой кнопки вызывает метод setState, который устанавливает значение false на clickCheck.

Затем тернарный оператор запускает ложный код, чтобы получить данные ответа так просто.

Вывод

Надеюсь, вы читали мою статью Создайте собственное приложение для викторин

Любые предложения и вопросы. плз подскажите. Не стесняйтесь

Прочитайте больше

Что такое ReactJS? Как прочитать локальный файл JSON в реакции js?

Свяжитесь со мной:

• https://www.facebook.com/officialrajdeepsingh/
• https://www.officialrajdeepsingh.dev/
• https://www.facebook.com/groups/JavaScriptcode/
• https://www.facebook.com/groups/pythoncodejoin/
• официальный[email protected]