React Component Guides
React Components are the fundamental independent and reusable bits of code in a React program.
This is a collection of top and trending guides written by the community on subjects related to React Component concepts. For all things React, check out the React tag! Please contribute more posts like this to help your fellow developer in need.
Props are used for passing data between the components. We usually use it to pass data from the parent component to the child component.
A smart/container component that makes API calls referencing a controlled input.
A couple of days ago, while working on one of React projects with the use of a very popular UI library, I’ve stumbled upon a problem: I needed to make some style changes of the Progress Bar component. But after struggling with it for a few hours and being in a complete desperation (why isn’t it working as it is written in the documentation???), I’ve decided to create a Progress Bar component from scratch. Here how I’ve made it.
This tutorial will take you through the process of creating and publishing your own custom React component library and hosting it on Github.
In this blog post I will go through Layout Component - an extremely useful component in every application.
While working on a React project, I implemented a responsive file upload component that supports drag and drop without using any libraries. Most of the file upload components online used libraries such as react-dropzone to support drag and drop. So, I thought I'd share how I made the component and show a typical use case for it.
When working with routing in React, I came upon the
<Switch />component and noticed how people were using that in place of
<Router />. This made me delve a little further into the differences between the two and why using
<Switch />can be very helpful and the preferred component between the two.
Before React Hooks, when we want to create a dynamic component, we have to create a class component and use lifecycle methods to change states to make it reusable and encapsulate.
To understand the code easier, React implemented unidirectional data flow, also called 'one-way data-binding' when passing data from parent component to the child.
However, often, we need to pass some data back to the parent from the child, for example, think of forms, when the user's input effects parent component.
For the newcomers to React sometimes, it is hard to grasp the patterns of how to send data back to from child. This article explains how to do it the easy way.
Hot to call this function from another component in react?
To add to that, using radio buttons in React can be even more tricky. Handling change, tracking which value is selected, having the radio button checked is not so obvious in React. We’ll create our custom RadioButton component in React, in which I’ll try to clarify all aspects of a radio button.
React Testing Library is a different testing library in that it tests the surface of your component rather than the internals. You can change your components as much as you want as long as they render the data the same way or the React in the same way if you after interactions such as filling in data or pressing a button for example.
Here is a nice way to create a React Input component using typescript!
Link component is a magic component of next.js framework, that does the routing both client-side and server-side (properly rendering links for SEO purposes).
I decided to use an index.js file to handle my component exports. The file structure of my components folder looks ike this:
After perusing Stack Overflow and GitHub for solution, I came across an elegant React component that uses Hooks and wanted to share it with this community!
In this post let's understand where to use the Class Component and Functional Component in react
I recently observed one issue in my component rendering. Consider this code
For item 1,
react-reduxhave a component called
Providerthat can help us do this.
If we use
<Transition>component may be better than
Last week, we talked about 5 Customs React Hooks ! Many of you have shared this article. So this week, let's continue with React and the implementation of a Modal component without installing any packages!
I was building a form with Formik and I needed a single checkbox to mark a post as "published". In Formik 1.5.8, my values values weren't mapping correctly to checkboxes, so I created a generic Checkbox component to use instead of the Formik Field component.
We are going to be building the component using ReactJs. Let's start by installing the essentials. First we're going to create a react app using React's CRA or you can use any starter kit to begin with. Let's setup our
In this post I'll explain how to debounce a function inside a function react component using
lodash.debounce. We'll create a search app that'll search only when there's a gap of 500ms.
React Context API: updating Context from a nested component (in functional components with Hooks and class components)
While developing my recent project, Tabata - Fitness App, I needed to be able to play and pause the video clip of the exercise from another component. So, the simplified diagram of the component tree is as following:
Hey there! In this tutorial we are going to build a simple but cool Slideshow component with ReactJS.
I frequently use Storybook and styled components / Emotion when building component libraries. The ability to apply a consistent theme to all components is very powerful but it requires wrapping your components in a ThemeProvider.
Warning: Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it.
Hello everyone, In this post (Two parts) I'll convert a reactjs code from a class component to a functional component. Focusing on
let's begin with the part 1
I don't ask myself those questions when I see a type alias though. A type alias feels like a more appropriate language construct for plainly defining what the shape of an object should look like and is more akin to functional-style programming, so it feels more at home with React given how React itself is a functional stab at designing user interfaces. An interface, on the other hand, has a lot of object-oriented baggage associated with it that is irrelevant when we specifically talk about React component props, and object-oriented programming is not React's paradigm.
In today's post, I want to share my knowledge and understanding of Pure Component and Functional Component. How they both differ and when to use those and how it reduces the number of re-renders for a Component.
Add the following styles to it. For this tutorial, we would be making use of a background color for our background for the header component we just created. I use black, but feel free to chose anyone you want, and don't forget to export the function.
Line 6: After return create portal using
ReactDom.createPortal, As it's first argument we have passed whole modal component and for the second argument we have passed the dom node where we want to render it.
How about you? What is your favorite React Grid Component and why?
appcomponent that calls to a child component in order to render it, and passes to it the
setStatefunction. Now we look at the
Edit: Since writing this blog I've been able to try the built in Next.js Image optimisation. I found that due to the requirements of either having to specify a
layout="fill"and a parent component to size the images, it was impossible to allow my image to be dynamically resized by the height of it's container e.g. no more
height="100%". This requirement seems to be causing issues to other peoples projects as well. Hopefully they will fix it in the future! For now, I'll be sticking with
In this tutorial we are going to show how to bundle the entire dark mode feature into a single
<DarkMode />component that you can take with you and place inside any application.
As you see, a functional component is just a function with return. As required, User-Defined Components Must Be Capitalized. Here JSX codes used, with TypeScript file extension 'tsx'. Each JSX element, like
is just syntactic sugar for calling React.createElement(component, props, ...children), as
React.createElement('h1', null, 'Hello, world!')
Let's say you have a
Cardcomponent that gets the style from the current theme of
App, so you end up passing the theme from
Card, involving all the components in between unnecessarily.
In this post , we will build custom modal component with react js. We will build this Modal component from scratch without using any css framework.Below is the demo 😍 of what we will build going towards the end of this tutorial - very beautiful and fully customizable Modal Component.
vis the same value as before, then the function component won't be re-rendered (the function component won't be called).
Before React 16.8, we were forced to use the class-based component to have access in component lifecycle. And now with Hooks, we are now able to use functional component for state management, data fetching etc. We can now replace component lifecycle like
useEffectin our React component.
This is the first part of many 🛎️ from the series Custom UI Components With React. In this post we will see how we can create custom Button component with different props and styles in React JS.
The component I’ve chosen is the AddWord - a simple component with the purpose of adding a new word to the word search game.
This component provides an input field, an “Add” button, and of course some inner logic for word validation and interaction with the external application.
I would like to test this logic using the React Testing library, which has a solid principle of mimicking the user’s interactions and focusing on that instead of the implementation details.
Websites like craigslist use a breadcrumb component in their applications to describe the user's location, and in some ways it surprisingly improves their user experience!
Below is the component we will be testing
Happy React Component coding!