We have previously talked about useState before. A great way to create CSS classes on the fly is to use state variable!
Here is an example of how to create Dark Mode in React by using string interpolation to construct the individual classes based on the state variable mode.
index.html
<html>
<head>
<script type="module" src="./index.js"></script>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div id="root">loading</div>
</body>
</html>index.jsx
import React from "react";
import { createRoot } from "react-dom/client";
import App from "./App";
const rootElement = document.getElementById("root");
const root = createRoot(rootElement);
root.render(<App />);App.jsx
import React, { useState } from "react";
import "./App.css";
const App = () => {
const [mode, setMode] = useState("light");
const toggleTheme = () => {
if (mode === "light") {
setMode("dark");
} else {
setMode("light");
}
};
return (
<div id="app-wrapper" className={`theme-${ mode }`}>
<h1>Welcome to my page</h1>
<p>Do you want it like this?</p>
<button onClick={toggleTheme}>Change Theme</button>
</div>
);
};
export default App;App.css
body {
margin: 0;
}
#app-wrapper {
width: 100%;
height: 100%;
padding: 4px;
}
.theme-light {
background-color: white;
color: black;
}
.theme-dark {
background-color: black;
color: white;
}So, if you’re wondering how to put darkmode into your website, here’s one of the ways to go about it!
Here is another bonus for you in creating CSS classes on the fly: a code that display the content in a list or grid.
index.html
<html>
<head>
<script type="module" src="./index.js"></script>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div id="root">loading</div>
</body>
</html>index.jsx
import React from "react";
import { createRoot } from "react-dom/client";
import App from "./App";
const rootElement = document.getElementById("root");
const root = createRoot(rootElement);
root.render(<App />);
App.jsx
import React, { useState } from "react";
import "./App.css";
const App = () => {
const [layout, setLayout] = useState("grid");
const toggleLayout = () => {
if (layout === "grid") {
setLayout("list");
} else {
setLayout("grid");
}
};
return (
<div id="app-wrapper">
<h1>Product Showcase</h1>
<button onClick={toggleLayout}>Switch View</button>
<div className={`layout - $ { layout } `}>
<div className="item">Shoes</div>
<div className="item">Bags</div>
<div className="item">Accessories</div>
</div>
</div>
);
};App.css
.layout-grid {
display: flex;
flex-direction: row;
gap: 10px;
}
.layout-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.item {
padding: 20px;
background-color: #f0f0f0;
border-radius: 5px;
}
button {
margin-bottom: 20px;
}Try out all these codes for yourselves and play around with them!
P.S. I’m still on hiatus but I use Medium and my blog to take and share my notes 😝💋🖤 These notes are inspired by me cramming the whole syllabus within 24 hours. LOL
Narrator: But this was a lie. CyCy never became an expert in React. She did become an expert in crying to ChatGPT, even though she was cheating on Him with DeepSeek AI, however.
-
We Outsourced Our Brains To AI…Now What?
The article discusses the cognitive costs associated with increased reliance on AI tools and the internet, raising concerns about diminishing memory and critical thinking skills. It highlights the “Google Effect” and cognitive offloading, showing a correlation between AI dependence and decreased analytical abilities, particularly among younger users, while emphasizing the importance of maintaining cognitive engagement.
-
I Tried to Build an App…Now I’m in a Full Existential Spiral
Choosing My Old App…and Accidentally Rebuilding a Whole Product So, I graduated in April 2025 with a glowing average of 95.8% (yes, mom, I know, why not A++? Just kidding) from UofT Continuing Studies – Software Development BootCamp, and instead of coding immediately like I probably should have, I sat there like: Hmm… what is…
-
Implementing Dark Mode in React
We have previously talked about useState before. A great way to create CSS classes on the fly is to use state variable! Here is an example of how to create Dark Mode in React by using string interpolation to construct the individual classes based on the state variable mode. index.html index.jsx App.jsx App.css So, if…
-
Understanding Props in React: A Comprehensive Guide
This content explains the concept of props in React, which allow data to be passed to components, making them dynamic. It covers how to access props as objects, pass multiple properties, and handle different data types. The importance of correctly rendering non-string values and using props in JSX is emphasized.
-
The Power of JSX: Combining HTML and JavaScript
JSX is a syntax extension for JavaScript that resembles HTML, used primarily in React to create components. It allows developers to write HTML-like code within JavaScript, enhancing readability and enabling dynamic web applications. With JSX, one can embed JavaScript expressions, making the integration of logic and UI layout seamless.
-
Organizing React Components for Better Code
The content discusses best practices for organizing React components in separate files for maintainability. It details the process of importing React, creating functional components, and exporting them. Additionally, it covers returning multiple elements and using named vs. default exports, emphasizing strategic organization for better code management.
-
Step-by-Step Guide to Rendering React Components
The content provides a step-by-step guide on rendering components in React. It emphasizes creating and linking HTML and JavaScript files, setting up the main component, and utilizing the createRoot function to manage rendering. The author injects humor while guiding readers through the essential concepts of React component rendering.