Web Client UI: ReactJS

Teacher

M. Aswini Kumar

Category

Domain Courses

Course Attendees

Still no participant

Course Reviews

Still no reviews

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

Our Main Teachers

M. Aswini Kumar

Assistant Professor
VIEW PROFILE