React useState + CSS Made Easy 💡 | Beginner Series Ep. 5

Опубликовано: 24 Июнь 2025
на канале: Code With Krishna

Learn how to use useState in React to make your components dynamic, and apply CSS styling (inline, external, modules) effectively. We'll build toggle buttons, dark mode switch, and responsive layouts with real-time interaction.

🟢 Chapter Source Code:
https://github.com/Krishna-sm/Unlimit...
✋ Stay connected:
Instagram:   / codewithkrishna___

⏱️ Timestamps with Short Descriptions:
00:00 - Intro and overview of the useState & CSS session
08:60 - Decrement logic explained with display number
09:06 - Toggle Text example with show/hide functionality
09:18 - Creating ToggleButton component
09:31 - Importing useState properly from React
09:51 - JSX element creation – Hello World example
10:10 - Conditional show/hide using useState and && logic
11:07 - Creating toggleHandler with setIsShow(!isShow)
11:26 - Using callback directly in onClick
11:42 - Using ternary operator to change button text dynamically
12:02 - Explaining show/hide for password toggle use-case
12:14 - Introduction to React Icons Library
12:30 - React Icons - Available icon packs explained

21:28 - React re-rendering and Math.random + DOM change behavior
22:34 - Managing random color changes using useState for index
23:07 - Why UI doesn’t re-render if state doesn’t change
23:24 - Using conditional CSS to change color dynamically
23:53 - Light/Dark Mode example using useState toggle
24:44 - Conditional rendering of mode text and styling
25:03 - Updating styles based on isDark boolean using setIsDark

25:17 - Creating and using external CSS file for DarkMode
25:30 - Writing dark mode class with background and text color

63:45 - Explaining CSS Units (px, rem, em, vw, vh)
67:04 - CSS Borders: solid, dotted, dashed, double
67:50 - Padding vs Margin explained visually
68:44 - Inspect tool and box model overview
69:04 - Customizing padding values (top, right, bottom, left)

87:08 - Mini project: Create Tabs with Home, About, Contact
87:35 - Styling navigation bar using flex and justify-content
88:11 - Creating active class for selected nav item
88:47 - Showing dynamic content (Home, About, Contact) on click
89:13 - Adding dynamic className using selected index
89:44 - Conditional rendering of content based on selection

90:06 - Final project: Navigation component + content switching
90:13 - Paragraph hover effect using only CSS (no JS)
90:18 - Resizable box on click (width/height via JS)
90:24 - Profile toggle (short vs full view) using JS

90:37 - Outro + Summary of useState and CSS Styling Concepts

Other Popular Videos:
► React Full Course :    • React Course 2025
► Wedding Planner :    • React Wedding Planner
► MongoDB :    • How to Create and Connect MongoDB Atlas Da...
► Next JS :    • Next Js 14  Complete Full Stack Authentica...
► Redux :    • Next.js 14 Tutorial: Learn Redux With Proj...
► Inventory Management System :    • React Inventory Management System | Mern S...
► Inventory Management System :    • React Inventory Management System | Mern S...
► Installation of Rust :    • How to install Rust in Windows |  Rust Pro...
► MERN stack :    • MERN Tutorial: Complete MERN Stack | Build...
► NEST JS :    • Nest JS  Complete Tutorial With Projects
► MEVN Stack :    • #1 Setup of MEVN Stack | #vue js Project |...

#ReactJS #ReactForBeginners #JSX #ReactComponents #ReactProps #ReactMap #ReactImage #WebDevelopment #FrontendDevelopment #CodingPractice #CreateReactApp #ReactJSClass #LearnReact

check my Website (https://https://codewithkrishna.vercel.app)
i am creating with next js 14 with node js, express js

subscribe my channel