React Learning Project (Vite + React)

This project is a hands-on React learning and practice application created using Vite.
It contains examples of event handling, state management, input handling, form validation, and client-side routing with React Router.
The goal of this project is to learn modern React concepts step by step while building multiple simple pages.

---

📌 Features Covered

✅ 1. Event Handling

• Button click events
• Updating UI based on state
• Reset actions

✅ 2. Routing (React Router)

Pages included:

• Home Page
• Learn (Events Practice)
• Input Example Page
• Registration Form Page

✅ 3. Input Handling

• Controlled components (name, email, age)
• Live typed value display

✅ 4. Form Validation (Work in Progress)

• Name validation
• Email validation
• Error messages displayed near input fields
• Will continue building full form

✅ 5. Component-Based Structure

• App.jsx
• RegistrationForm.jsx
• InputPage.jsx
• Learn.jsx
• Button.jsx
• Global CSS and SVG assets

---

📁 Project Structure

react-app/ ├── public/ ├── src/ │ ├── App.jsx │ ├── App.css │ ├── Learn.jsx │ ├── InputPage.jsx │ ├── RegistrationForm.jsx │ ├── Button.jsx │ ├── assets/ │ ├── main.jsx │ └── index.css ├── package.json ├── vite.config.js └── README.md

yaml Copy code

---

▶️ Running the Project

Install dependencies:

npm install

shell Copy code

Start development server:

npm run dev

yaml Copy code

App runs at: http://localhost:5173/

yaml Copy code

---

📌 Status

This is an ongoing learning project.
More pages and enhancements (like full form validation, loaders, and more UI improvements) will be added as part of daily learning sessions.

---

📚 Learning Goals

• Understand React fundamentals
• Build reusable components
• Work with state and props
• Implement routing
• Apply validation logic
• Practice modern frontend workflows using Vite

---

👩‍💻 Author

Nitha Deepak
Learning React step by step as part of full-stack development practice.