Web Client UI: ReactJS

Faculty: M. Aswini Kumar

Course Name : Web Client UI: ReactJS


Code(Credit) : CUDM2516(0-2-1)

Course Description
This course provides a comprehensive introduction to building modern web client user interfaces using ReactJS, a popular JavaScript library for creating single-page applications (SPAs). Students will learn the fundamentals of React, including JSX, components, state management, and hooks, while also exploring advanced concepts like routing, API integration, and deployment. Through hands-on practical exercises and a capstone project, students will develop and deploy a fully functional React application, such as a personal portfolio, task manager, or weather dashboard. The course emphasizes responsive design, form handling and deployment platforms like Netlify or Vercel.
Course Objectives

• Understand the fundamentals of ReactJS and single-page application (SPA) architecture.
• Master JSX syntax, functional components, and the React component lifecycle.
• Learn to manage component state and handle user interactions using hooks like useState and useEffect.
• Implement conditional rendering, dynamic lists, and form handling with validation.
• Explore client-side routing using React Router for seamless navigation in SPAs.
• Integrate REST APIs to fetch and display dynamic data while handling loading and error states.
• Build and deploy a responsive, fully functional React application using modern development and deployment workflows.

Course Outcomes

• 
  CO1: Explain the core concepts of ReactJS, SPA architecture, and the role of Node.js/npm in frontend development. (Remembering, Understanding)
• 
  CO2: Develop React components using JSX, props, and state to create dynamic and interactive user interfaces. (Applying, Creating)
• 
  CO3: Implement conditional rendering, lists, and event handling to build responsive and user-friendly features. (Applying, Analyzing)
• 
  CO4: Design and validate controlled forms to handle user input and submission effectively. (Applying, Creating)
• 
  CO5: Configure client-side routing using React Router to enable seamless navigation in a single-page application. (Applying, Evaluating)
• 
  CO6: Integrate REST APIs using fetch/axios, manage side effects with useEffect, and handle loading/error states. (Applying, Analyzing)
• 
  CO7: Build, organize, and deploy a scalable, responsive React application using best practices and platforms like Netlify or Vercel. (Creating, Evaluating)

Module 1: ReactJS Basics and Setup
Theory:

• Introduction to React and SPA architecture
• Node.js & npm for frontend setup
• JSX syntax and functional components

Practical:

• Setup React project using create-react-app or Vite
• Create basic components (Header, Footer, etc.)
• Use JSX to display dynamic content

Module 2: Props, State, and Events
Theory:

• Understanding component props
• React state and useState hook
• Handling user events (onClick, onChange)

Practical:

• Pass data using props
• Implement a simple counter using useState
• Create a form with input event handling

Module 3: Conditional Rendering and Lists
Theory:

• Conditional rendering with if, &&, and ternary operators
• Lists and map() in JSX
• Key prop concept

Practical:

• Render a list of items dynamically
• Add a search/filter feature to the list
• Toggle visibility of components conditionally

Module 4: Forms and Controlled Components
Theory:

• Controlled vs uncontrolled components
• Form submission handling
• Input validation basics

Practical:

• Create a user registration form
• Handle form submission and validation
• Display submitted data below the form

Module 5: Routing with React Router
Theory:

• SPA navigation vs MPA
• React Router basics (BrowserRouter, Routes, Link, useNavigate)

Practical:

• Setup page routes (Home, About, Contact, Login)
• Use dynamic route params
• Redirect user after form submission/login

Module 6: API Integration and Hooks
Theory:

• Fetching data using fetch or axios
• React useEffect for lifecycle management
• Handling loading and error states

Practical:

• Fetch data from a public REST API (e.g., JSONPlaceholder)
• Display API data in a table or list
• Implement loading spinner and error display

Module 7: Mini Project + Deployment

• Build a mini project (e.g., ToDo App, Weather App, Student Directory)
• Make it responsive using CSS
• Deploy to Netlify or Vercel

Project Ideas
Students must build and submit a fully functional React App such as:

• Personal Portfolio Website
• Task Manager App
• E-commerce Product Viewer
• Blog Post UI Client
• Weather Dashboard

Project Evaluation Criteria

• UI Design & Responsiveness
• Form Handling and Validations
• API Integration (if applicable)
• Routing and Navigation
• Deployment & Live Link

CO	PO1	PO2	PO3	PO4	PO5	PO6	PO7	PSO1	PSO2	PSO3
CO1	3	2	-	1	-	2	-	2	1	-
CO2	3	2	3	2	2	2	1	3	3	1
CO3	2	3	2	2	2	1	1	3	3	1
CO4	2	2	3	2	2	2	1	3	3	2
CO5	2	2	3	3	2	1	2	3	3	2
CO6	2	3	2	3	2	2	2	3	2	3
CO7	3	3	3	3	3	3	3	3	3	3

Session Plan

Module 1: ReactJS Basics and Setup
Practical (4 hours):

• Install Node.js, npm, and set up a development environment (1 hour).
• Create a React project using Vite or create-react-app (1 hour).
• Build and style basic components (Header, Footer) using JSX (1 hour).
• Display dynamic content (e.g., user name, date) in components (1 hour).

Project (1 hour):

• Initialize project repository (Git) and decide on mini-project idea (e.g., ToDo App, Weather App).
• Create initial project structure with basic components (Home, Header).

Outcomes Covered:
CO1,
CO2

Module 1: ReactJS Basics and Setup
Practical (4 hours):

• Explore JSX syntax rules and limitations (1 hour).
• Create nested components (e.g., Card, Button) with CSS styling (1 hour).
• Practice passing static data to components (1 hour).
• Debug common JSX errors and use developer tools (1 hour).

Project (1 hour):

• Add initial UI components to the mini-project (e.g., Navbar, Footer).
• Commit changes to Git repository.

Outcomes Covered:
CO1,
CO2

Module 2: Props, State, and Events
Practical (4 hours):

• Pass data to components using props (1 hour).
• Implement a counter using useState hook (1 hour).
• Handle user events (onClick for buttons, onChange for inputs) (1 hour).
• Build a simple interactive component (e.g., toggle button) (1 hour).

Project (1 hour):

• Add interactive elements to the mini-project (e.g., a button to add a task in ToDo App).
• Update project with props-based data passing.

Outcomes Covered:
CO2,
CO3

Module 2: Props, State, and Events
Practical (4 hours):

• Create a form with multiple input fields using useState (1 hour).
• Handle form input changes with event handlers (1 hour).
• Build a dynamic component that updates based on user input (1 hour).
• Refactor components for reusability (1 hour).

Project (1 hour):

• Integrate a form or input feature into the mini-project (e.g., task input for ToDo App).
• Test and refine event handling.

Outcomes Covered:
CO2,
CO3

Module 3: Conditional Rendering and Lists
Practical (4 hours):

• Implement conditional rendering using && and ternary operators (1 hour).
• Render a list of items using map() with unique keys (1 hour).
• Add a search/filter feature to a list (1 hour).
• Practice toggling component visibility (e.g., show/hide details) (1 hour).

Project (1 hour):

• Add a list-based feature to the mini-project (e.g., task list for ToDo App).
• Implement basic filtering or toggling.

Outcomes Covered:
CO3

Module 3: Conditional Rendering and Lists
Practical (4 hours):

• Optimize list rendering for performance (1 hour).
• Create a dynamic list with add/remove functionality (1 hour).
• Handle edge cases (empty lists, no search results) (1 hour).
• Style lists using CSS  (1 hour).

Project (1 hour):

• Enhance the list feature in the mini-project (e.g., add/remove tasks).
• Apply responsive styling to the list.

Outcomes Covered:
CO3

Module 4: Forms and Controlled Components
Practical (4 hours):

• Build a controlled form with multiple inputs (1 hour).
• Implement form submission logic with useState (1 hour).
• Add basic input validation (e.g., required fields, email format) (1 hour).
• Display submitted data dynamically (1 hour).

Project (1 hour):

• Add a form to the mini-project (e.g., task creation form or user profile form).
• Include basic validation and submission feedback.

Outcomes Covered:
CO4

Module 4: Forms and Controlled Components
Practical (4 hours):

• Enhance form validation (e.g., regex for passwords, max length) (1 hour).
• Handle form reset and error states (1 hour).
• Create reusable form components (1 hour).
• Style forms for responsiveness  (1 hour).

Project (1 hour):

• Refine the form in the mini-project with advanced validation and styling.
• Test form functionality and user feedback.

Outcomes Covered:
CO4

Module 5: Routing with React Router
Practical (4 hours):

• Set up React Router with BrowserRouter and Routes (1 hour).
• Create multiple pages (Home, About, Contact) with navigation (1 hour).
• Implement dynamic routes with useParams (1 hour).
• Add navigation using Link and useNavigate (1 hour).

Project (1 hour):

• Add routing to the mini-project (e.g., separate pages for task list and task details).
• Test navigation functionality.

Outcomes Covered:
CO5
Midterm Examinations
Practical (4 hours):

• Midterm practical exam: Build a small React app with components, state, and forms (3 hours).
• Review and feedback session on exam submissions (1 hour).

Project (1 hour):

• Refine mini-project based on midterm feedback.
• Plan for API integration and routing enhancements.

Outcomes Covered:
CO1,
CO2,
CO3,
CO4,
CO5

Module 5: Routing with React Router
Practical (4 hours):

• Implement protected routes (e.g., login-based access) (1 hour).
• Handle redirects after form submission (1 hour).
• Optimize routing performance and navigation UX (1 hour).
• Style navigation components (e.g., active link styling) (1 hour).

Project (1 hour):

• Enhance routing in the mini-project (e.g., add protected routes or dynamic pages).
• Ensure responsive navigation design.

Outcomes Covered:
CO5

Module 6: API Integration and Hooks
Practical (4 hours):

• Fetch data from a public REST API (e.g., JSONPlaceholder) using fetch/axios (1 hour).
• Use useEffect to manage data fetching lifecycle (1 hour).
• Display API data in a table or list (1 hour).
• Implement loading spinner for API calls (1 hour).

Project (1 hour):

• Integrate a public API into the mini-project (e.g., weather API for Weather App).
• Display fetched data dynamically.

Outcomes Covered:
CO6

Module 6: API Integration and Hooks
Practical (4 hours):

• Handle API error states and display user-friendly messages (1 hour).
• Optimize API calls with useEffect cleanup (1 hour).
• Create reusable API service functions (1 hour).
• Style API-driven components for responsiveness (1 hour).

Project (1 hour):

• Add error handling and loading states to the mini-project’s API integration.
• Refine UI for API-driven data.

Outcomes Covered:
CO6

Module 7: Mini Project + Deployment
Practical (4 hours):

• Build core features of the mini-project (e.g., task CRUD for ToDo App) (2 hours).
• Make the project responsive using CSS (1 hour).
• Test project functionality across devices (1 hour).

Project (1 hour):

• Finalize core project features.
• Prepare project for deployment (e.g., build optimization).

Outcomes Covered:
CO7

Module 7: Mini Project + Deployment
Practical (4 hours):

• Deploy the project to Netlify or Vercel (1 hour).
• Test live deployment and fix issues (1 hour).
• Add final styling and polish to the project (1 hour).
• Document project features and codebase (1 hour).

Project (1 hour):

• Complete deployment and verify live link.
• Prepare project presentation and documentation.

Outcomes Covered:
CO7

Module 7: Mini Project + Final Evaluation
Practical (4 hours):

• Present mini-projects to peers and instructor (2 hours).
• Evaluate projects based on UI design, functionality, and deployment (1 hour).
• Course review and feedback session (1 hour).

Project (1 hour):

• Submit final project with live link and documentation.
• Address any last-minute feedback.

Outcomes Covered:
CO7
Course Materials

• react-js-banner
• react-js-banner