ashwinrames / project-builder-react-stage-1-quiz-ui

ProGrad PROJECT BUILDER | REACT - QUIZ STAGE I - UI

Learning Goals

In this exercise, the goal is to learn building a complete quiz app on a stage by stage basis:

• when and how to setup react in your application,
• how to create multiple compoents and design it.

Getting started

1. Fork this repo
2. Clone this repo

Whenever you create a first significant change, you should make your first commit.

3. Follow these guidelines to add, commit and push changes.

In the end of this document, you will find guidelines on how to submit the exercise.

Introduction

In this exercise, you will try to work with component and css.

create a new react app using the following command

npx create-react-app quiz
cd quiz

Now go to your app.js and remove the unnecessary code. Your app.js should be looking similar to the this.

import React from 'react';
import HigherOrderFunctions from './components/hof/HigherOrderFunctions';
import './App.css';

function App() {
  return (
    <div className="App">
 
    </div>
  );
}

export default App;

Your task is to create three components - HomeComponent - QuizComponent - ResultComponent

Note: use rcc to generate the code template. Please keep everything as a static output on the stage - 1. We will make it dynamic over the course.

So let's get started! Check below to see the overall output: You will be trying to replicate this

PROGRESSION 1 | HOMECOMPONENT

PROGRESSION 2 | QUIZCOMPONENT

PROGRESSION 3 | RESULTCOMPONENT

Submission

If you didn't add, commit and push the changes you made, this is the last call. 😄

please share your github links with your Mentors. Your Mentor's will check up your work and provide feedback.

Summary

If you managed to do it, good job! 🏆

We are proud of you!

Happy Coding ProGrad ❤️!