DEV Community: Narasimma Radhakrishnan

How to Build a Multi-Page Quiz App in React Using Context API and React Router

Narasimma Radhakrishnan — Fri, 13 Nov 2026 06:34:56 +0000

Project Architecture

Our application consists of four main parts:

main.jsx: Wraps the app in BrowserRouter to enable URL routing.
App.jsx: Holds the global state (name and score) inside a Context Provider and defines the routes.
User.jsx: Captures the player's name and navigates to the quiz.
Quiz.jsx: Displays questions from a JSON file, tracks selected answers, and updates the score.
Result.jsx: Displays the player's final score and allows them to restart the game.

Building a quiz application is one of the best ways to practice core React concepts. When users enter their name on a welcome screen, answer questions on a second screen, and view their final score on a third screen, your app needs two essential features: client-side routing and global state management.
In this guide, we will walk through how to build a complete, three-page React quiz app using react-router-dom and React's built-in createContext hook—and cover common pitfalls to avoid along the way.

What is UseNavigate and Browser Router in react?

Narasimma Radhakrishnan — Thu, 05 Nov 2026 12:22:08 +0000

In React, BrowserRouter and useNavigate are used for navigation between pages without refreshing the entire website.

Let's understand with your Movie Explorer project.

What is BrowserRouter? BrowserRouter is used to enable routing in a React application.

It allows us to create multiple pages such as:

Home page
Cart page
Billing page

What is useNavigate? useNavigate is a React Router Hook used to navigate from one page to another programmatically.

For example, when the user clicks the View Cart button, we want to open the Cart page.

React Hooks :useContext;

Narasimma Radhakrishnan — Wed, 04 Nov 2026 05:31:02 +0000

Today I learned One of the important react hook called UseContext.
The main purpose is to store the data in the central repository like global repo. We can easily avoid the props drilling problems.

Here Is my New upcomming project Movie Explorer:

Narasimma Radhakrishnan — Mon, 02 Nov 2026 08:52:28 +0000

import { useState, useEffect } from "react";
import axios from "axios";
import "./Api_fetching.css";

function Api_fetching() {
// FIXED: Initialize with an empty array so .map() doesn't break or render an empty card on load
const [product, setProduct] = useState([]);

// Integrated useEffect to load data automatically when the component mounts
useEffect(() => {
axios.get("https://jsonfakery.com/movies/paginated")
.then((res) => {
// Safe access: uses optional chaining and fallback to prevent empty array crashes
setProduct(res.data?.data || []);
console.log(res);
})
.catch((err) => console.error("Error fetching movies:", err));
}, []); // Empty dependency array ensures this runs exactly once on page load

return (

Movie Explorer

  <div className="movie-container">
    {product.map((s) => (
      <div className="movie-card" key={s.id}>
        <img
          src={s.poster_path}
          alt={s.original_title}
          className="movie-image"
        />

        <div className="movie-details">
          <h2>{s.original_title}</h2>
          <p>
            <b>Overview:</b> {s.overview}
          </p>
          <p>
            <b>Release Date:</b> {s.release_date}
          </p>
          <p>
            <b>Rating:</b> {s.vote_average} ★
          </p>
        </div>
      </div>
    ))}
  </div>
</div>

);
}

export default Api_fetching;

JSX in React – What and Why?

Narasimma Radhakrishnan — Sat, 31 Oct 2026 05:14:21 +0000

JSX stands for JavaScript XML.

JSX is a syntax extension used in React that allows us to write HTML-like code inside JavaScript.

In simple words, JSX helps us write UI elements using HTML-like syntax inside JavaScript.

What is JSX? Without JSX, we create UI elements using JavaScript's React.createElement() method.

Without JSX:

import React from "react";

function App() {
  return React.createElement(
    "h1",
    null,
    "Hello World"
  );
}

export default App;

With JSX:

function App() {
  return <h1>Hello World</h1>;
}

export default App;

Both produce the same UI.

Easy to understand
JSX makes React code cleaner and easier to read.

Why do we use JSX? Imagine you are developing an e-commerce website.

You need:

Navigation bar
Product cards
Search bar
Add to cart button
Footer If you use only JavaScript methods like React.createElement(), creating complex UI structures becomes difficult to read.

JSX makes this easier.

Main advantages:

Easy to write HTML-like UI inside JavaScript.
Makes code readable and maintainable.
Supports JavaScript expressions.
Helps create reusable React components.
Makes dynamic UI development easier.

Movie Explorer using Axios fetching API:

Narasimma Radhakrishnan — Fri, 30 Oct 2026 05:46:55 +0000

import { useState } from "react";
import axios from "axios";
import "./Api_fetching.css";

function Api_fetching() {
const [product, setProduct] = useState([""]);
function fetchData(){
axios.get("https://jsonfakery.com/movies/paginated")
.then((res) => {
setProduct(res.data.data);
console.log(res);
});
}

return (

Movie Explorer

  <button onClick={fetchData}>Fetch Movies</button>

  <div className="movie-container">
    {product.map((s, index) => (
      <div className="movie-card" key={s.id || index}>
        <img
          src={s.poster_path}
          alt={s.original_title}
          className="movie-image"
        />

        <div className="movie-details">
          <h2>{s.original_title}</h2>

          <p>
            <b>Overview:</b> {s.overview}
          </p>

          <p>
            <b>Release Date:</b> {s.release_date}
          </p>

          <p>
            <b>Rating:</b> {s.vote_average}
          </p>
        </div>
      </div>
    ))}
  </div>
</div>

);
}

export default Api_fetching;

why python???

Narasimma Radhakrishnan — Sat, 24 Oct 2026 15:41:11 +0000

Python is the world's most popular programming language because it combines human-like readability with extreme versatility across modern tech industries. Originally created by Guido van Rossum in 1991, it was designed to strip away the complex syntax of older languages, allowing developers to write clean, logical code with fewer lines.

React Hooks Explained Simply

Narasimma Radhakrishnan — Fri, 23 Oct 2026 05:30:47 +0000

React Hooks are one of the most important concepts in React. They help us use features like state and lifecycle behavior inside functional components.

Let's understand React Hooks in simple terms! 🚀

🔹 What Are React Hooks?

React Hooks are special functions that allow functional components to use React features such as state, context, and effects.

Before Hooks were introduced in React 16.8, state and lifecycle methods were mainly associated with class components.

🔹 Common React Hooks

useState()

useState() is used to store and update data inside a component.

Example:

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={() => setCount(count + 1)}>
        Increase
      </button>
    </div>
  );
}

export default Counter;

Explanation:

count stores the current value.

setCount updates the value.

useState(0) sets the initial value to 0.

Whenever the button is clicked, the count increases by one!

The Ultimate Guide to HTML Meta Tags: Boost Your SEO and Social Presence

Narasimma Radhakrishnan — Thu, 22 Oct 2026 05:57:00 +0000

When building a website, it’s easy to focus entirely on what users see on the screen—the headings, images, and layout. But some of the most critical elements of your webpage are invisible to your users.
Welcome to the world of HTML meta tags. These hidden lines of code live in the background of every webpage, acting as a direct communication channel to search engines, browsers, and social media platforms.
If you want your website to rank higher on Google, look professional when shared on social media, and fit perfectly on mobile screens, mastering meta tags is non-negotiable. Let’s break down exactly what they are and how to use them.

Closure in JavaScript

Narasimma Radhakrishnan — Wed, 21 Oct 2026 05:19:16 +0000

closure is same as Encapsulation java.
Global variables can be made local (private) with closures.

 function bank(){
            let balance=500;

            const service={
                deposit : function(amt){
                    balance+=amt;
                    console.log(balance);
                },
                withdraw : function(amt){
                    balance-=amt;
                    console.log(balance);
                },
                viewbalance : function(){
                    console.log(balance);
                }
            }

            return service;
        }
        const person1= bank();
        person1.deposit(1000);
        const person2=bank();
        person2.withdraw(3000);
        const person3=bank();
        person3.viewbalance();

output:

1500
-2500
500

Async and await in JavaScript....?

Narasimma Radhakrishnan — Wed, 21 Oct 2026 04:13:37 +0000

Async and await are the JavaScript keywords used to create a asynchronous function or code. Its mainly for clean code, better readability and reusability.

1.Async keyword:
It is used to declare the await keyword used in the async function.
And the function will always return the Promise. if the function returns like string or value it converts or wraps into an resolved promise.

async function greet() {
return "Hello!";
}

2.Await keyword:
This keyword is only used inside async function.
it pauses the function execution until the promise settles(resolve, reject).

Event Listener in JavaScript?

Narasimma Radhakrishnan — Tue, 20 Oct 2026 13:06:20 +0000

An event listener in JavaScript is used to execute a function when an event happens, such as clicking a button, typing in an input, or moving the mouse.

Simple example click me

let button = document.getelementbyId("btn");
button.addEventListener("click", function(){
console.log("hello world");
});

Common event listeners
- Event When it happens
- click User clicks an element
- mouseover Mouse moves over an element
- mouseout Mouse leaves an element
- input Input value changes
- change A value is changed and committed
- keydown User presses a keyboard key
- submit A form is submitted