This repository contains 10 ReactJS practical programs developed as part of the AEC (Application Development using React) course under the VTU curriculum. Each program is structured within its own folder (Program_1 to Program_10) and demonstrates core React concepts such as state management, props, component composition, forms, routing, and lifecycle methods.
To get started, clone the repository using the following command:
git clone https://github.com/Puneethkrishna-2003/React_VTU.gitEach program is stored in a separate folder named:
Program_1Program_2Program_3- ...
Program_10
Navigate into each folder to run or view the source code for that specific program.
Description:
A simple React application that uses the useState hook to create a live text display. It contains an input field, and as the user types, the content is dynamically displayed in an <h1> element.
Concepts Covered:
- React functional components
useStatefor input state- Real-time DOM updates
Description:
An app where the App component passes props to two child components:
Headerdisplays the title.Footerdisplays tagline or copyright.
Concepts Covered:
- Passing data via props
- Reusable component structure
- Dynamic content update via props
Description:
A React counter that demonstrates state management using useState. Includes:
- Increase, decrease buttons
- Prevent counter from going below zero
- Reset button
- Custom step increment/decrement
Concepts Covered:
useState- Conditional rendering
- Button event handling
Description: A dynamic To-Do List app that allows users to:
- Add new tasks
- Delete tasks
- Mark tasks as completed/pending
- Visually differentiate task status
Concepts Covered:
- List management using
useState - Conditional rendering and styling
- Handling multiple actions per item
Description: A gallery app using component composition:
FigureListrenders multipleBasicFigurecomponents- Each
BasicFigureshows an image and caption - Images can be added or removed dynamically
Concepts Covered:
- Component composition
- Props for passing image URLs and captions
- CSS styling & hover animations
Description: A React form with fields for:
- Name
- Password
Includes:
- Validation for required fields and email format
- Password strength checks
- Visual error cues and "Show Password" toggle
Concepts Covered:
- Form handling
- Validation logic
- UI feedback for errors
- Input sanitization
Description: A stylish profile card displaying:
- Circular profile image
- User name
- Bio
Uses external CSS for layout and inline styles for dynamic background color changes.
Concepts Covered:
- Image and text rendering
- CSS and inline styles
- Props for dynamic data
- Responsive and interactive UI
Description: A full-featured task manager app where users can:
- Add tasks with due date and description
- View all tasks
- Filter by status (All, Completed, Pending)
Concepts Covered:
- Forms with date input
- Filtering logic
- Task rendering based on state
Description:
Routing-enabled application using react-router-dom. Contains:
- Navigation bar
- Three pages: Home, About, Contact
- Active link highlighting
Concepts Covered:
- Client-side routing
- Route-based rendering
- Navigation UI with highlighting
Description: Demonstrates use of lifecycle methods in a class component:
- Uses
componentDidMountto fetch data from an API - Uses
componentDidUpdateto respond to state/props changes - Supports filtering/searching
- Displays data in a list or table
Concepts Covered:
- Class components
- Lifecycle methods (
componentDidMount,componentDidUpdate) - Error handling in API calls
- Dynamic data rendering
Ensure you have the following installed:
- Node.js (v14 or later)
- npm or yarn
- Git
Navigate into any of the Program_X folders:
cd Program_1
npm install
npm startThis repository is for educational purposes only and part of the VTU AEC practical coursework.
Puneeth Krishna GitHub Profile
Let me know if you want the README to include screenshots, GIFs, or links to live demos for each program.