DEV Community: Tijani Olagunju

Understanding JSX in React: A Friendly Guide

Tijani Olagunju — Thu, 17 Jul 2025 08:38:40 +0000

Introduction

Welcome! If you're learning React, you've likely encountered something that looks like HTML wrapped in JavaScript — that's JSX. At first glance, JSX can feel confusing. You might ask, “Is this JavaScript? Is it HTML? Why is it here?”

This guide is here to support you through that uncertainty. We’ll walk through JSX together with a clear focus on understanding the why and the how, not just the what. By the end, JSX will feel like a familiar and powerful friend — not a mysterious stranger.
Let’s dive in with clarity and confidence.

What is JSX?
Why Use JSX in React?
JSX vs HTML: Key Differences
Embedding JavaScript in JSX
JSX Best Practices
Common Mistakes and How to Avoid Them
Conclusion and Encouragement

1. What is JSX?

JSX stands for JavaScript XML. It's a syntax extension for JavaScript, and it's used with React to describe what the UI should look like.

In simpler terms, JSX lets you write HTML-like code inside your JavaScript.

Example:

const element = <h1>Hello, world!</h1>;

Behind the scenes, JSX is transformed into regular JavaScript:

const element = React.createElement('h1', null, 'Hello, world!');

This transformation happens during the build process, so you can write declarative code that's easy to read and reason about.

2. Why Use JSX in React?

JSX might seem optional, but it brings several benefits:
✅ Declarative Syntax

JSX lets you describe what you want to render, rather than how to create it step by step.
✅ Familiarity

If you’ve written HTML before, JSX feels comfortable — you’re already halfway there.
✅ Tighter Integration

JSX enables tight integration between layout and logic. You don’t have to switch contexts between languages.

3. JSX vs HTML: Key Differences

Even though JSX looks like HTML, it has some important differences:

1. className instead of class

// Wrong
<div class="container">Hello</div>

// Right
<div className="container">Hello</div>

This is because class is a reserved word in JavaScript.

2. Self-Closing Tags Required

JSX requires tags that don’t have children to be self-closed:

// Wrong
<input>

// Right
<input />

3. camelCase for Event Handlers and Attributes

// HTML
<button onclick="handleClick()">Click</button>

// JSX
<button onClick={handleClick}>Click</button>

4. Embedding JavaScript in JSX

You can embed JavaScript expressions inside JSX using curly braces {}. This is one of JSX's most powerful features.

Example:

const name = "Alice";
const greeting = <h1>Hello, {name}!</h1>;

You can also use conditional rendering:

const isLoggedIn = true;
const message = <p>{isLoggedIn ? "Welcome back!" : "Please sign in."}</p>;

Or loop through data:

const items = ["Apple", "Banana", "Cherry"];
const list = (
  <ul>
    {items.map(item => <li key={item}>{item}</li>)}
  </ul>
);

JSX is expressive and blends logic with markup beautifully.

5. JSX Best Practices

Here are a few friendly tips to keep your JSX clean and effective:
✅ Use Meaningful Names

Name components and variables clearly.

const WelcomeMessage = () => <h1>Welcome!</h1>;

✅ Keep Components Small

Break complex UIs into small, reusable components.
✅ Use Fragments When Needed

If a component returns multiple elements, wrap them in <>...</> instead of an unnecessary <div>.

<>
  <h1>Hello</h1>
  <p>Welcome back.</p>
</>

6. Common Mistakes and How to Avoid Them

Here are some common pitfalls beginners face — and how to steer clear:
❌ Forgetting to Return in Arrow Functions

// Wrong
const MyComponent = () => {
  <div>Hello</div>;
};

// Right
const MyComponent = () => {
  return <div>Hello</div>;
};

// Or use implicit return:
const MyComponent = () => <div>Hello</div>;

❌ Using if/else Inside JSX

JSX doesn't support full statements (like if). Use ternary operators or move logic outside.

// Not allowed
{ if (loggedIn) { return <p>Hi!</p>; } }

// Instead
{loggedIn ? <p>Hi!</p> : <p>Please log in.</p>}

❌ Not Using Keys in Lists
When rendering lists, always provide a key to each item.

items.map(item => <li key={item}>{item}</li>);

7. Conclusion and Encouragement

JSX is a cornerstone of React development, and it’s perfectly normal to feel a little unsure at the start. The good news? JSX becomes intuitive with practice. Every time you write a line of JSX, you're building both your understanding and your confidence.

As you continue learning React, keep experimenting, breaking things, and building small projects. You'll be amazed how quickly JSX becomes second nature.

And remember — you’re doing great.

Why Use Java for Backend?

Tijani Olagunju — Mon, 14 Jul 2025 21:05:03 +0000

Java is great for back-end development. They handle many requests simultaneously while maintaining performance and reliability. I will explain in the steps listed below:

1. Introduction
2. Stability and Reliability
3. Scalability for Enterprise Applications
4. Robust Ecosystem and Framework Support
5. Strong Typing and Maintainability
6. Security and Performance
7. Community and Talent Pool
8. Example: Basic Java Backend Setup

1. Introduction

Choosing a backend language is a foundational decision that affects scalability, maintenance, and long-term success. Java remains one of the most trusted options for backend development. This guide explores why many teams and enterprises still rely on Java, offering reassurance and practical insights for making informed choices.

2. Stability and Reliability

Java’s long-standing reputation comes from decades of refinement and usage across mission-critical systems. Developers choose Java because it behaves predictably under pressure. The JVM (Java Virtual Machine) ensures consistent behavior across platforms, making Java highly reliable for backend operations.

3. Scalability for Enterprise Applications

Java was built with scalability in mind. It handles concurrent users and large datasets efficiently, which makes it suitable for growing applications. Whether scaling horizontally (across servers) or vertically (within powerful hardware), Java's performance remains dependable.

4. Robust Ecosystem and Framework Support

Java offers mature and widely used frameworks such as:

Spring Boot for microservices and REST APIs,
Hibernate for object-relational mapping,
Jakarta EE for enterprise specifications.

These tools streamline backend development and reduce boilerplate code, empowering developers to focus on business logic.

5. Strong Typing and Maintainability

Java’s statically-typed nature enforces discipline. Type-checking at compile time catches many errors early. This leads to code that is easier to debug, refactor, and maintain—especially in large teams or legacy systems.

6. Security and Performance

Java provides robust built-in security features like bytecode verification, secure class loading, and an extensive set of cryptographic APIs. Combined with Just-In-Time (JIT) compilation and modern garbage collection, Java achieves excellent runtime performance.

7. Community and Talent Pool

Java has one of the largest global communities. A vast pool of skilled developers, extensive documentation, and mature libraries mean you're never alone when facing a problem. Whether hiring or learning, Java's ecosystem supports your growth.

8. Example: Basic Java Backend Setup

Below is a simple setup using Spring Boot to create a REST API in Java.

// File: HelloController.java
package com.example.demo;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class HelloController {

    @GetMapping("/hello")
    public String sayHello() {
        return "Hello from Java backend!";
    }
}

// File: DemoApplication.java
package com.example.demo;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class DemoApplication {

    public static void main(String[] args) {
        SpringApplication.run(DemoApplication.class, args);
    }
}

Steps to Run:

Set up a Maven or Gradle project.
Add Spring Boot dependencies.
Compile and run using ./mvnw spring-boot:run or ./gradlew bootRun.
Access http://localhost:8080/hello in your browser or Postman.

Conclusion

If your goal is to build robust, secure, and scalable backends with long-term viability, Java is a proven and dependable choice. It supports teams with clarity, consistency, and a deep pool of tools and expertise.
engage me with your questions...
"What do you think are the key advantages of using Java for backend development, and how do they compare to other popular backend languages?"

How To Build Responsive Websites Including Best Practices

Tijani Olagunju — Wed, 09 Jul 2025 11:03:55 +0000

You are welcome to this brief guide documented on
"How To Build Responsive Websites Including Best Practices."
You will learn useful tips Web designers utilize to create a user friendly website. The prerequisites you need are HTML and CSS. The table of contents is presented below:

In a world where users browse the web on phones, tablets, laptops, and desktops, a one-size-fits-all approach no longer suffices. Responsive web design ensures that content and layout adapt gracefully to the user’s screen. This essay aims to guide aspiring developers and designers with practical and compassionate advice on how to create websites that welcome everyone, regardless of their device.

2. Understanding Responsive Web Design (RWD)

Responsive Web Design is a design philosophy that emphasizes flexibility. Rather than designing fixed layouts, developers create adaptable layouts that adjust according to the screen size.
Core principles:

Fluid grids: Elements use relative units like percentages rather than fixed units like pixels.
Flexible images: Images scale with the size of their containers.
Media queries: CSS rules that change the layout depending on the screen’s dimensions.

3. Best Practices for Building Responsive Websites

a. Start with Mobile-First Design
Begin by designing for the smallest screen. This ensures your content is prioritized and clutter-free.

/* Base styles for mobile */
body {
  font-size: 16px;
  padding: 1rem;
}

/* Styles for tablets and up */
@media (min-width: 768px) {
  body {
    font-size: 18px;
  }
}

/* Styles for desktops and up */
@media (min-width: 1024px) {
  body {
    font-size: 20px;
  }
}

b. Set the Viewport Correctly

Always define the viewport to ensure your layout behaves correctly on mobile devices.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

c. Use Relative Units

Prefer em, rem, %, or vh/vw over px to allow flexible scaling.
d. Prioritize Content

Users on mobile may have limited time or bandwidth. Display key information prominently.

4. Common Tools and Frameworks

CSS Grid: Ideal for complex, two-dimensional layouts.
Flexbox: Excellent for arranging items in one dimension (row or column).
Bootstrap: Provides responsive components and a 12-column grid system.
Tailwind CSS: Utility-first framework for responsive design with minimal effort.

Example using Flexbox:

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  flex: 1 1 300px; /* Grow and shrink, base size 300px */
}

5. Testing Responsiveness Across Devices

Designing is only half the job—testing ensures reliability.
Tools to Use:

Chrome DevTools: Simulates various screen sizes and throttles network speed.
BrowserStack: Offers real-device testing.
Responsive Design Mode (Firefox): Easy screen size switching.

Regularly test:

Orientation changes
Clickability of buttons
Legibility of text

6. Code Examples and Illustrations

Responsive Image:

<img src="example.jpg" alt="A tree in the field" style="
max-width: 100%; height: auto;">

Grid Layout with Media Queries:

.grid-container {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .grid-container {
    grid-template-columns: 1fr 1fr;
  }
}

Illustration: Layout Shift
On small screens:

[Image]
[Text]

On larger screens:

[Image] [Text]

7. Conclusion/Resources

Designing responsive websites is not just about technology—it’s about people. It’s about ensuring that someone using a low-end smartphone on a 3G connection can access your content as easily as someone on a high-end laptop. By following best practices, staying curious, and caring about user experience, you contribute to a more inclusive web.
Learning resources- there are additional abundant collection of resources just from a google search on any topic of your choice.

How to Build a React Component from Scratch: A Gentle Guide

Tijani Olagunju — Fri, 04 Jul 2025 11:49:25 +0000

Welcome to this guide I prepared to walk you through creating a react component from scratch. The only prerequisites you need are basic HTML, CSS, and JavaScript foundational knowledge. Let's get to business...

Introduction: You’re Not Alone in This
- A welcoming note to ease apprehension.
What Is a React Component?
- Understanding the foundation.
Setting Up Your Environment
- Tools and setup made simple.
Creating Your First Component
- Step-by-step guide to your first working piece.
Styling the Component
- Ways to add aesthetic with ease.
Managing State and Props
- Making your component dynamic.
Best Practices and Troubleshooting
- Tips to write clean, resilient code.
Conclusion: You Did It!
- A reflection and encouragement for what comes next.

1. Introduction: You’re Not Alone in This

Learning to build a React component from scratch can feel like stepping into a vast and unfamiliar world. If you’ve found yourself unsure where to start—or frustrated because things don’t “just work”—please know this: you are not alone. Every expert React developer was once a beginner. This guide is written to hold your hand through the process, no assumptions, no judgement—just encouragement and clarity.

2. What Is a `React` Component?

A React component is the building block of a React application. Think of it as a modular piece of UI—a button, a card, a form field—that encapsulates logic, layout, and style. There are two main types:

Function Components: Modern, simpler, and the current best practice.
Class Components: Older, more verbose, but still used in legacy codebases.

We’ll focus on function components because they’re simpler and more intuitive for newcomers.

3. Setting Up Your Environment

Before writing any code, let’s ensure your development environment is ready:

What You Need:

Node.js and npm: You can download them from nodejs.org.
Code Editor: Visual Studio Code is widely used and beginner-friendly.
Create React App: An official starter pack to set up your project fast.

Steps:

Open your terminal.
Run:

    npx create-react-app my-first-component
    cd my-first-component
    npm start

3.Your browser should open with the default React app—success!

If anything feels overwhelming at this point, pause. Take a deep breath. You’re doing just fine.

4. Creating Your First Component

Let’s create a simple Greeting component that says hello to a user.

Step-by-Step:

Inside your project’s src/ folder, create a new file: Greeting.js
Add the following code:


import React from 'react';

function Greeting() {
  return <h1>Hello, welcome to your first component!</h1>;
}

export default Greeting;

3.In App.js, import and use it:

    import Greeting from './Greeting';

    function App() {
      return (
        <div>
          <Greeting />
        </div>
      );
    }

Why This Works:

We define a function named Greeting that returns JSX( a syntax extension that looks like HTML).
We export it so it can be used in other parts of the app.
We import and include <Greeting />in our main app file.

Congratulations—you’ve just built a React component!

5. Styling the Component

Styling helps make your UI approachable and personal.

Inline Styling:

return <h1 style={{ color: 'blue' }}>Hello, styled component!</h1>;

Using CSS Files:

Create Greeting.css:

.greeting-text {
  color: teal;
  font-size: 24px;
}

2.Modify Greeting.js:


    import './Greeting.css';

    function Greeting() {
      return <h1 className="greeting-text">Hello with CSS!</h1>;
    }

Both options are valid—choose what feels manageable for you as you learn.

6. Managing State and Props

Now let’s add props to personalize the message and state to make it interactive.

With Props:

function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

// Use in App.js
<Greeting name="Alex" />

With State:

import React, { useState } from 'react';

function Greeting() {
  const [name, setName] = useState('Alex');

  return (
    <>
      <h1>Hello, {name}!</h1>
      <button onClick={() => setName('Taylor')}>Change Name</button>
    </>
  );
}

With useState, React helps you keep track of values that can change—like a name after a button click. If this feels like a leap, it’s okay. Repetition and small experiments will make it second nature.

7. Best Practices and Troubleshooting

Keep in Mind:

Name Components with Capitals: React treats lowercase tags like built-in HTML.
Return One Root Element: Wrap JSX in a single parent, like < div> or <>.
Use Meaningful Names: Components like UserCard, Header, LoginForm tell their own story.

When Things Break:

Read Error Messages Slowly: Often they guide you to the exact line.
Restart the Server: Sometimes Ctrl + C and npm start again solves mysterious issues.
Google the Error: Every error you’ll meet has likely been solved publicly already.

8. Conclusion: You Did It!

You’ve written your first component, styled it, passed in props, used state, and survived a few quirks along the way. That’s not just technical progress—it’s emotional growth, too. Learning to code is as much about confidence as it is about syntax.

Whether you're still unsure or feeling victorious, this is a huge milestone. Take a break, hydrate, and remember: you’re building something powerful, one component at a time.

For additional resources on YouTube Check out these tutorials:@programming with mosh --React Tutorial for Beginners-- @useful programmer --Write a React Component from Scratch - React - Free Code Camp--.
Follow me for more updates and type in your questions and feedback in the Comment box.

With that we come to the end of this guide.
"What are the key steps and considerations you take into account when building a React component from scratch, and how do you ensure it remains reusable and maintainable?" Comment your suggestions below

What is the useRef Hook in React and When Should It Be Used?

Tijani Olagunju — Wed, 02 Jul 2025 02:43:58 +0000

SCOPE

A React Hook is a special function in React that lets developers use state and other React features without writing a class. It makes code simpler and easier to manage by allowing functionality to be added directly within components.Now we will discuss the useRef Hook in the following sections:

📘 What is the `useRef` Hook in React and When Should It Be Used?

1.Introduction to useRef

2.Syntax of useRef

Common Use Cases

3.1. Accessing DOM Elements

3.2. Storing Mutable Values

3.3. Persisting Values Without Re-render

Example Use Cases

4.1. Focus an Input Field

4.2. Keep Track of Previous State

4.3. Interval with Mutable Reference

5.Best Practices

6.Conclusion

Introduction to `useRef`

useRef is a built-in React hook that returns a mutable ref object. It is primarily used to reference DOM elements or persist values across renders without triggering a re-render.

const myRef = useRef(initialValue);
The returned object:
{ current: initialValue }
This object is mutable and persists for the lifetime of the component.

2.Syntax of `useRef`

Here's how you import and use it:
import { useRef } from 'react';
function MyComponent() { const inputRef = useRef(null); return <input ref={inputRef} />;
}
You access or modify the ref with:
inputRef.current

3.Common Use Cases

3.1.Accessing DOM Elements

You can use useRef to directly access or manipulate a DOM element, such as focusing an input field or reading values without event handlers.

3.2.Storing Mutable Values

It can hold any mutable value (like a counter or timeout ID) that shouldn't cause a re-render when updated.

3.3.Persisting Values Without Re-render

Unlike useState, changing the .current property of a ref does not trigger a re-render, making it ideal for tracking non-UI-changing values.

Example Use Cases

4.1.Focus an Input Field

import React, { useRef } from 'react'; function FocusInput() { const inputRef = useRef(null); const handleClick = () => { inputRef.current.focus(); }; return ( <> <input ref={inputRef} type="text" /> <button onClick={handleClick}>Focus Input</button> </> ); }

4.2.Keep Track of Previous State

import React, { useEffect, useRef, useState } from 'react'; function PreviousValueExample() { const [count, setCount] = useState(0); const prevCountRef = useRef(); useEffect(() => { prevCountRef.current = count; }); return ( <div> <p>Current: {count}</p> <p>Previous: {prevCountRef.current}</p> <button onClick={() => setCount(count + 1)}>Increment</button> </div> ); }

4.3.Interval with Mutable Reference

import React, { useRef, useEffect, useState } from 'react'; function Timer() { const [seconds, setSeconds] = useState(0); const intervalRef = useRef(null); useEffect(() => { intervalRef.current = setInterval(() => { setSeconds(prev => prev + 1); }, 1000); return () => clearInterval(intervalRef.current); }, []); return ( <div> <p>Timer: {seconds}s</p> <button onClick={() => clearInterval(intervalRef.current)}>Stop</button> </div> ); }

5.Best Practices

✅ Use useRef for non-rendering values or DOM access.
❌ Avoid using useRef to replace all useState — they serve different purposes.
✅ Use useRef to store mutable variables like timers, counters, or previous props/state.
❌ Don’t use useRef to track values that should appear in the UI without forcing updates manually.

6.Summary

The useRef hook is a powerful tool in React for handling references to DOM elements and persisting mutable data across renders without causing re-renders. It's an essential hook for performance optimization, direct DOM access, and managing non-reactive values.
Use it wisely alongside useState and useEffect to build efficient, interactive React components.
questions are welcomed in the comment box.

How to capture a camera's input on a mobile device using element

Tijani Olagunju — Tue, 01 Jul 2025 11:32:20 +0000

This guide explains the steps to capture a user's camera on a mobile device. Although this guide is focused mainly on HTML, I added a tip on how to preview captured image using JavaScript.

PHILOSOPHY

Modern mobile browsers allow web developers to access the device's camera using a simple <input type="file"> element with some special attributes. I explain how to implement this feature for capturing photos or videos from the user’s camera directly via a mobile device below

BASIC SYNTAX

<input type="file" accept="image/*" capture>

BELOW IS A MORE DETAILED LIST ABOUT THE ATTRIBUTES:

type="file"

This makes the input element a file picker.
accept="image/*" or accept="video/*"

Tells the browser to restrict selectable file types.

Common values
image/* — Opens camera for photos.
video/* — Opens camera for videos.
image/*,video/* — Allows choosing both types.
capture (attribute with or without value)

This hints to the browser to open the camera app instead of the gallery.

Front Camera and Rear Camera Options:
capture="user" 
capture="environment" 
capture 

THE NEXT LIST CONSIST OF GUIDELINES...

1. To Capture a Photo

<label for="cameraInput">Take a photo:</label>
<input type="file" id="cameraInput" accept="image/*" capture="environment">

2. To Capture a Video

<label for="videoInput">Record a video:</label>
<input type="file" id="videoInput" accept="video/*" capture>

3. To Capture Either Photo or Video

<label for="mediaInput">Capture photo or video:</label>
<input type="file" id="mediaInput" accept="image/*,video/*" capture>

NOTE
Desktop browsers usually ignore the capture attribute.While some modern browsers support video capture, others may only support image capture. The device capabilities determines if the capture attribute support video or image capture.

PRIVACY CONSIDERATION
The browser asks for permission before accessing the camera.
Files are not uploaded automatically — you need to handle that via JavaScript or form submission.

Ensure to do the following:
*Always provide fallback instructions for users.
*Use CSS to style the for a better mobile experience.
*Hide the input and trigger it with a button for a custom UI.

TIP TO PREVIEW CAPTURED IMAGE

<input type="file" id="cameraInput" accept="image/*" capture>
<img id="preview" style="max-width: 100%; margin-top: 10px;" />

<script> document.getElementById("cameraInput").addEventListener("change", function(event) { const file = event.target.files[0]; if (file) { const preview = document.getElementById("preview"); preview.src = URL.createObjectURL(file); } }); </script>

KEYPOINT

The HTML <input type="file"> element with the capture attribute is a powerful, easy-to-implement way to open the mobile device’s camera for capturing images or videos. While it doesn’t provide deep camera control (like WebRTC does), it’s perfect for simple use cases like uploading profile pictures, document scans, or video messages.

This brings us to the end of this Manual.

DEV Community: Tijani Olagunju

Understanding JSX in React: A Friendly Guide

Introduction

Table of Contents

1. What is JSX?

Example:

2. Why Use JSX in React?

3. JSX vs HTML: Key Differences

1. className instead of class

2. Self-Closing Tags Required

3. camelCase for Event Handlers and Attributes

4. Embedding JavaScript in JSX

Example:

5. JSX Best Practices

6. Common Mistakes and How to Avoid Them

7. Conclusion and Encouragement

Why Use Java for Backend?

Table of Contents

1. Introduction

2. Stability and Reliability

3. Scalability for Enterprise Applications

4. Robust Ecosystem and Framework Support

5. Strong Typing and Maintainability

6. Security and Performance

7. Community and Talent Pool

8. Example: Basic Java Backend Setup

Steps to Run:

Conclusion

How To Build Responsive Websites Including Best Practices

Table of Contents:

1. Introduction

2. Understanding Responsive Web Design (RWD)

3. Best Practices for Building Responsive Websites

4. Common Tools and Frameworks

5. Testing Responsiveness Across Devices

6.Code Examples and Illustrations

7.Conclusion

1. Introduction

2. Understanding Responsive Web Design (RWD)

3. Best Practices for Building Responsive Websites

4. Common Tools and Frameworks

5. Testing Responsiveness Across Devices

6. Code Examples and Illustrations

7. Conclusion/Resources

How to Build a React Component from Scratch: A Gentle Guide

Table of Contents

1. Introduction: You’re Not Alone in This

2. What Is a React Component?

3. Setting Up Your Environment

What You Need:

Steps:

4. Creating Your First Component

Step-by-Step:

Why This Works:

5. Styling the Component

Inline Styling:

Using CSS Files:

6. Managing State and Props

With Props:

With State:

7. Best Practices and Troubleshooting

Keep in Mind:

When Things Break:

8. Conclusion: You Did It!

What is the useRef Hook in React and When Should It Be Used?

SCOPE

📘 What is the useRef Hook in React and When Should It Be Used?

Table of Contents

Introduction to useRef

2.Syntax of useRef

3.Common Use Cases

3.1.Accessing DOM Elements

3.2.Storing Mutable Values

3.3.Persisting Values Without Re-render

Example Use Cases

4.1.Focus an Input Field

4.2.Keep Track of Previous State

4.3.Interval with Mutable Reference

5.Best Practices

6.Summary

2. What Is a `React` Component?

📘 What is the `useRef` Hook in React and When Should It Be Used?

Introduction to `useRef`

2.Syntax of `useRef`