Creation of reusable React components for the modularization of web pages using React and TypeScript. This repository features a collection of reusable web development components that demonstrate various techniques and concepts in React, providing modular solutions for common UI elements and interactions.
1. Cards
A project to display cards with dynamic content, utilizing the useEffect and useState hooks.
2. Reviews
A project to display random reviews, including images, names, and text, with navigation functionality using useState.
3. Navbar
A responsive navigation bar that adjusts dynamically based on screen size, implemented with useState, useEffect, and useRef.
An interactive sidebar with modal functionality for displaying additional content, using Context API for state management.
5. Modal
A simple modal project that opens and displays content dynamically, built using useState hook.
6. Accordion
An accordion project that opens only one element at a time, demonstrating state management with React.
7. Menu
A menu project that filters and displays items from a dataset, utilizing the useState hook for state management.
8. Tabs
A dynamic tab project that updates the displayed content based on the selected tab index, using useState.
9. Slider
A sliding project that dynamically updates the content, powered by useState and useEffect hooks.
A dynamic Lorem Ipsum text generator using useState for input states and text generation.
11. Color Generator
A color generator that outputs random colors in RGB and HEX formats, implemented with useState and useEffect.
12. Task Manager
A simple task manager that stores tasks in the browser's localStorage, utilizing useState.
13. Cart Reducer
A cart example using Context API and a reducer to manage state for adding and removing items.
A gallery project fetching images from the Pexels API, utilizing React Query for data fetching and caching.
An app that fetches cocktail recipes from an API, using React Router Dom for navigation and React Query for data fetching.
A portfolio project showcasing Tailwind CSS and React for styling and layout.
17. Strapi Menu
A dynamic menu fetching data from Strapi, using useState, useRef, and Context API for state management.
A cart management system using Redux Toolkit, allowing users to add, remove, and update cart items with a global state.
Each project in this repository has its own README.md file with specific installation and usage instructions. However, below are the general steps to clone, install, and run any of the projects local.
git clone https://github.com/armandomzn/react_components.gitNavigate to the specific project folder and install dependencies:
cd project-folder-name
npm install Start the development server:
npm run dev This will launch the project on http://localhost:5173/ or the designated port.
To create an optimized production build:
npm run buildThe build files will be available in the build directory.
- Redux Toolkit: The Redux Toolkit Cart project demonstrates efficient global state management in React using Redux Toolkit.
- Component Reusability: The main focus is to create modular components that can be reused across different projects.
- State Management: Components use React's
useState,useEffect,useContext,useReducer, and Redux Toolkit for managing state. - API Integration: Several components fetch data from external APIs, such as the Cocktails API, Pexels API, and Strapi.
- Responsive Design: Many components are responsive, utilizing Tailwind CSS for styling and layout.
- React Query: Used for data fetching and caching, such as in the Pexels API component.
- React Router Dom: For navigation within the app, demonstrated in the Cocktails API project.
- TypeScript: Each component is developed with TypeScript for enhanced developer experience and type safety. Each project includes its own detailed installation and usage instructions in its respective README.md file.