DEV Community: Takamichi Oki

How the Web Works #1: What Is a URL?

Takamichi Oki — Thu, 25 Jun 2026 17:37:49 +0000

A URL stands for Uniform Resource Locator.

It is an identifier used to locate resources on the Internet, such as
web pages, images, videos, and APIs.

A URL is often compared to an address on the Internet.

Breaking Down a URL

Let's take a look at the following URL:

https://www.example.com:8080/search/articles?id=123&lang=en#summary

Element	Value	Description
scheme	`https`	The protocol used for communication
host	`www.example.com`	The destination host
port	`8080`	The port number used for communication (optional)
path	`/search/articles`	The location of a resource on the server
query	`id=123&lang=en`	Additional parameters sent to the server
fragment	`summary`	A specific location within the page

What Is a Scheme (HTTP / HTTPS)?

A scheme specifies how a resource should be accessed.

Most URLs begin with either http or https.

What Is HTTP?

HTTP (Hypertext Transfer Protocol) is a protocol used for exchanging
information between web browsers and web servers.

For example, when a browser sends an HTTP request asking to view a page,
the server returns appropriate data such as HTML, images, or JSON.

HTTP is also widely used for communication between applications and
services, especially in REST APIs.

What Is HTTPS?

HTTPS (Hypertext Transfer Protocol Secure) works similarly to HTTP,
but the communication is encrypted using a technology called TLS.

By encrypting transmitted data, HTTPS helps prevent eavesdropping and
tampering by third parties.

Today, HTTPS has become the standard for websites, and HTTP is generally
discouraged for public websites.

What Is a Host?

A host is a name (or IP address) that identifies a computer or service
on a network.

Strictly speaking, www. is often referred to as the hostname, while
example.com is the domain name.

Historically, prefixes such as www. and mail. were used to
distinguish different services within the same organization.

Nowadays, many websites omit www. entirely.

What Is a Path?

A path is the part of a URL that comes after the host name.

It is used to identify resources on a web server.

Traditionally, paths represented directories and files, but modern web
applications often use them to represent features, pages, or data.

What Are Query Parameters?

Query parameters are strings appended to the end of a URL to send
additional information to a server.

They are commonly used for things like search keywords and page numbers.

Examples include:

?q=cat
?page=2

What Is a Fragment?

A fragment identifies a specific section within a web page.

It allows a browser to automatically scroll to a particular location.

For example, fragments are often used in tables of contents to jump to a
specific section.

Is localhost a URL?

localhost is a special hostname that refers to the current machine
itself.

It is usually resolved to the IP address 127.0.0.1.

Unlike normal website URLs such as https://google.com, localhost
represents your own computer.

For example:

http://localhost:3000/

This URL points to a service running on your local machine.

What I Learned Today

A URL is like an address on the Internet.
HTTP is commonly used not only for websites but also for REST APIs.
HTTPS encrypts communication and improves security.
localhost is a special hostname that refers to the current machine.

React useContext for Beginners: Passing Data Without Props

Takamichi Oki — Wed, 17 Dec 2025 19:26:36 +0000

Introduction

props are the basic way to pass values from a parent component to a child component. But as your component tree gets deeper, useContext becomes a better option.

In this article, I’ll walk through how to use useContext and explain the difference between using props and using context.

What is `useContext`?

useContext is a React Hook that lets you share values between components without passing props through every level of the component tree.

In other words, you can use context to pass data down the tree instead of prop drilling.

Props: the Problem

Before diving into useContext, let’s look at the problems you can run into when you rely on props, especially as your component tree grows.

Here’s an example app that uses props:

On this screen, you can choose your preferred language.

Here’s the source code for the app:

`App.jsx`

import { useState } from 'react'
import LangHeader from './components/LangHeader';

function App() {
  const [lang, setLang] = useState('English');

  const toggleLang = (e) => {
    const newLang = e.target.value;
    setLang(newLang);
  }

  return (
    <LangHeader lang={lang} toggleLang={toggleLang} />
  )
}

export default App

`LangHeader.jsx`

import React from 'react'
import LangContent from './LangContent'

export default function LangHeader({ lang, toggleLang }) {
  return (
    <>
      <div>LangHeader</div>
      <LangContent lang={lang} toggleLang={toggleLang} />
    </>
  )
}

`LangContent.jsx`

import React from 'react'

export default function LangContent({ lang, toggleLang }) {
  const LANGUAGES = ['English', 'German', 'Japanese'];

  return (
    <>
    <div>LangContent</div>
    <p>current setting is: {lang}</p>
    {LANGUAGES.map(l => {
      return (
        <React.Fragment key={l}>
          <label htmlFor={l}>{l}</label>
          <input id={l}
          name='lang'
          type='radio'
          value={l}
          onChange={toggleLang}
          checked={lang === l}
            ></input>
        </React.Fragment>
      );
    })}
    </>
  )
}

App is the top-level component. It keeps the selected language in state and defines the handler to switch languages.
LangHeader receives lang and toggleLang as props from App, then passes them down to its child component.
LangContent renders the UI: it shows the current setting and the radio buttons, using the props it receives.

As you can see in the source code, LangHeader receives props only to pass them down to its child. When a deeply nested component needs those props, every component in between has to forward them, even if they don’t use them themselves.

This is often called prop drilling. It’s basically like a bucket brigade.

In this example the component tree is shallow, so it’s not a big deal. But as the tree grows, prop drilling becomes harder to maintain and easier to break.

The Basics of `useContext`

useContext can solve this problem. With context, you can share values without passing props through every intermediate component, almost like the values “skip” levels in the component tree.

The flow is simple:

Create a context
Provide a context value
Consume the context in a component (useContext)

Let’s go through each step one by one.

Create a Context

First, you need to create a context object using createContext.

The key points are:

Call createContext() outside of any component (so it’s created once, not on every render).
Pass a default value as the argument. This value is used when there is no matching Provider above in the tree.

import { createContext } from "react";

export const AppContext = createContext(null);

If you plan to share multiple values (e.g., both the current language and a setter/handler), it’s common to use an object as the default value:

import { createContext } from "react";

export const AppContext = createContext({
  value: null,
  setValue: () => {},
});

Provide a Context Value

A Provider is how you supply a context value to components below it.

To use it, wrap the part of your component tree that should have access to the value with <YourContext.Provider>, then pass the value via the value prop.

import { useState } from "react";
import { AppContext } from "./AppContext";

function App() {
  const [value, setValue] = useState("A");

  const handleChange = (e) => setValue(e.target.value);

  return (
    <AppContext.Provider value={{ value, handleChange }}>
      <Child />
    </AppContext.Provider>
  );
}

Notes:

The value you pass can be a single value (e.g. value={value}) or an object (e.g. value={{ value, handleChange }}), depending on what you want to share.

Consume the Context in a Component

To read a context value inside a component, use the useContext Hook.

Pass the context object (the one created by createContext) as the argument.
useContext returns whatever you provided via the nearest <Provider value={...}> above in the tree.

import { useContext } from "react";
import { AppContext } from "./AppContext";

function Child() {
  const { value, handleChange } = useContext(AppContext);

  return (
    <>
      <p>Current value: {value}</p>

      <label>
        <input type="radio" name="demo" value="A" onChange={handleChange} checked={value === "A"} />
        A
      </label>

      <label>
        <input type="radio" name="demo" value="B" onChange={handleChange} checked={value === "B"} />
        B
      </label>
    </>
  );
}

Refactoring the App to use Context

Now, let’s refactor the example app to use context.

`generateContext.js`

import { createContext } from "react";

export const LangContext = createContext('English');

First, create a context and export it so you can import it later when you provide the value with a Provider.

`App.jsx`

import { useState } from 'react'
import LangHeader from './components/LangHeader';
import { LangContext } from './generateContext';

function App() {
  const [lang, setLang] = useState('English');

  const toggleLang = (e) => {
    const newLang = e.target.value;
    setLang(newLang);
  }

  return (
    // Wrap the component tree with the Provider
    <LangContext.Provider value={{ lang, toggleLang }}>
      {/* No need to pass props down anymore. */}
      <LangHeader />
    </LangContext.Provider>
  )
}

export default App

Next, import the context you created earlier and wrap your component tree with its Provider.

You can think of this as setting up a “channel” that delivers the values to any components below that need them.

`LangHeader.jsx`

import React from 'react'
import LangContent from './LangContent'

export default function LangHeader() {
  return (
    <>
      <div>LangHeader</div>
      <LangContent />
    </>
  )
}

As you can see, LangHeader (an intermediate component) no longer needs to receive props just to pass them down.

`LangContent.jsx`

import React from 'react'
import { useContext } from 'react';
import { LangContext } from '../generateContext';

export default function LangContent(  ) {
  const LANGUAGES = ['English', 'German', 'Japanese'];

  // Now you can read the values provided by the nearest Provider.
  const { lang, toggleLang } = useContext(LangContext);

  return (
    <>
    <div>LangContent</div>
    <p>current setting is: {lang}</p>
    {LANGUAGES.map(l => {
      return (
        <React.Fragment key={l}>
          <label htmlFor={l}>{l}</label>
          <input id={l}
          name='lang'
          type='radio'
          value={l}
          onChange={toggleLang}
          checked={lang === l}
            ></input>
        </React.Fragment>
      );
    })}
    </>
  )
}

Finally, consume the value in a deeply nested component and use it directly.

With prop drilling gone, the app still behaves exactly the same as it did before the refactor.

Summary

Context can feel a bit like a global variable, because it lets you share values between components without manually passing props through every level.

The key point is that the Provider’s value often includes state. When that state updates, any components that consume the context will re-render, even if they’re far away in the component tree.

DEV Community: Takamichi Oki

How the Web Works #1: What Is a URL?

Breaking Down a URL

What Is a Scheme (HTTP / HTTPS)?

What Is HTTP?

What Is HTTPS?

What Is a Host?

What Is a Path?

What Are Query Parameters?

What Is a Fragment?

Is localhost a URL?

What I Learned Today

React useContext for Beginners: Passing Data Without Props

Introduction

What is useContext?

Props: the Problem

App.jsx

LangHeader.jsx

LangContent.jsx

The Basics of useContext

Create a Context

Provide a Context Value

Consume the Context in a Component

Refactoring the App to use Context

generateContext.js

App.jsx

LangHeader.jsx

LangContent.jsx

Summary

What is `useContext`?

`App.jsx`

`LangHeader.jsx`

`LangContent.jsx`

The Basics of `useContext`

`generateContext.js`

`App.jsx`

`LangHeader.jsx`

`LangContent.jsx`