I created 31 react components during my quarantine
Tags: beginners, javascript, react, webdev
Published: 2020-04-30 07:58:07

---
title: I created 31 react components during my quarantine
published: true
description: I utilized my quarantine time to create 31 reusable react components
tags: beginners, javascript, react, webdev
---

![31 reusable react components list](https://dev-to-uploads.s3.amazonaws.com/i/tueni33i7xhtht87tj43.png)

It was mid of march when my company has asked me to start working from home due to covid-19.

As I was already spending 4 hrs in travelling daily. I thought why don't I utilize this time to learn something new. 

So I decided to create 31 reusable components in react.

There was two things which pushed me to pick up this #31DaysOfReact challenge.
1. As a frontend developer doing this will help to me polish my knowledge.
2. I am a blogger and write articles about Javascript and DSA on [learnersbucket.com](https://learnersbucket.com). So this will also be a good content for my blog.

Initially, I had ideas about 5 to 6 components which I started with but for the other components I looked up for generic components that are often used and created them.

It was not easy to create components and write a blog at the same time while working full time.

That is why it took me about 45 days to finish all the components.

But I really enjoyed a lot doing this and it was really amazing learning experience.

I learned about
 - Frontend Development.
 - Styling (CSS).
 - React.
 - Ref (How to update elements properties directly without using state).
 - Thinking in react (How to create extendable components).
 - Cross browser compatibility.
 - Form handling.
 - And more.

Here is the list of things I have created.
##Form Elements
 1. [Create custom button component in react](https://learnersbucket.com/examples/react/create-custom-button-component-in-react)
 2. [Create input component in react](https://learnersbucket.com/examples/react/create-input-component-in-react)
 3. [Create checkbox in react](https://learnersbucket.com/examples/react/create-checkbox-in-react)
 4. [Create radio group component in react](https://learnersbucket.com/examples/react/create-radio-group-component-in-react)
 5. [Create checkbox group component in react](https://learnersbucket.com/examples/react/create-checkbox-group-component-in-react)
 6. [Create file uploader in react](https://learnersbucket.com/examples/react/create-file-uploader-in-react)
 7. [Create select dropdown in react](https://learnersbucket.com/examples/react/create-select-dropdown-in-react)
 8. [Toggle switch in react](https://learnersbucket.com/examples/react/toggle-switch-in-react)
 9. [Login form component in react](https://learnersbucket.com/examples/react/login-form-component-in-react)

##Other Generic Components
1. [Create progress bar in react](https://learnersbucket.com/examples/react/create-progress-bar-in-react)
2. [Pagination component in react](https://learnersbucket.com/examples/react/pagination-component-in-react)
3. [Create accordion in react](https://learnersbucket.com/examples/react/create-accordion-in-react)
4. [Create dropdown in react](https://learnersbucket.com/examples/react/create-dropdown-in-react)
5. [Create autocomplete search in react](https://learnersbucket.com/examples/react/create-autocomplete-search-in-react)
6. [Sliding sidebar menu with hamburger in react](https://learnersbucket.com/examples/react/sliding-sidebar-menu-with-hamburger-in-react)
7. [Create tabs in react](https://learnersbucket.com/examples/react/create-tabs-in-react)
8. [Create alert box in react](https://learnersbucket.com/examples/react/create-alert-box-in-react)
9. [Create modal component in react](https://learnersbucket.com/examples/react/create-modal-component-in-react)
10. [Create voice visualizer in react](https://learnersbucket.com/examples/react/create-voice-visualizer-in-react)
11. [Lazy loading component in react](https://learnersbucket.com/examples/react/lazy-loading-component-in-react)
12. [Create slider in react](https://learnersbucket.com/examples/react/create-slider-in-react)
13. [React drag and drop list of elements](https://learnersbucket.com/examples/react/react-drag-and-drop-list-of-elements)
14. [React image zoom](https://learnersbucket.com/examples/react/react-image-zoom)
15. [Create timeline in react](https://learnersbucket.com/examples/react/create-timeline-in-react)
16. [Create scroll indicator in react](https://learnersbucket.com/examples/react/create-scroll-indicator-in-react)
17. [Create tooltip in react](https://learnersbucket.com/examples/react/create-tooltip-in-react)
18. [Typing effect component in react](https://learnersbucket.com/examples/react/typing-effect-component-in-react)
19. [Create loader component in react](https://learnersbucket.com/examples/react/create-loader-component-in-react)
20. [How to scroll to top in react](https://learnersbucket.com/examples/react/how-to-scroll-to-top-in-react)
21. [Image comparison slider in react](https://learnersbucket.com/examples/react/image-comparison-slider-in-react)
22. [Create scrollspy in react](https://learnersbucket.com/examples/react/create-scrollspy-in-react)

My favorite one are Image-Comparison-Slider and Typing-Effect-Component.

This is the github repo link {% github https://github.com/know-prashant/react-components %}

If you think that these react components list has any worth then do share it with others. 🙏🙏

As the lockdown is still going on in India starting from 1st May I have decided to start a new challenge of #31DaysOfDSA in which I will be implementing and solving different data structures and algorithms in javascript.

You can follow this hashtag on twitter to learn along.

---------------------------------------------------------------------------------

Also, follow me on  [Twitter](https://twitter.com/LearnersBucket) for tips and tricks to solve the coding interviews and more solved examples of Algorithms. I write 2 - 3 post weekly on my blog [learnersbucket.com](https://learnersbucket.com).