Skip to main content

Featured

🎉 Day 46 — React Mastery Completed (Final Summary & Congratulations!)

🎉 Day 46 — React Mastery Completed (Final Summary & Congratulations!) Congratulations, developer! 👏 You’ve successfully completed the 45-Day React.js Roadmap — from understanding the fundamentals to mastering advanced concepts like Redux, Routing, Testing, and Deployment. 📘 What You’ve Learned ✅ React basics — Components, JSX, Props, and State ✅ Hooks — useState, useEffect, useRef, useMemo, and Custom Hooks ✅ Context API and Redux Toolkit for global state management ✅ Routing with React Router & Protected Routes ✅ Data fetching using Fetch API, Axios, React Query ✅ Advanced Patterns — Compound Components, Render Props, HOCs ✅ Styling — CSS Modules, Styled Components, Theming ✅ Animations, Accessibility, Testing, and Performance Optimization ✅ Deployment on Vercel, Netlify, or GitHub Pages 🧩 Final Project Ideas Now that you’re done, build real-world apps to polish your skills: 📝 Task ...
Post a Comment
Read more
Labels

🎨 Day 13 — Styling React: CSS Modules

🎨 Day 13 — Styling React: CSS Modules / Inline Styles / Styled-Components

React offers multiple ways to style components — from traditional CSS to advanced styling libraries. Let’s explore three popular approaches.

🔹 1. CSS Modules

/* Button.module.css */
.btn {
  background-color: #1565c0;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
}

/* Button.js */
import styles from './Button.module.css';
function Button() {
  return <button className={styles.btn}>Click Me</button>;
}

🔸 2. Inline Styles

function Box() {
  const style = { backgroundColor: '#bbdefb', padding: '20px', borderRadius: '8px' };
  return <div style={style}>Inline Styled Box</div>;
}

💡 3. Styled-Components

import styled from 'styled-components';

const Button = styled.button`
  background-color: #1565c0;
  color: white;
  padding: 10px 20px;
  border-radius: 8px;
`;

function App() {
  return <Button>Styled Button</Button>;
}

Each method has its pros and cons. CSS Modules are great for isolation, inline styles for dynamic styling, and styled-components for a modern, component-driven approach.

Comments

Post a Comment