여기에서 최신 퀴즈 앱 데모 알아보기

안녕하세요, 반응 시리즈에 오신 것을 환영합니다. My Name, Rajdeep Singh.

시리즈에서는 reactjs를 배우지만 작은 반응 프로젝트인 프로젝트 이름 퀴즈 앱을 만듭니다.

GitHub에서 코드 다운로드: react-quiz-app

여기에서 데모: 여기를 클릭하십시오

코드 샌드박스 에 대한 데모 보기 및 코드 다운로드

시작하자:

요구 사항:

1. 기본 반응
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 기본 파일입니다. index.js에 CSS 파일을 추가하고 구성 요소 파일을 가져옵니다.

여기로 Header 및 Quiz 구성 요소를 가져옵니다.

가장 중요한 것은 여기에서 렌더 메소드를 생성하는 것입니다.

퀴즈 스타일:

본문, 헤더, MainDiv를 카드로, 버튼에 대한 모든 스타일. 이 파일에 생성

데모 데이터:

data.js 파일에 Name Quizdata라는 변수를 생성합니다. Quizdata 변수에 배열의 데이터를 할당합니다.

각 인덱스는 객체를 생성합니다. 개체에서 id, Quiz, FindAnswer 및 rightanswers를 추가합니다.

FindAnswer에서 3개의 값이 있는 배열을 추가합니다.

구성품

헤더:

앱 제목에 대한 간단한 h1 태그를 반환하는 헤더 구성 요소

퀴즈:

퀴즈 구성 요소는 5단계로 작동합니다.

1단계:

상태를 만듭니다. 상태에서 우리는 객체를 생성합니다. 이 객체에서 배열로 dataQuestion 변수를 생성합니다.

2단계

우리는 함수를 만듭니다. 이 함수의 함수 이름 setStateFunstion 은 반응 setState 메서드를 사용하고 data.js에서 데이터를 설정합니다.

3단계

ComponentDidMount는 setStateFunstion이라고 부르는 단순합니다.

4단계

이 단계에서는 map() 함수를 사용합니다. Map() 함수는 JavaScript 배열과 함께 작동합니다. 이 배열에서 map()은 데이터를 가져온 다음 h2 및 Answer 구성 요소를 반환합니다.

Answer 구성 요소는 여기에서 제공하는 데이터 도움말 소품에 액세스합니다.

답변:

두 걸음:

2단계를 사용하여 우리는 Answer.js를 배웁니다.

1단계:

첫 번째 Answer, 두 번째 clickCheck, 세 번째 rightAnswer 매개변수 3개로 상태를 만듭니다.

2단계

자바스크립트 삼항 연산자, 지도 함수, 이벤트 함수를 사용하여 clickCheck true를 사용하여 버튼을 반환하는 값을 가져옵니다. 이 버튼에서 Event 함수를 호출합니다.

일부 버디가 버튼을 클릭하면 이 버튼 기능이 호출됩니다. setState 메서드는 clickCheck에서 false로 설정됩니다.

그런 다음 삼항 연산자는 거짓 코드를 실행하여 매우 간단한 답변 데이터를 얻습니다.

결론

내 기사를 읽으셨기를 바랍니다. 나만의 퀴즈 앱 만들기

모든 제안 및 문제. 알려주세요. 부담없이

더 읽어보기

ReactJS 란 무엇입니까? 반응 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]