React Framework Practice

sriharsha024

This repo features projects with Vite setup, conditional rendering in JSX, portfolio creation, dynamic components using hooks, Axios interceptors, a color picker app, form validation with React Hook Form, React Router, and Redux integration. It also includes Tailwind CSS, dark mode, and custom hooks.

Download

React & Redux Development Repository

This repository contains a series of React and Redux-based projects demonstrating various concepts and techniques, from state management to responsive design and form handling. The projects are aimed at building functional, interactive, and user-friendly applications with modern tools.

Key Features & Commit Highlights

React & Redux Concepts

Redux Store & Actions: Implemented Redux store for state management, integrated with post-fetching actions and reducers.

Dynamic Homepage & Routing: Created a dynamic homepage with query parameter-based navigation. Added basic routes for About, Team, and Contact pages with a responsive Navbar.

Axios & Interceptors: Integrated Axios interceptors for request/response logging, fetching users and posts with error handling, and posting new users. Styled the app layout and added forms for user interactions.

UI & UX Enhancements

Dark Mode Toggle: Implemented dark mode toggle with localStorage persistence, enabling users to switch themes easily and persist their preferences across sessions.

Responsive Design: Improved app responsiveness using Tailwind CSS, including custom colors and dark mode styles configured through Tailwind.

Form Validation: Added form validation for name, email, password, and confirm password using React Hook Form with error handling and user feedback.

Dynamic Components & State Management

React Hooks: Implemented dynamic components using useRef, useState, and useEffect hooks for interactive behavior and conditional rendering.

Custom Hooks: Leveraged context and custom hooks for managing state and improving reusability across components.

Counter & Form Apps: Developed interactive counter apps, including increment and decrement functionality, and forms with dynamic input handling using React's useState hook.

Portfolio & Layouts

Responsive Portfolio: Created a responsive portfolio showcasing modular components such as About, Projects, Contact, and Footer, with clean UI design and CSS styling for improved user experience.

Conditional Rendering & Personalized Greetings: Integrated personalized greetings and conditional alerts based on user status and prop handling.

Technologies Used

React (with hooks like useState, useEffect, useRef)

Redux (for state management)

Tailwind CSS (for responsive design)

React Hook Form (for form handling and validation)

Axios (for API requests)

Vite (for fast React project setup)

CSS (for custom styling)

Top categories