React and Next.js Workshop - DevSprint Event with CSE Club

Delivering a workshop at the CSE Club’s DevSprint event, held at ESI ex. INI, was a great experience for sure! We tackled the main and common frontend tasks, focusing on React.js and Next.js, two of the most powerful tools in modern web development.

Workshop Structure

The session was divided into two main parts: React fundamentals and Next.js advanced features.

Part 1: React.js Fundamentals

We explored the core concepts that make React the most popular frontend library:

Component-Based Architecture

• Building reusable UI components
• Component composition and hierarchy
• Props and prop drilling
• Component lifecycle and rendering

State Management

• Local state with useState
• Complex state with useReducer
• State lifting and sharing
• State management best practices

React Hooks Deep Dive

• useState: Managing component state
• useEffect: Side effects and lifecycle
• useContext: Context API for global state
• useRef: DOM references and mutable values
• useMemo & useCallback: Performance optimization
• Custom Hooks: Creating reusable logic

Providing attendees with a solid foundation for building dynamic and interactive UIs.

Part 2: Next.js - The React Framework

We transitioned to Next.js, showcasing its powerful features that enhance the React ecosystem for modern web development.

Server-Side Rendering (SSR)

• What is SSR? Server-rendered pages for better SEO and performance
• getServerSideProps: Fetching data on each request
• Use Cases: Dynamic content, personalized pages
• Benefits: Better SEO, faster initial load, improved UX

Static Site Generation (SSG)

• What is SSG? Pre-rendering pages at build time
• getStaticProps: Fetching data at build time
• getStaticPaths: Dynamic routes with static generation
• Use Cases: Blogs, documentation, marketing pages
• Benefits: Lightning-fast performance, CDN-friendly

Incremental Static Regeneration (ISR)

• What is ISR? Static generation with revalidation
• How It Works: Background regeneration of static pages
• revalidate Property: Controlling update frequency
• Use Cases: E-commerce, news sites, frequently updated content
• Benefits: Best of both worlds - static speed with dynamic freshness

API Routes

• Built-in API: Creating backend endpoints within Next.js
• Serverless Functions: No separate backend needed
• Use Cases: Form submissions, authentication, database queries
• Integration: Seamless frontend-backend communication

Comprehensive Project

The workshop culminated in creating a comprehensive project that demonstrated Next.js’s build and rendering techniques:

Project Features

• Homepage: Static generated with ISR for content updates
• Blog: SSG with dynamic routes for blog posts
• User Dashboard: SSR for personalized content
• API Endpoints: Backend functionality for forms and data
• Optimizations: Image optimization, font optimization, code splitting

Technologies Used

• React 18 with hooks
• Next.js 13 (Pages Router)
• Tailwind CSS for styling
• API integration demonstrations of a news public API

Hands-On Experience

Participants gained practical experience with:

• Setting up a Next.js project from scratch
• Choosing the right rendering strategy for different pages
• Implementing dynamic routing
• Creating API routes
• Optimizing performance with Next.js features
• Deploying to Vercel

Learning Outcomes

Attendees left with:

• Deep understanding of React fundamentals
• Knowledge of Next.js rendering strategies
• Practical experience with SSR, SSG, and ISR
• Completed project for their portfolio
• Best practices for production applications
• Confidence to build scalable web applications

The DevSprint Experience

The workshop was incredibly engaging, with the amount of participants who cared and attended making it truly special. The questions asked showed genuine interest in understanding not just how things work, but why we use certain patterns.

The energy in the room was fantastic, with developers actively coding along, debugging together, and sharing their screen to showcase their implementations.

---

Event Details:

• Place: CSE Club - ESI ex. INI
• Date: December 14, 2024
• Event: DevSprint
• Attendees: 20+ developers
• Duration: Full-day workshop

Special thanks to the CSE Club team for organizing DevSprint and creating such an engaging learning environment!

Resources Provided

• Workshop repository with starter code
• Next.js documentation links
• Rendering strategies decision flowchart
• Deployment guides
• Follow-up materials for continued learning