React.js and Next.js Mastering Course

Session 06

1. Understanding JSX: JavaScript Syntax Extension

   • Introduction to JSX - Syntax Extension
   • Writing Markup with JSX in Next.js

2. Configure TailwindCSS with Next.js

   • Introduction to Tailwind CSS
   • Setting up Tailwind CSS in Next.js

3. Setting Up ShadCN with Next.js

   • Setting up shadcn/ui to the Next.js project
   • Using ShadCN with Tailwind CSS v4
   • Define a proper theme for the application
   • Building responsive designs with Tailwind CSS and ShadCN

4. Creating Our First Static Page with Next.js

   • What is layout.jsx and page.jsx ?
   • Introduction to our Home page structure
     • Header: <header>...</header>
     • Main: <main>...</main>
     • Footer: <footer>...</footer>

5. Creating React Components

   • Creating our First React Component (Main Nav Bar)
   • Creating reusable components
   • Reusing the Main Nav Bar component in the Root Layout

6. Next.js Custom Tags

   • Using <Link> tag from next/link
   • Using <Image> tag from next/image