Aprenda uma demonstração moderna do aplicativo Quiz aqui

Ei, Bem-vindo a reagir a série My Name, Rajdeep Singh.

Em série, aprendemos a reactjs, mas criamos um pequeno projeto de reação — o aplicativo de questionário Project Name.

baixe o código no GitHub: react-quiz-app

Demonstração aqui: clique aqui

Assista a demonstração na caixa de areia de código e baixe o código

Vamos começar:

Requerimento:

1. Reação básica
2. Editor de código ou IDE
3. Rosto sorridente

O que é ReactJS?

Etapa:

1. Criar aplicativo React
2. Saiba Pasta Str.
3. Arquivo Index.js
4. Dados de demonstração
5. Componentes

Primeiro, crie um novo projeto React no seu laptop, use este comando:

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

Na pasta Src

Pasta de componentes 3 arquivos de componentes E um arquivo de dados

Arquivo Index.js

Arquivo principal Index.js no arquivo str. adicionamos o arquivo CSS e importamos o arquivo do componente no index.js

Importamos o componente Header e Quiz para este local.

O mais importante é criar um método de renderização aqui.

Estilo para teste:

Todos os estilos para o corpo, cabeçalho, MainDiv como cartão e um botão. Criar neste arquivo

Dados de demonstração:

No arquivo data.js, crio uma variável Name Quizdata. Atribuímos dados de um array na variável Quizdata.

A cada índice, criamos um objeto. no objeto, adicionamos um id, Quiz, FindAnswer e rightanswers

Em FindAnswer, adicionamos o array com três valores

Componentes

Cabeçalho:

Componente de cabeçalho, retornamos uma tag h1 simples para o título do aplicativo

Questionário:

Os componentes do questionário funcionam com 5 etapas

1 passo:

Crie o estado. No estado criamos um objeto. neste objeto, criamos uma variável dataQuestion com um array

2 passos

Criamos uma função. nome da função setStateFunstion nesta função use o método react setState E defina o formulário de dados data.js

3 passos

ComponentDidMount simples, chamamos setStateFunstion

4 passos

Nesta etapa, usamos uma função map(). A função Map() funciona com uma matriz JavaScript. Neste array map() pegamos os dados e então retornamos h2 e o componente Answer.

Adereços de ajuda de dados de acesso de componentes de resposta que fornecemos aqui

Responda:

Dois passos:

use duas etapas, aprendemos Answer.js

1 passo:

Crie um estado com 3 parâmetros primeiro Answer, segundo clickCheck e terceiro rightAnswer.

2 passos

Usamos o operador ternário javascript, a função map e a função de evento para clicar em true para obter o valor para retornar um botão. Neste botão, chamamos uma função Event.

Quando algum amigo clica no botão, essa função de botão chama o método setState definido como false no clickCheck.

Em seguida, o operador ternário executa um código falso para obter dados de resposta tão simples.

Conclusão

Espero que você leia meu artigo Construa seu próprio aplicativo de quiz

Quaisquer sugestões e problemas. por favor me diga. Fique à vontade

consulte Mais informação

O que é ReactJS? Como ler o arquivo JSON local em react js?

Contate-me:

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