List of different components in React

As many people are willing to learn React and master re usability by creating different components.

I have decided to create a list of how to create different components in Reactjs.

As react is extremely powerful and flexible in component re usability. We will take this to our advantage and will create different types of predefined components.

Creating custom components has many advantages.

Design Consistency

Native styles for different elements like (button, form elements, etc) differs from browser to browser. So by creating a custom component, we can ensure a consistent style.

---

Control

The behavior of the elements will be completely under our control and we can modify it according to our needs. Components can be a group of different elements like form elements that will always come with its label, that way we will not have to create it separately.

---

Data

We can return the data from each component according to our requirements. Like on hover return one type of data and on click return another type of data.

In my years of frontend development, one thing that I have learned is that if you are re-creating any component anywhere in the app, then it is better to make it generic because there is a high probability that you will have to use it again somewhere in the app.

We will be using React’s starter pack create-react-app to create the component and I will be maintaining a GitHub repo where I will be storing the list.

To install react on your system make sure you have Nodejs and NPM installed. Once you have them on your system you can run

npm -g create-react-app

Which will install the create-react-app globally. Now using this you can start a react project without doing any setup. It is really good at getting started with development.

To create a react project open the terminal, go to your desired drive or storage path and use this command.

create-react-app your-folder-name

You can use any name you want but just make sure that is smaller cased.

I had decided to use SASS but later dropped the idea because there are many people who may find it difficult to set up SASS. I will be using normal CSS for styling.

There are other few npm packages which I will be using in the development which may differ for some components. So I will mention them in the blog while writing.

The folder structure of our app is will be as follow

Inside the components folder we will have our different components.

List of different react components

Form elements

1. Create custom button component in react
2. Create input component in react
3. Create checkbox in react
4. Create radio group component in react
5. Create checkbox group component in react
6. Create file uploader in react
7. Create select dropdown in react
8. Toggle switch in react
9. Login form component in react

Generic components

1. Create progress bar in react
2. Pagination component in react
3. Create accordion in react
4. Create dropdown in react
5. Create autocomplete search in react
6. Sliding sidebar menu with hamburger in react
7. Create tabs in react
8. Create alert box in react
9. Create modal component in react
10. Create voice visualizer in react
11. Lazy loading component in react.
12. Create slider in react
13. React drag and drop list of elements
14. React image zoom
15. Create timeline in react
16. Create scroll indicator in react
17. Create tooltip in react
18. Typing effect component in react
19. Create loader component in react
20. How to scroll to top in react
21. Image comparison slider in react
22. Create scrollspy in react