KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#dsh #dsh-plugin #developer-tools #ai-agent #claude-code #codex #typescript #ai-agents #deepseek-harness #mcp #cli #rust

react-component-depot

★ 518 Open GitHub ↗

A collection of react components with video tutorials

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Welcome to react-component-depot!

[![Netlify Status](https://api.netlify.com/api/v1/badges/26d63fc5-4fe5-44fd-9d40-fc4d332e360c/deploy-status)](https://app.netlify.com/sites/react-component-depot/deploys)

A repository contains an extensive list of react components built from scratch with youtube linked tutorials.

https://react-component-depot.netlify.app

# Tutorials

All the components in this repo is covered by the tutorials on the [D'Coders YouTube channel](https://www.youtube.com/channel/UCdItDI6oTgPW7l9WOJI7ItA/). The link for the tutorial will be given at the top of each page.

# Project

Project is bootstrapped with [create-react-app](https://create-react-app.dev/) and uses react V16.13.1

## Folder Structure

Please follow the folder structure of CRA. You can find more in this in their official github page.

```
react-component-depot
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── actions
    ├── components
    ├── hoc
    ├── hooks
    ├── pages
    ├── reducers
    ├── resources
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── routes.js
    ├── logo.svg
    └── serviceWorker.js
    └── setupTests.js
```

> **Note:** New **Files and Folders** will be added to the **src** over time.
>

🗀 **pages** - Pages are the entry points for all the user facing demo pages

🗀 **hooks** - Collection of hooks created and used in this application

🗀  **actions** - Contains the action creators for redux

🗀  **components** - Reusable components used in our application

📄 **routes.js** - Used to define application routes and Menu items

# Tutorials List

- Building a datatable in ReactJS from scratch with pagination, search and sorting [[Demo]](https://react-component-depot.netlify.app/data-table)  [[Tutorial]](https://youtu.be/emX5KvZ6Hbo)
- File Upload with cancel button and progress bar In ReactJS [[Demo]](https://react-component-depot.netlify.app/file-upload)[[Tutorial]](https://youtu.be/_XD5ko7Fy9E)
- How to get client IP address and location in ReactJS [[Demo]](https://react-component-depot.netlify.app/find-my-ip) [[Tutorial]](https://youtu.be/TID8Z29je5o)
- Infinite scrolling in ReactJS using react-waypoint  [[Demo]](https://react-component-depot.netlify.app/infinite-scrolling) [[Tutorial]](https://youtu.be/8nFNxnjoTZ4)
- Integrate Google's recptcha in ReactJS and verifying user response in NodeJS [[Demo]](https://react-component-depot.netlify.app/recaptcha) [[Tutorial]](https://youtu.be/e_vMoPCBfqU)
- How to customize scroll bar in ReactJS [[Tutorial]](https://youtu.be/7GO4P0ewVfI)
- How to deploy ReactJS app in netlify for free with CI/CD [[Tutorial]](https://youtu.be/HICAn3ArLZU)
- Integrate hCaptcha in ReactJS and verifying user response in NodeJS [[Demo]](https://react-component-depot.netlify.app/hcaptcha) [[Tutorial]](https://youtu.be/KcLeXxlkqf0)
- Building an autocomplete component in React JS with keyboard navigation [[Demo]](https://react-component-depot.netlify.app/auto-complete) [[Tutorial]](https://youtu.be/G2QyeafA3gw)
- Easy Dark mode switcher in react app using a custom hook [[Tutorial]](https://youtu.be/qF49m6C2Y8I)
- Building a search filter with react useMemo hook [[Demo]](https://react-component-depot.netlify.app/search-filter) [[Tutorial]](https://youtu.be/aBWwJ4ibpps)
- Show and Hide elements with a custom visibility toggle hook in ReactJS [[Demo]](https://react-component-depot.netlify.app/hooks-demo) [[Tutorial]](https://youtu.be/iRPGE_AfGTQ)
- Building accordion panel in reactJS with single & multiple configuration [[Demo]](https://react-component-depot.netlify.app/accordion) [[Tutorial]](https://youtu.be/AjQctXfmOqw)

react-component-depot

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README