Imagine you're painting a house:
Traditional Approach (Old Way):
Buy paint from different stores (HTML, CSS files)
Keep all paint in separate rooms
When painting a room, run between rooms to get colors
Messy, time-consuming, easy to spill!
React Approach (New Way):
Each room has its own paint box with all colors needed
Paint box travels with you to each room
Everything you need is right there!
Clean, efficient, organized!
React Styling Options:
┌─────────────────────────────────────────┐
│ 🎨 Inline Styles (Paint in the room) │
│ JavaScript objects right in JSX │
│ │
│ 📁 External CSS (Shared paint store) │
│ Import CSS files │
│ │
│ 🧩 CSS Modules (Labeled paint cans) │
│ Scoped to components │
│ │
│ 💅 Styled Components (Custom mix) │
│ CSS in JavaScript │
│ │
│ 🌬️ Tailwind CSS (Pre-mixed colors) │
│ Utility classes │
└─────────────────────────────────────────┘
⚠️ The Big Problem: JSX Styling Differences
// ==========================================
// THE "THIS LOOKS LIKE HTML BUT ISN'T" TRAP
// ==========================================
// ❌ WRONG: Writing HTML-style in JSX
function BadStyling() {
return (
<div>
{/* HTML style attribute - WRONG in JSX! */}
<h1 style="color: red; font-size: 32px;">
Hello
</h1>
{/* HTML class attribute - WRONG in JSX! */}
<div class="container">
Content
</div>
</div>
);
}
// Why this fails:
// 1. style="string" → JSX needs style={object}
// 2. class="name" → JSX needs className="name"
// 3. font-size → JSX needs fontSize (camelCase)
// ✅ CORRECT: JSX-style styling
function GoodStyling() {
return (
<div>
{/* JSX style - JavaScript object with camelCase */}
<h1 style={{ color: 'red', fontSize: '32px' }}>
Hello
</h1>
{/* JSX className - not class */}
<div className="container">
Content
</div>
</div>
);
}
// Visual comparison:
// HTML: JSX:
// style="color: red" style={{ color: 'red' }}
// ↑ string ↑ object in {}
// ↑ quotes ↑ double braces {{}}
//
// class="btn" className="btn"
// ↑ lowercase ↑ camelCase
// ↑ reserved word ↑ safe to use
📋 Complete Basic Examples
Create file: react-styling.js
// ==========================================
// STYLING REACT COMPONENTS - Complete Guide
// ==========================================
/*
STYLING OPTIONS IN REACT:
┌─────────────────────────────────────────┐
│ 1. INLINE STYLES │
│ • JavaScript objects │
│ • Right in JSX │
│ • Quick for small components │
│ │
│ 2. EXTERNAL CSS │
│ • Regular .css files │
│ • Import into component │
│ • Global styles │
│ │
│ 3. CSS MODULES (later) │
│ • Scoped to component │
│ • .module.css files │
│ │
│ 4. STYLED COMPONENTS (later) │
│ • CSS in JavaScript │
│ • Component-based styles │
│ │
│ 5. TAILWIND CSS (later) │
│ • Utility classes │
│ • Rapid development │
└─────────────────────────────────────────┘
REACT IS UNOPINIONATED:
┌─────────────────────────────────────────┐
│ React doesn't care HOW you style! │
│ Choose what works for your project: │
│ • Small app → Inline or External CSS │
│ • Large app → CSS Modules or Styled │
│ • Rapid prototyping → Tailwind │
└─────────────────────────────────────────┘
*/
// ==========================================
// EXAMPLE 1: Inline Styles (From Your Text)
// ==========================================
function InlineStyleDemo() {
// Method 1: Direct object in JSX
return (
<div>
<h1 style={{ color: 'red', fontSize: '48px' }}>
Red Big Text
</h1>
</div>
);
}
// Method 2: Extract style object to variable
function InlineStyleVariable() {
// Define style object before return
const headingStyle = {
color: 'blue',
fontSize: '32px',
textTransform: 'uppercase',
backgroundColor: '#f0f0f0',
padding: '20px',
borderRadius: '8px'
};
return (
<div>
<h1 style={headingStyle}>
Styled with Variable
</h1>
</div>
);
}
// Visual breakdown of inline style:
// <h1 style={{ color: 'red', fontSize: '48px' }}>
// ↑ ↑ ↑ ↑
// │ │ └─ JavaScript object ┘
// │ └─ Outer braces = JS mode
// └─ style attribute (like HTML)
// Behind the scenes:
// JSX: style={{ color: 'red' }}
// ↓
// React: style={{ color: 'red' }} (object passed)
// ↓
// DOM: style="color: red" (converted to CSS)
// ==========================================
// EXAMPLE 2: CSS Property Names (Camel Case)
// ==========================================
function CamelCaseDemo() {
const styles = {
// CSS property → JSX property
'background-color' → backgroundColor
'font-size' → fontSize
'text-align' → textAlign
'border-radius' → borderRadius
'margin-top' → marginTop
'z-index' → zIndex
'box-shadow' → boxShadow
};
const cardStyle = {
backgroundColor: '#264653', // was background-color
fontSize: '18px', // was font-size
textAlign: 'center', // was text-align
borderRadius: '12px', // was border-radius
marginTop: '20px', // was margin-top
boxShadow: '0 4px 6px rgba(0,0,0,0.1)', // was box-shadow
padding: '30px',
color: 'white'
};
return (
<div style={cardStyle}>
<h2>Camel Case Properties</h2>
<p>All CSS properties become camelCase in JSX!</p>
</div>
);
}
// Common conversions table:
// ┌──────────────────┬──────────────────┐
// │ CSS │ JSX │
// ├──────────────────┼──────────────────┤
// │ background-color │ backgroundColor │
// │ font-size │ fontSize │
// │ border-radius │ borderRadius │
// │ margin-top │ marginTop │
// │ padding-left │ paddingLeft │
// │ text-decoration │ textDecoration │
// │ z-index │ zIndex │
// │ flex-direction │ flexDirection │
// │ align-items │ alignItems │
// │ justify-content │ justifyContent │
// └──────────────────┴──────────────────┘
// ==========================================
// EXAMPLE 3: Values Are Strings (With Units)
// ==========================================
function StyleValuesDemo() {
const styles = {
// Numbers become pixels automatically (sometimes)
fontSize: 16, // ❌ Missing quotes - might work but risky
fontSize: '16px', // ✅ Correct - string with units
// Multiple ways to specify values
width: '100%', // Percentage
height: '50vh', // Viewport units
margin: '20px', // Pixels
padding: '1rem', // Relative units
opacity: '0.8', // String number
zIndex: '10', // String number
// Colors
color: 'red', // Named color
color: '#ff0000', // Hex
color: 'rgb(255, 0, 0)', // RGB
color: 'rgba(255, 0, 0, 0.5)', // RGBA with transparency
};
return <div style={styles}>Value examples</div>;
}
// ==========================================
// EXAMPLE 4: Dynamic Styles (Conditional)
// ==========================================
function DynamicStylesDemo() {
const [isActive, setIsActive] = React.useState(false);
const [count, setCount] = React.useState(0);
// Dynamic style based on state
const buttonStyle = {
backgroundColor: isActive ? '#2a9d8f' : '#e76f51',
color: 'white',
padding: '15px 30px',
fontSize: '18px',
border: 'none',
borderRadius: '8px',
cursor: 'pointer',
// Dynamic transform based on count
transform: count > 5 ? 'scale(1.1)' : 'scale(1)',
transition: 'all 0.3s ease'
};
// Dynamic style object based on props/state
const getCardStyle = (priority) => ({
padding: '20px',
borderRadius: '8px',
border: '2px solid',
// Conditional styling
borderColor: priority === 'high' ? '#e76f51' :
priority === 'medium' ? '#e9c46a' : '#2a9d8f',
backgroundColor: priority === 'high' ? '#ffebee' :
priority === 'medium' ? '#fff8e1' : '#e8f5e9'
});
return (
<div>
<button
style={buttonStyle}
onClick={() => {
setIsActive(!isActive);
setCount(c => c + 1);
}}
>
Clicked {count} times
</button>
<div style={{ marginTop: '20px', display: 'flex', gap: '10px' }}>
<div style={getCardStyle('high')}>High Priority</div>
<div style={getCardStyle('medium')}>Medium Priority</div>
<div style={getCardStyle('low')}>Low Priority</div>
</div>
</div>
);
}
// ==========================================
// EXAMPLE 5: External CSS File (From Your Text)
// ==========================================
// Step 1: Create index.css file
/*
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
.header {
background-color: #f4a261;
padding: 30px;
text-align: center;
}
.menu {
background-color: white;
padding: 30px;
border-radius: 8px;
margin: 20px 0;
}
.footer {
background-color: #2a9d8f;
color: white;
padding: 20px;
text-align: center;
}
*/
// Step 2: Import CSS in your component file
import './index.css'; // Webpack handles this!
function ExternalCSSDemo() {
return (
<div className="container">
<header className="header">
<h1>External CSS Styling</h1>
</header>
<main className="menu">
<p>Content goes here</p>
</main>
<footer className="footer">
<p>Footer content</p>
</footer>
</div>
);
}
// IMPORTANT: Use className, not class!
// ❌ <div class="container"> (HTML style - WRONG)
// ✅ <div className="container"> (JSX style - CORRECT)
// ==========================================
// EXAMPLE 6: Combining Inline and External
// ==========================================
function CombinedStyling() {
// Use external CSS for layout/structure
// Use inline styles for dynamic/dynamic values
const dynamicColor = new Date().getHours() > 12 ? '#264653' : '#e76f51';
return (
<div className="container"> {/* From external CSS */}
<header className="header"> {/* From external CSS */}
<h1 style={{ color: dynamicColor }}> {/* Inline for dynamic */}
Dynamic Header Color
</h1>
<p style={{ fontSize: '14px', opacity: 0.8 }}>
Inline styled subtitle
</p>
</header>
<div className="menu"> {/* From external CSS */}
<p>Most styles from CSS file</p>
<span
className="badge" {/* From external CSS */}
style={{ backgroundColor: dynamicColor }} {/* Inline override */}
>
Live
</span>
</div>
</div>
);
}
// ==========================================
// EXAMPLE 7: Common Beginner Mistakes
// ==========================================
function MistakesDemo() {
return (
<div>
{/* ❌ Mistake 1: Using class instead of className */}
{/* <div class="container"> */}
{/* ✅ Correct: */}
<div className="container">
Content
</div>
{/* ❌ Mistake 2: String instead of object for style */}
{/* <div style="color: red"> */}
{/* ✅ Correct: */}
<div style={{ color: 'red' }}>
Red text
</div>
{/* ❌ Mistake 3: CSS syntax instead of camelCase */}
{/* <div style={{ 'font-size': '16px' }}> */}
{/* ✅ Correct: */}
<div style={{ fontSize: '16px' }}>
Proper size
</div>
{/* ❌ Mistake 4: Missing quotes around values */}
{/* <div style={{ color: red }}> */}
{/* ✅ Correct: */}
<div style={{ color: 'red' }}>
Proper color
</div>
{/* ❌ Mistake 5: Single braces instead of double */}
{/* <div style={ color: 'red' }> */}
{/* ✅ Correct: */}
<div style={{ color: 'red' }}>
Double braces
</div>
</div>
);
}
// ==========================================
// EXAMPLE 8: Complete Pizza App with Styling
// ==========================================
// Import external CSS (assumes index.css exists)
// import './index.css';
function StyledPizzaApp() {
const hour = new Date().getHours();
const isOpen = hour >= 12 && hour <= 22;
// Dynamic inline styles
const statusStyle = {
color: isOpen ? '#2a9d8f' : '#e76f51',
fontWeight: 'bold',
fontSize: '24px'
};
const pizzas = [
{ name: 'Margherita', price: 10, ingredients: 'Tomato, cheese' },
{ name: 'Pepperoni', price: 12, ingredients: 'Tomato, cheese, pepperoni' },
{ name: 'Spinaci', price: 12, ingredients: 'Tomato, cheese, spinach' }
];
return (
<div className="container">
<header className="header">
<h1 style={{ margin: 0 }}>🍕 Fast React Pizza</h1>
</header>
<main className="menu">
<h2>Our Menu</h2>
<p style={statusStyle}>
{isOpen ? '🟢 Open Now' : '🔴 Closed'}
</p>
<div style={{ display: 'grid', gap: '20px', marginTop: '20px' }}>
{pizzas.map(pizza => (
<PizzaCard key={pizza.name} pizza={pizza} />
))}
</div>
</main>
<footer className="footer">
<p>Open daily 12:00 - 22:00</p>
</footer>
</div>
);
}
function PizzaCard({ pizza }) {
// Component-specific inline styles
const cardStyle = {
border: '1px solid #ddd',
borderRadius: '8px',
padding: '15px',
backgroundColor: 'white',
boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
};
const priceStyle = {
color: '#e76f51',
fontWeight: 'bold',
fontSize: '20px',
marginTop: '10px'
};
return (
<div style={cardStyle} className="pizza-card">
<h3 style={{ margin: '0 0 10px 0' }}>{pizza.name}</h3>
<p style={{ margin: '0 0 10px 0', color: '#666' }}>
{pizza.ingredients}
</p>
<div style={priceStyle}>${pizza.price}</div>
</div>
);
}
🚀 React Usage Examples (Full Visual Guide!)
Complete React File: StylingMasterClass.jsx
import React from 'react';
// ==========================================
// EXAMPLE 1: Visual Style Comparison
// ==========================================
function StyleComparisonDemo() {
const [activeTab, setActiveTab] = React.useState('inline');
return (
<div style={{ padding: '30px', fontFamily: 'Arial, sans-serif' }}>
<h2>🎨 Styling Methods Comparison</h2>
<div style={{ marginBottom: '30px', display: 'flex', gap: '10px' }}>
{['inline', 'external', 'comparison'].map(tab => (
<button
key={tab}
onClick={() => setActiveTab(tab)}
style={{
padding: '12px 24px',
fontSize: '16px',
backgroundColor: activeTab === tab ? '#e76f51' : '#ddd',
color: activeTab === tab ? 'white' : 'black',
border: 'none',
borderRadius: '5px',
cursor: 'pointer',
textTransform: 'capitalize'
}}
>
{tab}
</button>
))}
</div>
{activeTab === 'inline' && <InlineStyleShowcase />}
{activeTab === 'external' && <ExternalCSSShowcase />}
{activeTab === 'comparison' && <SideBySideComparison />}
</div>
);
}
function InlineStyleShowcase() {
const boxStyle = {
backgroundColor: '#264653',
color: 'white',
padding: '30px',
borderRadius: '12px',
fontSize: '18px',
boxShadow: '0 4px 6px rgba(0,0,0,0.2)',
lineHeight: '1.6'
};
const highlightStyle = {
backgroundColor: '#e9c46a',
color: '#264653',
padding: '2px 8px',
borderRadius: '4px',
fontWeight: 'bold'
};
return (
<div>
<h3>Inline Styles (JavaScript Objects)</h3>
<div style={boxStyle}>
<p>This box is styled with a <span style={highlightStyle}>JavaScript object</span>!</p>
<p>Pros:</p>
<ul>
<li>Dynamic values (props, state)</li>
<li>No separate CSS file needed</li>
<li>Scoped to component</li>
</ul>
<p>Cons:</p>
<ul>
<li>Can get verbose</li>
<li>No CSS features (hover, media queries)</li>
<li>Harder to maintain for large apps</li>
</ul>
</div>
<div style={{ marginTop: '20px', padding: '20px', background: '#f0f0f0', borderRadius: '8px' }}>
<h4>Code:</h4>
<pre style={{ fontSize: '14px', overflow: 'auto' }}>
{`const boxStyle = {
backgroundColor: '#264653',
color: 'white',
padding: '30px',
borderRadius: '12px'
};
return <div style={boxStyle}>Content</div>;`}
</pre>
</div>
</div>
);
}
function ExternalCSSShowcase() {
// Simulating external CSS with inline styles for demo
const containerClass = {
maxWidth: '600px',
margin: '0 auto',
padding: '20px',
backgroundColor: '#f8f9fa',
borderRadius: '8px'
};
const headerClass = {
backgroundColor: '#2a9d8f',
color: 'white',
padding: '20px',
textAlign: 'center',
borderRadius: '8px 8px 0 0'
};
const contentClass = {
padding: '30px',
backgroundColor: 'white'
};
return (
<div>
<h3>External CSS (Class-based)</h3>
<div style={containerClass}>
<div style={headerClass}>
<h2 style={{ margin: 0 }}>Header</h2>
</div>
<div style={contentClass}>
<p>This content is styled with CSS classes!</p>
<p>In real app, these would be in a .css file:</p>
<code style={{ background: '#f0f0f0', padding: '2px 6px' }}>.container</code>,{' '}
<code style={{ background: '#f0f0f0', padding: '2px 6px' }}>.header</code>, etc.
</div>
</div>
<div style={{ marginTop: '20px', padding: '20px', background: '#f0f0f0', borderRadius: '8px' }}>
<h4>File: styles.css</h4>
<pre style={{ fontSize: '14px' }}>
{`.container {
max-width: 600px;
margin: 0 auto;
}
.header {
background-color: #2a9d8f;
color: white;
}`}
</pre>
<h4>File: Component.jsx</h4>
<pre style={{ fontSize: '14px' }}>
{`import './styles.css';
function Component() {
return (
<div className="container">
<div className="header">...</div>
</div>
);
}`}
</pre>
</div>
</div>
);
}
function SideBySideComparison() {
return (
<div>
<h3>Side-by-Side: HTML vs JSX Styling</h3>
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '20px' }}>
<div style={{ background: '#ffebee', padding: '20px', borderRadius: '8px' }}>
<h4 style={{ color: '#c62828', marginTop: 0 }}>❌ HTML (Don't do this in React)</h4>
<pre style={{ fontSize: '13px', background: 'white', padding: '15px', borderRadius: '4px' }}>
{`<div class="container">
<h1 style="color: red;
font-size: 32px;">
Hello
</h1>
<button class="btn-primary">
Click
</button>
</div>`}
</pre>
<ul style={{ fontSize: '14px', color: '#666' }}>
<li>style="string"</li>
<li>kebab-case properties</li>
<li>class attribute</li>
</ul>
</div>
<div style={{ background: '#e8f5e9', padding: '20px', borderRadius: '8px' }}>
<h4 style={{ color: '#2e7d32', marginTop: 0 }}>✅ JSX (Do this in React)</h4>
<pre style={{ fontSize: '13px', background: 'white', padding: '15px', borderRadius: '4px' }}>
{`<div className="container">
<h1 style={{ color: 'red',
fontSize: '32px' }}>
Hello
</h1>
<button className="btn-primary">
Click
</button>
</div>`}
</pre>
<ul style={{ fontSize: '14px', color: '#666' }}>
<li>style={'{object}'}</li>
<li>camelCase properties</li>
<li>className attribute</li>
</ul>
</div>
</div>
</div>
);
}
// ==========================================
// EXAMPLE 2: Common Properties Reference
// ==========================================
function CSSPropertiesReference() {
const [search, setSearch] = React.useState('');
const properties = [
{ css: 'color', jsx: 'color', example: "'red'" },
{ css: 'background-color', jsx: 'backgroundColor', example: "'#264653'" },
{ css: 'font-size', jsx: 'fontSize', example: "'16px' or 16" },
{ css: 'font-weight', jsx: 'fontWeight', example: "'bold' or 700" },
{ css: 'text-align', jsx: 'textAlign', example: "'center'" },
{ css: 'margin', jsx: 'margin', example: "'20px'" },
{ css: 'margin-top', jsx: 'marginTop', example: "'10px'" },
{ css: 'padding', jsx: 'padding', example: "'15px'" },
{ css: 'border', jsx: 'border', example: "'1px solid black'" },
{ css: 'border-radius', jsx: 'borderRadius', example: "'8px'" },
{ css: 'width', jsx: 'width', example: "'100%' or 200" },
{ css: 'height', jsx: 'height', example: "'50vh'" },
{ css: 'display', jsx: 'display', example: "'flex'" },
{ css: 'flex-direction', jsx: 'flexDirection', example: "'column'" },
{ css: 'justify-content', jsx: 'justifyContent', example: "'center'" },
{ css: 'align-items', jsx: 'alignItems', example: "'center'" },
{ css: 'position', jsx: 'position', example: "'relative'" },
{ css: 'z-index', jsx: 'zIndex', example: '10' },
{ css: 'opacity', jsx: 'opacity', example: '0.8' },
{ css: 'cursor', jsx: 'cursor', example: "'pointer'" },
{ css: 'transition', jsx: 'transition', example: "'all 0.3s'" },
{ css: 'transform', jsx: 'transform', example: "'scale(1.1)'" },
{ css: 'box-shadow', jsx: 'boxShadow', example: "'0 2px 4px rgba(0,0,0,0.1)'" },
{ css: 'text-transform', jsx: 'textTransform', example: "'uppercase'" }
];
const filtered = properties.filter(p =>
p.css.includes(search.toLowerCase()) ||
p.jsx.includes(search.toLowerCase())
);
return (
<div style={{ padding: '30px' }}>
<h2>📋 CSS to JSX Property Converter</h2>
<input
type="text"
placeholder="Search properties..."
value={search}
onChange={e => setSearch(e.target.value)}
style={{
width: '100%',
padding: '12px',
fontSize: '16px',
marginBottom: '20px',
borderRadius: '8px',
border: '2px solid #ddd'
}}
/>
<div style={{
display: 'grid',
gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))',
gap: '15px'
}}>
{filtered.map(prop => (
<div
key={prop.css}
style={{
padding: '15px',
backgroundColor: '#f8f9fa',
borderRadius: '8px',
border: '2px solid #e9ecef'
}}
>
<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '8px' }}>
<code style={{ color: '#e76f51', fontSize: '14px' }}>{prop.css}</code>
<span style={{ color: '#666' }}>→</span>
<code style={{ color: '#2a9d8f', fontSize: '14px', fontWeight: 'bold' }}>{prop.jsx}</code>
</div>
<code style={{
display: 'block',
backgroundColor: 'white',
padding: '8px',
borderRadius: '4px',
fontSize: '13px',
color: '#666'
}}>
{prop.example}
</code>
</div>
))}
</div>
</div>
);
}
// ==========================================
// EXAMPLE 3: Interactive Style Playground
// ==========================================
function StylePlayground() {
const [styles, setStyles] = React.useState({
color: '#264653',
backgroundColor: '#e9c46a',
fontSize: 24,
padding: 20,
borderRadius: 8,
borderWidth: 2,
borderColor: '#264653',
textAlign: 'center'
});
const updateStyle = (property, value) => {
setStyles(prev => ({ ...prev, [property]: value }));
};
const codeString = `<div style={{
color: '${styles.color}',
backgroundColor: '${styles.backgroundColor}',
fontSize: '${styles.fontSize}px',
padding: '${styles.padding}px',
borderRadius: '${styles.borderRadius}px',
border: '${styles.borderWidth}px solid ${styles.borderColor}',
textAlign: '${styles.textAlign}'
}}>
Hello React!
</div>`;
return (
<div style={{ padding: '30px', maxWidth: '900px', margin: '0 auto' }}>
<h2>🎮 Interactive Style Playground</h2>
<p>Adjust the sliders and see the JSX code update!</p>
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '30px' }}>
<div>
<h3>Controls</h3>
<div style={{ display: 'grid', gap: '15px' }}>
<Control
label="Text Color"
type="color"
value={styles.color}
onChange={v => updateStyle('color', v)}
/>
<Control
label="Background"
type="color"
value={styles.backgroundColor}
onChange={v => updateStyle('backgroundColor', v)}
/>
<Control
label="Font Size"
type="range"
min="12"
max="48"
value={styles.fontSize}
onChange={v => updateStyle('fontSize', parseInt(v))}
/>
<Control
label="Padding"
type="range"
min="0"
max="50"
value={styles.padding}
onChange={v => updateStyle('padding', parseInt(v))}
/>
<Control
label="Border Radius"
type="range"
min="0"
max="30"
value={styles.borderRadius}
onChange={v => updateStyle('borderRadius', parseInt(v))}
/>
<Control
label="Border Width"
type="range"
min="0"
max="10"
value={styles.borderWidth}
onChange={v => updateStyle('borderWidth', parseInt(v))}
/>
<Control
label="Border Color"
type="color"
value={styles.borderColor}
onChange={v => updateStyle('borderColor', v)}
/>
</div>
</div>
<div>
<h3>Preview</h3>
<div style={{ marginBottom: '20px' }}>
<div style={styles}>
Hello React!
</div>
</div>
<h3>Generated Code</h3>
<pre style={{
background: '#1e1e1e',
color: '#d4d4d4',
padding: '20px',
borderRadius: '8px',
fontSize: '14px',
overflow: 'auto'
}}>
{codeString}
</pre>
</div>
</div>
</div>
);
}
function Control({ label, type, value, onChange, min, max }) {
return (
<div>
<label style={{ display: 'block', marginBottom: '5px', fontWeight: 'bold' }}>
{label}: {type === 'color' ? value : `${value}${type === 'range' ? (label.includes('Size') ? 'px' : 'px') : ''}`}
</label>
<input
type={type}
min={min}
max={max}
value={value}
onChange={e => onChange(e.target.value)}
style={{ width: '100%' }}
/>
</div>
);
}
// ==========================================
// MAIN APP
// ==========================================
function StylingMasterClass() {
const [activeSection, setActiveSection] = React.useState('comparison');
const sections = {
comparison: { title: 'Methods Comparison', component: <StyleComparisonDemo /> },
reference: { title: 'Property Reference', component: <CSSPropertiesReference /> },
playground: { title: 'Interactive Playground', component: <StylePlayground /> }
};
return (
<div style={{ fontFamily: 'Arial, sans-serif', background: '#f5f5f5', minHeight: '100vh' }}>
<header style={{ background: '#264653', color: 'white', padding: '40px', textAlign: 'center' }}>
<h1 style={{ margin: '0 0 10px 0' }}>🎨 React Styling Master Class</h1>
<p style={{ margin: 0, opacity: 0.9 }}>From Inline Styles to External CSS</p>
</header>
<nav style={{
background: 'white',
padding: '20px',
display: 'flex',
justifyContent: 'center',
gap: '15px',
borderBottom: '2px solid #e0e0e0',
flexWrap: 'wrap'
}}>
{Object.entries(sections).map(([key, { title }]) => (
<button
key={key}
onClick={() => setActiveSection(key)}
style={{
padding: '12px 24px',
fontSize: '16px',
border: 'none',
borderRadius: '8px',
cursor: 'pointer',
backgroundColor: activeSection === key ? '#e76f51' : '#e9ecef',
color: activeSection === key ? 'white' : '#264653',
fontWeight: activeSection === key ? 'bold' : 'normal',
transition: 'all 0.2s'
}}
>
{title}
</button>
))}
</nav>
<main style={{ padding: '20px' }}>
{sections[activeSection].component}
</main>
</div>
);
}
export default StylingMasterClass;
🧠 Memory Aids for Poor Logic Thinking
Visual JSX Styling Rules Card (Print This!)
┌─────────────────────────────────────────────────┐
│ JSX STYLING - THE ESSENTIAL RULES │
│ │
│ RULE 1: Use {{ }} for styles │
│ ┌─────────────────────────────────────┐ │
│ │ HTML: style="color: red" │ │
│ │ JSX: style={{ color: 'red' }} │ │
│ │ ↑ ↑ │ │
│ │ outer inner │ │
│ │ braces braces │ │
│ │ (JS) (object) │ │
│ └─────────────────────────────────────┘ │
│ │
│ RULE 2: Use camelCase for properties │
│ ┌─────────────────────────────────────┐ │
│ │ CSS: font-size │ │
│ │ JSX: fontSize │ │
│ │ background-color │ │
│ │ JSX: backgroundColor │ │
│ │ border-radius │ │
│ │ JSX: borderRadius │ │
│ └─────────────────────────────────────┘ │
│ │
│ RULE 3: Use className, not class │
│ ┌─────────────────────────────────────┐ │
│ │ HTML: <div class="container"> │ │
│ │ JSX: <div className="container"> │ │
│ │ ↑ │ │
│ │ "class" is reserved │ │
│ │ in JavaScript! │ │
│ └─────────────────────────────────────┘ │
│ │
│ RULE 4: Values are strings │
│ ┌─────────────────────────────────────┐ │
│ │ ❌ { fontSize: 16 } (risky) │ │
│ │ ✅ { fontSize: '16px' } (safe) │ │
│ │ ✅ { fontSize: 16 + 'px' } │ │
│ └─────────────────────────────────────┘ │
└─────────────────────────────────────────────────┘
Inline vs External CSS Decision Tree
┌─────────────────────────────────────────────────┐
│ WHICH STYLING METHOD TO USE? │
│ │
│ Do you need dynamic values │
│ (props, state, calculations)? │
│ ↓ YES │
│ Use INLINE STYLES │
│ Example: color based on status │
│ style={{ color: isOpen ? 'green' : 'red' }}│
│ │
│ ↓ NO │
│ Is this a large application? │
│ ↓ YES │
│ Use CSS MODULES or STYLED COMPONENTS │
│ (scoped, maintainable) │
│ │
│ ↓ NO │
│ Use EXTERNAL CSS │
│ • Import CSS file │
│ • Use className │
│ • Good for small-medium apps │
│ │
│ QUICK REFERENCE: │
│ ┌─────────────────┬─────────────────┐ │
│ │ Inline Styles │ External CSS │ │
│ ├─────────────────┼─────────────────┤ │
│ │ Dynamic values │ Static styles │ │
│ │ Quick prototype │ Production app │ │
│ │ Small component │ Many components │ │
│ │ No CSS file │ Separate file │ │
│ └─────────────────┴─────────────────┘ │
└─────────────────────────────────────────────────┘
Common Mistakes Visual
┌─────────────────────────────────────────────────┐
│ COMMON STYLING MISTAKES (And Fixes) │
│ │
│ ❌ <div style="color: red"> │
│ ↑ String instead of object │
│ ✅ <div style={{ color: 'red' }}> │
│ │
│ ❌ <div style={{ color: red }}> │
│ ↑ Variable 'red' doesn't exist │
│ ✅ <div style={{ color: 'red' }}> │
│ ↑ String 'red' │
│ │
│ ❌ <div style={{ font-size: '16px' }}> │
│ ↑ Kebab-case (CSS syntax) │
│ ✅ <div style={{ fontSize: '16px' }}> │
│ ↑ camelCase (JS syntax) │
│ │
│ ❌ <div class="container"> │
│ ↑ HTML attribute │
│ ✅ <div className="container"> │
│ ↑ JSX attribute │
│ │
│ ❌ <div style={ color: 'red' }> │
│ ↑ Single braces (JS expression) │
│ ✅ <div style={{ color: 'red' }}> │
│ ↑ Double braces (object inside JS) │
│ │
│ ❌ { fontSize: 16px } │
│ ↑ No quotes around value │
│ ✅ { fontSize: '16px' } │
│ ↑ Quotes make it a string │
└─────────────────────────────────────────────────┘
Color Coding Guide
// 🔵 JSX tags
// 🟡 style attribute and objects
// 🟢 CSS properties (camelCase)
// 🔴 CSS values (strings)
// 🟣 className attribute
🔵<div🔵 🟣className🟣={🔴"container"🔴}🔵>🔵
🔵<h1🔵 🟡style🟡={🟡{🟡
🟢color🟡: 🔴'red'🔴, // 🟢 property: 🔴 value
🟢fontSize🟡: 🔴'32px'🔴, // 🟢 camelCase!
🟢backgroundColor🟡: 🔴'#f0f0f0'🔴,
🟢textAlign🟡: 🔴'center'🔴,
🟢padding🟡: 🔴'20px'🔴,
🟢borderRadius🟡: 🔴'8px'🔴
🟡}🟡}🔵>🔵
Hello World
🔵</h1>🔵
🔵</div>🔵
// 🔵 = HTML/JSX structure
// 🟡 = Style attribute with object
// 🟢 = CSS property names (camelCase in JSX)
// 🔴 = CSS values (always strings in quotes)
// 🟣 = className for CSS classes
// Remember:
// style={ ← Single = JSX expression
// { ← Double = JavaScript object
// prop: 'value'
// }
// }
🎓 Practice Exercises
Exercise 1: Fix the Styles
This code has 5 styling mistakes. Find and fix them:
function BrokenStyles() {
return (
<div class="card">
<h1 style="color: blue; font-size: 24px;">
Title
</h1>
<p style={{ text-color: 'red' }}>
Content
</p>
<button style={{ background-color: 'green' }}>
Click
</button>
</div>
);
}
Solution:
function FixedStyles() {
return (
<div className="card"> {/* class → className */}
<h1 style={{ color: 'blue', fontSize: '24px' }}> {/* object not string, camelCase */}
Title
</h1>
<p style={{ color: 'red' }}> {/* text-color → color */}
Content
</p>
<button style={{ backgroundColor: 'green' }}> {/* background-color → backgroundColor */}
Click
</button>
</div>
);
}
Exercise 2: Create a Styled Card
Create a card component with inline styles:
// TODO: Create a card with:
// - Border
// - Padding
// - Border radius
// - Shadow
// - Different text colors for title and content
function Card({ title, content }) {
// TODO: Define styles object
return (
<div>
{/* TODO: Apply styles */}
</div>
);
}
Solution:
function Card({ title, content }) {
const cardStyle = {
border: '1px solid #ddd',
padding: '20px',
borderRadius: '8px',
boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
backgroundColor: 'white'
};
const titleStyle = {
color: '#264653',
fontSize: '24px',
marginBottom: '10px'
};
const contentStyle = {
color: '#666',
lineHeight: '1.6'
};
return (
<div style={cardStyle}>
<h2 style={titleStyle}>{title}</h2>
<p style={contentStyle}>{content}</p>
</div>
);
}
Exercise 3: Dynamic Styles
Create a button that changes color based on state:
function DynamicButton() {
const [isActive, setIsActive] = React.useState(false);
// TODO: Create style that changes based on isActive
// Active: green background
// Inactive: gray background
return (
<button onClick={() => setIsActive(!isActive)}>
{isActive ? 'Active' : 'Inactive'}
</button>
);
}
Solution:
function DynamicButton() {
const [isActive, setIsActive] = React.useState(false);
const buttonStyle = {
padding: '10px 20px',
fontSize: '16px',
border: 'none',
borderRadius: '5px',
cursor: 'pointer',
backgroundColor: isActive ? '#2a9d8f' : '#e0e0e0',
color: isActive ? 'white' : '#666'
};
return (
<button
style={buttonStyle}
onClick={() => setIsActive(!isActive)}
>
{isActive ? 'Active' : 'Inactive'}
</button>
);
}
💡 Key Takeaways
| Aspect | HTML | JSX |
|--------|------|-----|
| style | style="color: red" | style={{ color: 'red' }} |
| Properties | font-size | fontSize (camelCase) |
| Values | No quotes needed | Must be strings in quotes |
| class | class="btn" | className="btn" |
| External CSS | <link> tag | import './file.css' |
React Styling Options:
- Inline styles - Quick, dynamic, but verbose
- External CSS - Traditional, good for small apps
- CSS Modules - Scoped styles (learn later)
- Styled Components - CSS in JS (learn later)
- Tailwind CSS - Utility classes (learn later)
One Sentence Summary:
> "In React, use style={{ camelCaseProperty: 'value' }} with double braces for inline styles, always use className instead of class for CSS classes, convert all CSS properties to camelCase, and remember that style values must be strings in quotes!"