From "What is React?" to building real pages with components, JSX, props and styling.
4modules
40practice examples
~14hclass time
100%live code
Keys: → next ← back M menu L Code Lab F fullscreen
M1
Meet React & Project Setup
Components, SPA, Virtual DOM, Vite setup
M2
JSX in Depth
Rules, expressions, styles, fragments
M3
Components & Props
Reusable components that take data
M4
Styling React Apps
CSS files, modules, themes, animations
BrainBit Infotech, Ranchi | Trainer: Nandan Kumar
01
MODULE 1 • PART 1
Meet React & Project Setup
React is a JavaScript library for building user interfaces (the screens you see and click) from small, reusable pieces called components.
What React is and why companies use it
Components: the LEGO idea
Single Page Apps vs normal websites
The Virtual DOM (how React is fast)
Install Node.js, VS Code and Vite
Create and run your first React app
Every project folder explained
How main.jsx puts App on the screen
YOU WILL BUILD:Welcome bannerDashboard headerContact cardProduct gridCoaching landing pageStudent ID card
🧩
App.jsx
function Welcome() {
return <h1>Hello, Ranchi!</h1>;
}
A component is just a function that returns UI
● 5 Easy ● 3 Medium ● 2 Hard each with live code
Complete React Course | BrainBit Infotech, Ranchi
M1Starting from zero
What is a User Interface (UI)?
A User Interface (UI) is everything you can see and touch in an app: buttons, text, images, search boxes, menus and cards.
🖱
You click
a button like "Add to cart"
⚡
The app reacts
the cart count changes from 1 to 2
🎨
Screen updates
only that small part changes
Key ideaReact is a JavaScript library made by Meta (Facebook) in 2013. Its only job: help you build UIs that react to what the user does. That is where the name comes from!
Library = a box of ready-made code you use in your project. React is free and open source.
You describe WHAT the screen should look like for any count. React updates the page for you.
Simple analogyPlain JS is like giving an auto driver turn-by-turn directions. React is like saying "Take me to Firayalal Chowk". You say the destination, React finds the way.
A component is a JavaScript function that returns what should appear on screen. The HTML-like code inside return ( ... ) is called JSX. export default lets other files (like main.jsx) import and use it.
App.jsx
LIVELive Preview
Console
✍ Try it Change name to your own name. Change {2 + 3} to {10 * 12}. Press Edit in Lab to try it.
A card groups related information. Every business website has a contact card like this. We store details in a JavaScript object and show its values with {info.phone}.
App.jsxApp.css
LIVELive Preview
Console
✍ Try it yourself Add a website field to the info object and show it on the card with a 🌐 icon.
Add website: 'www.brainbit-teaching.com' in the object, then <p>🌐 {info.website}</p>.
Almost every website has the same skeleton. We make Header, Main and Footer components, and App arranges them. This is how real projects are organised.
App.jsxApp.css
LIVELive Preview
Console
✍ Try it yourself Add a Navbar component with links Home | About | Contact, and place it between Header and Main.
Create function Navbar() { return <nav>Home | About | Contact</nav> } and use <Navbar /> inside App.
Real apps calculate values before showing them. We take the course fee, subtract a discount, add 18% GST and show a neat bill. toLocaleString('en-IN') adds Indian commas (1,23,456).
App.jsxApp.css
LIVELive Preview
Console
✍ Try it yourself Add a line "You save Rs X" under the total, and change the discount to 20%. Check that all numbers update automatically.
You already have discount. Add <p>You save {rupee(discount)}</p>.
●● Medium💼 Real project: E-commerce product listing
Shops have hundreds of products, so we never write each card by hand. We keep products in an array and use .map() to turn each item into a card. (You will master map and key in Module 6.)
App.jsxApp.css
LIVELive Preview
Console
✍ Try it yourself Add 2 more products (Terracotta Pot Rs 599 and Lac Bangles Rs 249). Notice you do NOT change the JSX at all!
Just add two more objects to the array with new id values 5 and 6.
●●● Hard💼 Real project: Complete marketing homepage
A real homepage built from 6 components in one file. Each section is small and easy to change. Data like stats and courses live in arrays at the top, the same way real projects keep content separate from layout.
App.jsxApp.css
LIVELive Preview
Console
✍ Try it yourself Move Navbar into its own file Navbar.jsx (use the + file button in the Lab), export it and import it in App.
In Navbar.jsx write export default function Navbar() {...}. In App.jsx add import Navbar from './Navbar'; and delete the old function.
●●● Hard💼 Real project: School ERP / ID card printing
We turn a student object into a printable ID card. JavaScript computes the initials avatar, the validity date (1 year from today) and a decorative barcode from the roll number digits.
App.jsxApp.css
LIVELive Preview
Console
✍ Try it yourself Add a photoColor field to the student object and use it as the avatar background with an inline style.
Use style={{ background: student.photoColor }} on the avatar div.
In real projectsFree tool: search "HTML to JSX converter" online, or paste HTML in VS Code and fix the red underlines one by one.
Complete React Course | Part 1 | JSX in Depth
M2Live demo
Curly braces { }: windows into JavaScript
Anything inside { } is JavaScript: variables, maths, function calls, ternary ? :. React shows the result. You can NOT put an if statement or a for loop directly inside { }. Use ternary or map instead.
App.jsx
LIVELive Preview
Console
✍ Try it Change marks to 480 and watch Percentage and Grade change by themselves.
Complete React Course | Part 1 | JSX in Depth
M2Live demo
Attributes & the style object
Attributes can be plain text "..." or JavaScript {...}. The style attribute takes an object: outer braces = "JavaScript here", inner braces = the object. CSS names become camelCase: background-color → backgroundColor, font-size → fontSize. Numbers mean pixels.
App.jsx
LIVELive Preview
Console
✍ Try it Change progress to 35 and brandColor to "crimson".
Complete React Course | Part 1 | JSX in Depth
M2Animated explainer
Fragments: group without an extra box
Wrong.jsx
function Row() {
return (
<div> {/* extra box! */}
<td>Aman</td>
<td>92</td>
</div>
);
}
<tr> <div> ← NOT allowed inside a row! <td>Aman</td><td>92</td> </div> </tr> ❌ Table layout breaks
Right.jsx
function Row() {
return (
<> {/* Fragment */}
<td>Aman</td>
<td>92</td>
</>
);
}
<tr> <td>Aman</td> <td>92</td> </tr> ✔ Fragment leaves NO tag in the HTML
Complete React Course | Part 1 | JSX in Depth
M2Pictures
Images in JSX
Option 1: import from src/assets
App.jsx
import logo from './assets/logo.png';
function Navbar() {
return <img src={logo} alt="BrainBit Infotech logo" width={120} />;
}
Option 2: put it in the public folder
App.jsx
// file is at public/images/hundru.jpg
<img src="/images/hundru.jpg" alt="Hundru Falls" />
🖼
import (recommended)
Vite checks the file exists and gives it a unique name for fast caching. Use for logos and icons.
📁
public folder
Files are copied as they are. Good for big galleries or files whose names you build in code.
♿
Always write alt text
alt is read aloud by screen readers for blind users and shows if the image fails. React even warns you without it.
🌐
Online images
Use a full URL: src="https://...". In real apps image URLs usually come from an API.
Complete React Course | Part 1 | JSX in Depth
M2Debugging
Common JSX errors and how to fix them
Error message you see
What it means
Fix
Adjacent JSX elements must be wrapped in an enclosing tag
You returned two tags side by side
Wrap them in <div> or <></>
Expected corresponding JSX closing tag for <img>
A tag is not closed
Write <img />, <br />, <input />
Invalid DOM property `class`. Did you mean `className`?
HTML attribute used
Use className, htmlFor
Objects are not valid as a React child
You put an object inside { }
Show a property: {user.name}, not {user}
The style prop expects a mapping... not a string
style="..." used
Use style={{ color: 'red' }}
X is not defined
Variable or component not created/imported
Check spelling and the import line
Key ideaRed error text is your friend! Read the first line slowly, then look at the file name and line number it points to.
Complete React Course | Part 1 | JSX in Depth
M2Practice 1 of 10 • Easy
Example 1: Convert Old HTML to JSX
● Easy💼 Real project: Moving an old website to React
Many companies move old HTML sites to React. Open the old-page.html tab to see the original, then compare with App.jsx: class→className, for→htmlFor, closed tags, style object.
App.jsxold-page.htmllogo.js
LIVELive Preview
Console
✍ Try it yourself Convert this HTML too and add it below the button: <select class="pick"><option>React<option>Python</select>
className="pick" and close every option: <option>React</option>.
Complete React Course | Part 1 | JSX in Depth
M2Practice 2 of 10 • Easy
Example 2: Student Marks Card
● Easy💼 Real project: School result portal
Data lives in a JavaScript object; JSX shows it with { }. We calculate total and percentage inside the component so they are always correct.
App.jsx
LIVELive Preview
Console
✍ Try it yourself Add a Computer subject with 99 marks. Total and percentage should update; add a line to show it too.
Add Computer: 99 to marks and <p>Computer: {result.marks.Computer}</p>.
Complete React Course | Part 1 | JSX in Depth
M2Practice 3 of 10 • Easy
Example 3: Payment Status Badges
● Easy💼 Real project: Fee management / order lists
A style object can be chosen from data. We keep colours for each status in an object and pick the right one with colors[status].
App.jsx
LIVELive Preview
Console
✍ Try it yourself Add a 4th status "Waived" with grey colours and use it for a new student.
Add Waived: { background: '#e9ecef', color: '#495057' } to colors.
Complete React Course | Part 1 | JSX in Depth
M2Practice 4 of 10 • Easy
Example 4: Jharkhand Tourist Gallery
● Easy💼 Real project: Travel / tourism websites
Images use <img src={...} alt="..." />. Here images.js creates small picture files in code (in a real project you would import .jpg files from src/assets).
App.jsximages.js
LIVELive Preview
Console
✍ Try it yourself Add a 5th place: Baidyanath Dham, Deoghar with emoji 🛕. Export it from images.js and show it.
In images.js: export const deoghar = art('#ffc9c9', '#c92a2a', '🛕'); then import and add a figure.
Complete React Course | Part 1 | JSX in Depth
M2Practice 5 of 10 • Easy
Example 5: Result Table with Fragments
● Easy💼 Real project: Report cards & admin tables
StudentRows returns two <tr> rows (details + remark). A <div> would break the table, so we wrap them in a Fragment<>...</>.
App.jsxApp.css
LIVELive Preview
Console
✍ Try it yourself Replace <> with <div> and look at the console warning and the broken table. Then change it back.
React warns: "<div> cannot appear as a child of <tbody>".
Complete React Course | Part 1 | JSX in Depth
M2Practice 6 of 10 • Medium
Example 6: Online / Offline Chat Indicator
●● Medium💼 Real project: Chat apps (WhatsApp-style status)
The ternary operatorcondition ? A : B picks what to show inside JSX. One isOnline value controls the dot colour, the text and the button label.
App.jsxApp.css
LIVELive Preview
Console
✍ Try it yourself Make online names green and offline names grey using a ternary inside style.
A template literal builds the className: {`link ${page === current ? 'active' : ''}`}. The current page gets the extra active class and is highlighted.
App.jsxApp.css
LIVELive Preview
Console
✍ Try it yourself Change current to "Contact". Then add a new page "Blog" to the array.
Only two small edits, the JSX stays the same.
Complete React Course | Part 1 | JSX in Depth
M2Practice 8 of 10 • Medium
Example 8: Weekly Class Timetable
●● Medium💼 Real project: School / coaching timetable
Nested arrays become a table: the outer map makes rows (days), the inner map makes cells (periods). A ternary highlights the "Lab" periods.
App.jsxApp.css
LIVELive Preview
Console
✍ Try it yourself Highlight React periods in light blue too, using a second check in the className.
className={p === 'Lab' ? 'lab' : p === 'React' ? 'react' : ''} and add a .react CSS rule.
Complete React Course | Part 1 | JSX in Depth
M2Practice 9 of 10 • Hard
Example 9: Shop Invoice in Rupees
●●● Hard💼 Real project: Billing software for local shops
A real billing screen: an items array, a helper to format Indian Rupees with Intl.NumberFormat, per-line totals, subtotal, GST and grand total, all calculated in JavaScript and displayed with JSX.
App.jsxApp.css
LIVELive Preview
Console
✍ Try it yourself Add a discount of 5% when the subtotal is more than Rs 2,000, and show the discount line only in that case.
One data object drives the whole look: background gradient, emoji and advice all change with the temperature. A small getTheme() function returns everything the JSX needs.
App.jsx
LIVELive Preview
Console
✍ Try it yourself Try temperatures 40, 25, 15 and 5. Then add a "Feels like" line that is temp + 3 when humidity is above 60.
Complete React Course | Part 1 | Components & Props
M3Live demo
Props in action + destructuring
Instead of writing props.name again and again, we destructure: function Card({ name, city }) pulls the values out of the props object directly. This is how professionals write it. Text props use quotes "...". Numbers, booleans, arrays and objects use braces {...}.
App.jsx
LIVELive Preview
Console
✍ Try it Add a third student card for yourself with your own city and marks.
Complete React Course | Part 1 | Components & Props
M3Golden rule
Props are READ-ONLY
Wrong.jsx
function Price({ amount }) {
amount = amount * 2; // NEVER change a prop!
return <p>Rs {amount}</p>;
}
Right.jsx
function Price({ amount }) {
const doubled = amount * 2; // make a new variable
return <p>Rs {doubled}</p>;
}
🎁
Props are a gift
You can USE a gift, but you cannot change what the sender packed. The parent owns the data.
🧮
Pure components
Same props in = same UI out, every time. This makes React apps predictable and easy to debug.
🔄
Need data that changes?
That is state (Module 5). Props come from outside, state lives inside.
Complete React Course | Part 1 | Components & Props
M3Live demo
Default values & any type of prop
Give a prop a default value right in the destructuring: size = 48. If the parent does not send it, the default is used. Props can be any JavaScript value: string, number, boolean, array, object, even a function.
App.jsx
LIVELive Preview
Console
✍ Try it Add a 4th Badge with color="crimson" and only the label prop changed.
Complete React Course | Part 1 | Components & Props
M3Live demo
The special children prop
Whatever you put between the opening and closing tags of a component arrives as children. This lets you build wrappers: cards, modals, layouts, sections, where the outside stays the same and the inside changes.
App.jsx
LIVELive Preview
Console
✍ Try it Add a third Panel titled "Fees" that contains a table or a bold line of text.
Complete React Course | Part 1 | Components & Props
M3Organising code
Components in separate files
📁 src/
📁 components/reusable pieces
📄 Navbar.jsxexport default
📄 CourseCard.jsx
📄 Button.jsxmany exports
📄 App.jsximports them
📄 main.jsx
In real projectsOne component per file, file name = component name. CourseCard.jsx exports CourseCard.
App.jsx
// components/CourseCard.jsx (default export: ONE main thing)
export default function CourseCard({ title }) {
return <div className="card">{title}</div>;
}
// components/Button.jsx (named exports: many things)
export function PrimaryButton({ text }) { /* ... */ }
export function DangerButton({ text }) { /* ... */ }
// App.jsx
import CourseCard from './components/CourseCard';
import { PrimaryButton, DangerButton } from './components/Button';
Export type
How to import
export default X
import X from './X' (any name works)
export function Y
import { Y } from './Y' (exact name, curly braces)
Complete React Course | Part 1 | Components & Props
Complete React Course | Part 1 | Components & Props
M3Practice 1 of 10 • Easy
Example 1: Greeting with a name Prop
● Easy💼 Real project: Personalised welcome messages
The simplest prop: a name. The same Greeting component greets three different people because each tag passes a different name.
App.jsx
LIVELive Preview
Console
✍ Try it yourself Add a second prop course and show "Welcome to the React course" under each greeting.
function Greeting({ name, course }) and pass course="React" from App.
Complete React Course | Part 1 | Components & Props
M3Practice 2 of 10 • Easy
Example 2: Reusable Course Card
● Easy💼 Real project: Course catalogue / product cards
One CourseCard takes title, duration, fee and icon as props. App uses it three times. To change the design of all cards, edit only one place.
App.jsxCourseCard.jsxCourseCard.css
LIVELive Preview
Console
✍ Try it yourself Add a seatsLeft prop and show "Only N seats left!" in red on each card.
Pass seatsLeft={5} and show <p style={{color:'red'}}>Only {seatsLeft} seats left!</p>.
Complete React Course | Part 1 | Components & Props
M3Practice 3 of 10 • Easy
Example 3: Avatar with Initials Fallback
● Easy💼 Real project: Profiles, comments, chat
If a user has a photo, show it. If not, show their initials in a coloured circle (like Gmail). size has a default value of 56.
App.jsx
LIVELive Preview
Console
✍ Try it yourself Add a color prop with default "#0ca678" so each avatar can have its own background colour.
Destructure color = '#0ca678' and use background: color.
Complete React Course | Part 1 | Components & Props
M3Practice 4 of 10 • Easy
Example 4: Button Component with Variants
● Easy💼 Real project: Design systems in every company
Companies build ONE Button and reuse it everywhere. A variant prop picks the colour, size picks the padding, and children is the label.
App.jsxApp.css
LIVELive Preview
Console
✍ Try it yourself Create a new variant "warning" (yellow background, dark text) and use it for a "Pending" button.
Add a .btn-warning CSS rule. No change needed in the component!
Complete React Course | Part 1 | Components & Props
M3Practice 5 of 10 • Easy
Example 5: Card Wrapper with children
● Easy💼 Real project: Dashboard widgets
A Widget provides the frame (title, icon, border). Whatever goes inside it, a number, a list or a chart, comes in as children.
App.jsxApp.css
LIVELive Preview
Console
✍ Try it yourself Add a 4th Widget "Pending fees" showing 23 students in red, with a button inside saying "Send reminder".
Put a <div className="big" style={{color:'red'}}>23</div> and a button between the Widget tags.
Complete React Course | Part 1 | Components & Props
M3Practice 6 of 10 • Medium
Example 6: Product List to Product Cards
●● Medium💼 Real project: E-commerce listing page
ProductList receives the whole array as a prop and maps each item to a ProductCard, passing the object as a product prop. This parent/child pattern is in every shopping site.
App.jsxProductList.jsxProductCard.jsx
LIVELive Preview
Console
✍ Try it yourself Add a discount field to one product and show the old price with a line through it in ProductCard.
Use {product.discount ? <s>Rs {price}</s> : null} and show the new price next to it.
Complete React Course | Part 1 | Components & Props
M3Practice 7 of 10 • Medium
Example 7: Profile Page in Multiple Files
●● Medium💼 Real project: Social network / LinkedIn-style profile
Real projects split a page into many files. ProfilePage imports Avatar, Bio and Stats and passes each one only the props it needs. Click the tabs to see every file.
App.jsxProfilePage.jsxAvatar.jsxBio.jsxStats.jsx
LIVELive Preview
Console
✍ Try it yourself Create a new file SkillList.jsx that shows a list of skills, add skills to the user object, and use it in ProfilePage.
In the Lab click + file. Pass skills={user.skills} and map them to <span> chips.
Complete React Course | Part 1 | Components & Props
M3Practice 8 of 10 • Medium
Example 8: Star Rating from a Number
●● Medium💼 Real project: Reviews on shopping & food apps
Give Stars a number like 3.5 and it draws full, half and empty stars. We build an array of 5 items and decide each star with maths.
App.jsx
LIVELive Preview
Console
✍ Try it yourself Add a reviews prop and show "(1,204 reviews)" after the number in grey.
Complete React Course | Part 1 | Components & Props
M3Practice 9 of 10 • Hard
Example 9: Reusable Data Table
●●● Hard💼 Real project: Admin panels & ERP software
A professional pattern: DataTable knows nothing about students or products. It receives columns (what to show) and rows (data) as props. A column can even pass a render function for custom cells.
App.jsxDataTable.jsx
LIVELive Preview
Console
✍ Try it yourself Reuse the SAME DataTable to show 3 products (name, price, stock) with a different columns array.
Make a products array and productColumns, then render a second <DataTable />.
Complete React Course | Part 1 | Components & Props
M3Practice 10 of 10 • Hard
Example 10: Dashboard Shell Layout
●●● Hard💼 Real project: Admin dashboards (school ERP, CRM)
A layout component system: Shell places a Sidebar, a Topbar and the page children. The sidebar highlights the active item from props. Every admin template on the internet works like this.
App.jsxShell.jsxSidebar.jsxTopbar.jsx
LIVELive Preview
Console
✍ Try it yourself Change active and title to "Fees" and put a small fee summary inside Shell instead of attendance.
Only App.jsx changes. The layout files stay the same: that is the power of props + children.
Complete React Course | Part 1 | Components & Props
M3Check your understanding
Quick Quiz
Click an answer. Wrong answers shake, the right one turns green and explains why.
Q1. Which way do props flow?
✔ Props always go DOWN from parent to child.
Q2. function Card({ title, size = 20 }): what is 20?
✔ If the parent does not pass size, it will be 20.
Q3. Text between <Panel> and </Panel> arrives as...
✔ Anything nested inside a component tag is received as children.
🎯
Your score: 0 / 3 (first try counts)
Answer all 3 questions. Discuss any wrong answer with your partner before moving on.
Complete React Course | Part 1 | Components & Props
M3Module summary
Recap: What you learned
✔Props pass data from parent to child: <Card title="..." />.
✔Destructure props: function Card({ title, fee }).
✔Defaults: { size = 48 }. Props can be any JS value.
✔Props are read-only. Never modify them.
✔children = whatever is nested inside the tag; perfect for wrappers.
✔One component per file; default vs named exports.
🏆
Module 3 complete!
Finish all 10 examples and the "Try it yourself" tasks before moving on.
Practice folder: D:\react-practice\m03
➡ Next up
Module 4: Styling React Apps. Make your components look professional.
Complete React Course | Part 1 | Components & Props
04
MODULE 4 • PART 1
Styling React Apps
Good design makes people trust your app. Learn every popular way to style React components, and when to use each one.
Importing CSS files
Conditional classNames
CSS Modules (no name clashes)
Inline dynamic styles
Tailwind CSS overview
Responsive layouts
Themes with CSS variables
Transitions & animations
YOU WILL BUILD:Notice boardProgress barsStatus chipsAnimated navbarPricing tableLoading skeleton
🎨
App.jsx
<button
className={isActive
? 'btn active'
: 'btn'}>
Save
</button>
● 5 Easy ● 3 Medium ● 2 Hard each with live code
Complete React Course | BrainBit Infotech, Ranchi
M4Big picture
5 ways to style React (overview)
Way
Looks like
Best for
Watch out
1. CSS file
import './App.css' + className="card"
Beginners, small apps
Class names are global, can clash
2. Inline style
style={{ width: pct + '%' }}
Values that change (width, colour from data)
No hover, no media queries
3. CSS Modules
import s from './Card.module.css' + className={s.card}
Medium/large apps
Slightly more typing
4. Tailwind CSS
className="p-4 bg-blue-500 rounded"
Fast building, very popular in jobs
Long class lists, needs setup
5. CSS-in-JS
styled.button`color: red` (styled-components)
Design systems
Extra library, runtime cost
🌟
Start with
CSS files + conditional classNames. Most of this course uses them.
💼
In companies
CSS Modules or Tailwind are the most common choices today.
🧩
UI libraries
MUI, Chakra, shadcn/ui, Ant Design give ready-made styled components.
Complete React Course | Part 1 | Styling React Apps
M4Live demo
Way 1: a CSS file + className
Create Card.css next to your component and import it at the top. Vite adds those styles to the page. Use className to apply classes. Remember: these classes are global. If two files both define .title, they clash. (CSS Modules fix this.)
App.jsxCard.css
LIVELive Preview
Console
✍ Try it Open Card.css and change the shadow colour and border-top colour to blue.
Complete React Course | Part 1 | Styling React Apps
M4Live demo
Conditional classNames
Pick classes from data with a ternary or a template literal. For many conditions, put class names in an array and join(' '). Real projects often use the tiny clsx package: clsx('chip', isPaid && 'paid').
App.jsxApp.css
LIVELive Preview
Console
✍ Try it Make "Practise CSS Grid" urgent and "Pay electricity bill" done.
Complete React Course | Part 1 | Styling React Apps
ResultEvery component gets unique class names automatically. No more clashes, even in a team of 50 developers.
Complete React Course | Part 1 | Styling React Apps
M4Live demo
CSS Modules live
Here two components both use a class called .title but in separate .module.css files. Check the console: each gets a unique, generated name.
App.jsxCard.module.cssBanner.module.css
LIVELive Preview
Console
✍ Try it Add a .subtitle class in Card.module.css and use it with className={cardStyles.subtitle}.
Complete React Course | Part 1 | Styling React Apps
M4Industry favourite
Tailwind CSS: styling with utility classes
App.jsx
// Tailwind: small classes, each does ONE thing
export default function Course() {
return (
<div className="max-w-xs rounded-2xl p-5 shadow-lg bg-white">
<h3 className="text-xl font-bold text-pink-600">
React JS
</h3>
<p className="text-gray-500 text-sm">3 months</p>
<button className="mt-3 w-full rounded-lg bg-pink-600
py-2 text-white hover:bg-pink-700">
Enroll
</button>
</div>
);
}
Class
Means
p-5
padding: 1.25rem
rounded-2xl
big rounded corners
text-pink-600
pink text
hover:bg-pink-700
darker on hover
md:grid-cols-3
3 columns on medium+ screens
In real projectsSetup (Vite): npm install tailwindcss @tailwindcss/vite, add the plugin in vite.config.js, and put @import "tailwindcss"; in index.css. Check tailwindcss.com for the latest steps.
Key ideaLearn normal CSS first (our HTML + CSS course). Tailwind is just a shortcut for the CSS you already know.
Complete React Course | Part 1 | Styling React Apps
M4Live demo
Transitions & animations
CSS transition makes changes smooth (hover effects). CSS @keyframes makes things move on their own. React simply applies the classes, the browser does the animation.
App.jsxApp.css
LIVELive Preview
Console
✍ Try it Change the loader speed to 2s and its colour to teal. Make the "grow" box rotate a little on hover with rotate(3deg).
Complete React Course | Part 1 | Styling React Apps
M4Practice 1 of 10 • Easy
Example 1: Notice Board with a CSS File
● Easy💼 Real project: School / office notice boards
A notice board component styled with a normal CSS file. Notices come from an array; a new flag adds an extra class to highlight fresh notices.
App.jsxNoticeBoard.css
LIVELive Preview
Console
✍ Try it yourself Add a notice "Annual function on 15 April" and give new notices a small "NEW" label using CSS ::after.
Complete React Course | Part 1 | Styling React Apps
M4Practice 2 of 10 • Easy
Example 2: Progress Bars from a Value
● Easy💼 Real project: Course progress / skill bars
The bar width comes from data, so we use an inline style: style={{ width: value + '%' }}. Colour also changes with the value: red, amber or green.
App.jsx
LIVELive Preview
Console
✍ Try it yourself Show a 🎉 emoji after the percentage when value is 100.
<b>{value}%{value === 100 ? ' 🎉' : ''}</b>
Complete React Course | Part 1 | Styling React Apps
M4Practice 3 of 10 • Easy
Example 3: Fee Status Chips
● Easy💼 Real project: Fee management dashboards
Each status maps to a CSS class: className={`chip ${status.toLowerCase()}`}. Adding a new status only needs one new CSS rule.
App.jsxApp.css
LIVELive Preview
Console
✍ Try it yourself Add a status "Partial" with a blue chip for a new student.
Add the row with status: 'Partial' and a .partial CSS rule.
Complete React Course | Part 1 | Styling React Apps
M4Practice 4 of 10 • Easy
Example 4: CSS Module Button
● Easy💼 Real project: Shared component libraries
The button keeps its styles in Button.module.css. Class names become unique, so this button looks the same no matter which page or team uses it.
App.jsxButton.jsxButton.module.css
LIVELive Preview
Console
✍ Try it yourself Add a small boolean prop that adds a .small class (smaller padding and font).
In Button.jsx: {small ? styles.small : ''} inside the template literal.
Complete React Course | Part 1 | Styling React Apps
M4Practice 5 of 10 • Easy
Example 5: Animated Navigation Menu
● Easy💼 Real project: Website headers
Pure CSS animation: each link has an underline that grows from the centre on hover using ::after and transition. The active link keeps its underline.
App.jsxNav.css
LIVELive Preview
Console
✍ Try it yourself Make the underline animate from the LEFT instead of the centre.
Start with left: 0; width: 0, and on hover only change width to 100%.
Complete React Course | Part 1 | Styling React Apps
M4Practice 6 of 10 • Medium
Example 6: Responsive Course Grid
●● Medium💼 Real project: Any listing page on mobile + desktop
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) creates as many columns as fit. On a phone you get 1 column, on a laptop 3 or 4. Click Edit in Lab and resize the window to see it.
App.jsxApp.css
LIVELive Preview
Console
✍ Try it yourself Change minmax(150px, 1fr) to minmax(220px, 1fr). How many columns now?
Bigger minimum = fewer columns fit in the same width.
Complete React Course | Part 1 | Styling React Apps
M4Practice 7 of 10 • Medium
Example 7: Light & Dark Themes with CSS Variables
●● Medium💼 Real project: Dark mode in apps
CSS variables (--bg, --text) hold colours. A data-theme attribute switches which values are used. Here a theme prop renders both versions side by side. (In Module 5 you will add a toggle button.)
App.jsxtheme.css
LIVELive Preview
Console
✍ Try it yourself Add a third theme "sepia" (cream background, brown text) and show a third card.
Complete React Course | Part 1 | Styling React Apps
M4Practice 8 of 10 • Medium
Example 8: SVG Icon Components
●● Medium💼 Real project: Icons in every app
Icons as React components: <Icon name="home" size={28} color="..." />. SVG paths live in one object, and props control size and colour. Libraries like lucide-react and react-icons work exactly like this.
App.jsxIcon.jsx
LIVELive Preview
Console
✍ Try it yourself Add a filled prop: when true, use fill={color} instead of "none".
fill={filled ? color : 'none'}
Complete React Course | Part 1 | Styling React Apps
M4Practice 9 of 10 • Hard
Example 9: SaaS Pricing Table
●●● Hard💼 Real project: Pricing pages of software products
Plans live in an array. The popular plan gets a highlight class, a ribbon and a scale-up effect. Features are listed with ticks. This is exactly how BrainBit Infotech-style SaaS pricing pages are built.
App.jsxPricing.css
LIVELive Preview
Console
✍ Try it yourself Add a yearly price that is 20% cheaper and show it under the monthly price as "or Rs X/year".
Compute Math.round(p.price * 12 * 0.8) inside the map.
Complete React Course | Part 1 | Styling React Apps
M4Practice 10 of 10 • Hard
Example 10: Loading Skeleton & Hover-Lift Cards
●●● Hard💼 Real project: Polished apps (YouTube, LinkedIn feeds)
While data loads, apps show grey skeleton shapes with a moving shine. A loading prop switches between the skeleton and the real card. The real cards lift on hover.
App.jsxApp.css
LIVELive Preview
Console
✍ Try it yourself Add a round "channel avatar" skeleton circle to the loading card, and a real avatar to the real card.
A div with class sk and width: 28px; height: 28px; border-radius: 50%.
Complete React Course | Part 1 | Styling React Apps
M4Check your understanding
Quick Quiz
Click an answer. Wrong answers shake, the right one turns green and explains why.
Q1. Why use CSS Modules?
✔ Vite rewrites each class to a unique name per file.
Q2. When is an inline style the best choice?
✔ Inline styles are perfect for dynamic values; hover and media queries need CSS.
Q3. className={done ? 'task done' : 'task'} does what?
✔ A ternary picks between two class strings.
🎯
Your score: 0 / 3 (first try counts)
Answer all 3 questions. Discuss any wrong answer with your partner before moving on.
Complete React Course | Part 1 | Styling React Apps
M4Module summary
Recap: What you learned
✔Import a CSS file and use className (classes are global).
✔Build conditional classes with ternary, template literals or arrays.
✔CSS Modules (.module.css) give unique class names.
✔Inline style for dynamic values; CSS for hover, media queries, animations.