What is Component in React?

In simple terms there are two types of UI. One is static UI and the other dynamic UI. An example of static UI is a web page with only HTML markup. The example of dynamic UI is a webpage talking to a CGI script that generates a dynamic table of items. So can we say React component is one way of creating dynamic UI?

Yes, that’s a good way to think about it. React components allow you to create a dynamic UI. Unlike static HTML, React components can have their own state and props (properties) which can change over time, leading to different renderings of the component.

In a dynamic UI, the display can change based on a variety of factors such as user interactions (clicks, mouseovers, etc.), changes in application state, or real-time updates from a server (like live chat messages or status updates). React’s design enables you to define how your UI should look at any given point in time as a function of the current state and props, and React takes care of updating the display efficiently when these inputs change.

This allows you to create complex interactive UIs in a structured and efficient manner. Instead of manually manipulating the DOM as you would with vanilla JavaScript or jQuery, you just define how the UI should look based on the current state, and React handles the rest.

Richard Feynman Explains React Component

Let’s think of React components as the particles of our user interface. Just as particles in physics have states and properties, React components have state and props. But the magic is how they interact.

Just as particles in physics abide by natural laws, React components abide by the principles of React. In physics, we don’t manually move every particle. Instead, we define the laws (like gravity or electromagnetism), and the particles move according to those laws.

In the world of React, instead of manually updating the DOM (which is like moving every particle), we define components (the laws, in this analogy). We tell React how the component should look for any given state and props (the conditions), and then React handles the updating (the movement). We don’t manually change the position of each element on our web page. Instead, React does this automatically based on our laws (components).

In this universe, the ‘state’ of a component is like the position of a particle. And the ‘props’ of a component are like the mass or charge of a particle. The ‘render’ method of a component is like the law of physics that tells us how the particle will move. And just as changing the position, mass, or charge of a particle can change its motion, changing the state or props of a component can change what it renders (its motion).

So, creating a dynamic UI with React is like creating a mini universe of interacting particles. You, as the React developer, get to define the laws of this universe. And once you’ve defined them, React takes care of all the motion in your dynamic universe (UI).

Imagine you’re at a party with a bunch of friends. The party has a rule - if you’re wearing a red hat, you have to do a dance. Now, suppose you have a friend named Bob, and you give him a red hat. According to the party rule, Bob has to dance.

In this scenario, the party is like our application, the red hat rule is like our logic, and Bob is like a React component. Giving Bob the red hat and seeing him dance is like passing data to our React component and seeing it render something on the screen.

So, what’s dynamic about this? Well, let’s say Bob can do different dances depending on the color of the hat you give him. If you give him a red hat, he does the salsa. If you give him a blue hat, he does the tango. This is like passing different props to a React component and seeing it render different things.

But the real magic is that once you’ve taught Bob this hat-dancing rule, he can dance according to any color hat you give him. You don’t have to tell him each time what dance to do for each hat. This is like building a dynamic UI with React.

You define the rules (the component and its logic), and then the component can render according to any data (props) you give it. React takes care of the rest, making sure Bob (our component) does the right dance (rendering) based on the color of the hat (props).

That’s the fun of creating dynamic UIs with React!

Now, you may have heard a bit about this thing called React, a JavaScript library for building user interfaces, and you may be wondering what’s the fuss about? Is it some kind of magic box? So, let me break it down for you.

Imagine you’ve got a bunch of workers in a factory, and each worker is trained to do a specific task. Some workers are assembling parts, some are painting, others are packing the finished product. Each worker is like a “component” in React.

Now, these workers need instructions about what to do. These instructions come in the form of a job order or a blueprint. In React, these are “props” or properties that you pass to a component.

So let’s say we give our worker Bob a blueprint that says “assemble a red bicycle”. Bob, being the skilled worker he is, will follow the blueprint and create a red bicycle. Now, if we give him a different blueprint that says “assemble a blue tricycle”, he’ll produce a blue tricycle.

What’s marvelous about this is that Bob is like our React component - he can create different products based on the blueprint we give him. So instead of having to manually assemble each bicycle or tricycle, we just need to provide the right blueprint.

This is where the dynamism comes into play. We’re not just making the same product over and over again. Depending on what blueprint (props) we provide, we get a different product (output).

React takes care of the behind-the-scenes work, the machinery, that allows Bob (our component) to take a blueprint (props), do his work (run the component’s function), and produce a product (render the UI).

So you see, React is not some magic box. It’s more like an efficient factory where we set the rules, provide the blueprints, and let the workers do their thing. That’s how we create dynamic user interfaces with React!

Component means Web Component in React, so what does it really mean when we say: Component in React?

In React, the term “component” is a bit different from the term “Web Component” in the broader web development context.

  1. React Component: A React component is a reusable piece of the UI. It’s a JavaScript function or class that optionally accepts inputs i.e., properties(props), and returns a React element that describes how a section of the UI should appear. React components manage their own state and lifecycle methods, and they can be composed to make complex UIs. Components are the building blocks of any React application.

Here is an example of a simple React functional component:

1
2
3

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
  1. Web Component: On the other hand, Web Components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and apps. Web Components are based on existing web standards. Features to support Web Components are currently being added to the HTML and DOM specs, letting web developers easily extend HTML with new elements with encapsulated styling and custom behavior.

In conclusion, while both React Components and Web Components serve a similar purpose (creating reusable, encapsulated pieces of the UI), they do so in different ways and are not the same thing. React components are specific to the React library and use the React library’s API, while Web Components are built on web standards and don’t require a specific library or framework.

So React Component can be thought of as a UI Building Block that can be reused in an application?

Yes, that’s correct! A React Component can indeed be thought of as a reusable UI building block within a React application.

In React, the UI is composed of a tree of components, where each component is responsible for outputting a part of the UI. This might be as small as a single button or input field, or as large as an entire page layout. Each component is self-contained, with its own behavior and styling, and can be reused throughout the application wherever that part of the UI needs to be rendered.

This component-based architecture makes React applications highly modular and maintainable. When a part of the UI needs to be updated, you can simply update the relevant component, and those updates will be reflected everywhere that component is used. Components can also be shared between different projects, making it easier to maintain a consistent UI across multiple applications.

Here’s an example of a simple reusable React component:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

// A reusable Button component
function Button({ onClick, children }) {
  return (
    <button onClick={onClick}>
      {children}
    </button>
  );
}

// This Button component can be used anywhere in your app like this:
<Button onClick={() => console.log('Clicked!')}>
  Click me
</Button>

In this example, the Button component is a reusable piece of UI that can be used anywhere in the application.

The UI Building Block is self contained and defines the behavior to the user interaction and updates the UI ? Is there anything else that I missed from an end user perspective who don’t know it is built using React?

From an end-user perspective, a React component — or any UI building block, regardless of the technology used — is indeed a self-contained piece of user interface that:

  1. Displays information to the user.
  2. Responds to user interaction such as clicks, keypresses, and form submissions.
  3. Updates the UI based on state changes, user actions, or new data.

In addition to these, there are also aspects that are more behind-the-scenes but can impact the end user’s experience, even if they don’t know the app is built with React:

  1. Performance: React uses a virtual DOM and efficient diffing algorithm to minimize updates to the actual DOM, which can improve performance and provide a smoother user experience.

  2. Accessibility: React supports the use of ARIA attributes and has tools/libraries to ensure components are accessible to all users, including those who rely on assistive technologies like screen readers.

  3. Error Boundaries: In React, you can use error boundaries to catch JavaScript errors anywhere in a component tree, log those errors, and display a fallback UI instead of crashing the entire app.

From the perspective of the user, the important part is that the UI behaves as expected, is performant and accessible. What technology is used to achieve that — in this case, React — doesn’t matter as much.

It can show the output to a user, it can take input from a user. It can take action based on user interaction with the UI. Is that right?

Absolutely, that’s a great high-level summary of what a React component (or indeed, any UI component) does:

  1. Show output to a user: Components are responsible for rendering the UI. This could be simple text, a form, a list of items, images, or anything else that can be displayed on a webpage. The output is usually dynamic and can change over time or in response to user interactions or new data.

  2. Take input from a user: Components can also accept user input. This could be in the form of text input, button clicks, form submissions, mouse movements, keyboard events, and more. Components can define what happens when these events occur.

  3. Take action based on user interaction with the UI: When a user interacts with the component (like clicking a button), the component can respond to that interaction in a variety of ways. This could be changing its own internal state, making a network request, manipulating the DOM, triggering side effects, or passing the interaction up to a parent component.

All of these behaviors make up the interactive experiences that users have come to expect from modern web applications. And with React’s component-based architecture and powerful state and effect management capabilities, developers are able to build these complex, interactive UIs in a modular and maintainable way.