Build real-world React projects, from a to-do list and quiz app to weather dashboards and portfolios, while mastering components, state, props, API integration, and assessments at every level.

Become a React Developer

This module takes a project-oriented approach. We'll start by building a “My To-do List” application, using localStorage, useEffect, and useState hooks, as well as setTimeout and nanoid. Then, we will build a “Quiz” application while learning to use the confetti package and ternary operator. Next, we’ll cover the fetch API and build the “Pretty Sunny” project. Next, we’ll create the “Asia Explorer” memory game, creating catchy effects by dynamically adding class names. Then, we will implement a “Personal Portfolio” application. Finally, we will create a “GitHub Readme” profile to help us showcase our projects on GitHub.

Building Real-World Projects with React

## Create the folder structure

Our entire JavaScript Quiz app will be divided into various folders, as shown in the following snippet. 


import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import './index.css'

ReactDOM.render((<App />), document.getElementById('root'))




import React from "react"
import Confetti from "react-confetti";


const App = () => {
    return (
        <React.Fragment>
            <Confetti/>
            <h1>Hello I am App</h1>
        </React.Fragment>
    )
}

export default App

:root {
  --brand-color: #0ea5e9;
  --dark-color: #0f172a;
  --mid-color: #cbd5e1;
  --light-color: #ffffff;
  --cta-color: yellow;
}

* {
  margin: 0;
  box-sizing: border-box;
  padding: 0;
}

body {
  background-color: var(--brand-color);
  font-family: "Verdana", cursive, sans-serif;
  color: var(--light-color);
}

/*  Header */
.header {
  background-color: var(--dark-color);
  color: var(--mid-color);
  padding: 1.5rem;
  text-align: center;
  margin-bottom: 1.5rem;
}

/*  Question + Answer div */
.app {
  background-color: var(--dark-color);
  color: var(--light-color);
  box-shadow: 10px 10px 42px 0px rgba(0, 0, 0, 0.75);
  text-align: center;
  width: 60%;
  max-width: 500px;
  border-radius: 15px;
  margin: 0 auto;
  padding: 2rem;
}

/*  Questions */
.question {
  color: var(--light-color);
  padding: 1rem;
}

.question-number span {
  font-size: 28px;
}

.question-number {
  color: aqua;
  font-weight: bolder;
}

.question-text {
  color: var(--light-color);
  padding: 1rem;
  font-size: 1.5rem;
}

/*  Answers */
.answer {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Option button */

.options {
  background-color: var(--brand-color);
  color: var(--light-color);
  font-size: 1.3rem;
  margin: 0.5rem;
  border-radius: 10px;
  padding: 0.5rem;
  border: none;
}

.options:hover {
  background-color: #2e3851;
  cursor: pointer;
  color: white;
  font-weight: bolder;
}

/* Final Score */
.finalScore {
  font-size: 2rem;
  color: yellow;
}

/*  Restart button */
.restart {
  background-color: var(--cta-color);
  color: var(--dark-color);
  font-size: 1.3rem;
  margin: 1.3rem;
  font-weight: bolder;
  border-radius: 10px;
  padding: 0.5rem;
  border: none;
  cursor: pointer;
}
.restart:hover {

  background-color: white;
}


import React from 'react';
import { shallow, configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

import HelloWorld from './app';

var TestResult = function() {
    this.succeeded = false;
    this.reason = "";
    this.input = "";
    this.expected_output = "";
    this.actual_output = "";
}

export const executeTests = function() {

  var results = [];

  result = new TestResult();
  result.input = 'HelloWorld Component';
  result.expected_output = "span containing text 'Hello World'"

  let wrapper = shallow(<HelloWorld />);

  // Call your Challenge function here.

  let type = wrapper.type();
  let testSuccessful = true;
  let failureReason;

  if (type !== 'span') {
    testSuccessful = false;
    failureReason = "You need to render exactly one span HTML element";
  } else if (wrapper.props().children != "Hello World") {
     testSuccessful = false;
     failureReason = "You have rendered wrong message in your span element";
  }

  result.actual_output = wrapper.html();

  if (testSuccessful) {
    result.succeeded = true;
    result.reason = "Succeeded"
  } else {
    result.succeeded = false;
    result.reason = failureReason;
  }

  results.push(result);

  return results;
}


React

Dart

GoJS React

Typescript React

Vue.js

Let’s explain these folders, briefly:
1. The `Header` component contains the name of our app, JavaScript Quiz.
2. The `QuestionData.js` file provides the layout for the questions and options passed into this component’s `QuestionCard` file.
3. The `Result` folder provides the user’s final result and a button to restart the quiz.
4. The `Data` folder serves as a local API that provides us with quiz questions and answers.
5. The `App.js` file is where all the app’s components, such as the Header, `QuestionCard`, and `Result` will be imported.
6. This time, instead of using many files to style our components, we’ll use just one `index.css` file containing all the styles.

> **Note**: To view how the confetti will look in the end, run the widget given above.



# Create the folder structure

Our entire JavaScript Quiz app will be divided into various folders, as shown in the following snippet. 


Let's see the file structure for the proposed components in our application.

Overview

Project—My ToDo List

React Fundamental Assessment

Project—JavaScript Quiz

React Beginner Assessment

Project—Pretty Sunny

React Intermediate Assessment

Project—Asia Explorer

Advance Level React Assessment

Project—Personal Portfolio

React Final Assessment

GitHub Readme Profile

Conclusion

Folder Structure

Create the folder structure