React Series: React Component

Introduction

When you are developing a single page application using the DOM structure, you will face a challenge when you want to change a specific part of the application. The creation of React.js solved this problem. React.js is a component-based framework, and if you want to build an application with it, you should understand what components are. This article will teach you what components are and how to use them.

Prerequisites

• Have a good knowledge of HTML
• Have a good knowledge of CSS
• Have a good knowledge of Javascript
• Have a good knowledge of React

What Is A Component

Every piece of user interface (UI) in React.js is a component.
A component can include everything from the smallest UI in your application, such as a table, button, navbar, or card, to the entire page.

function RedButton() {
  return (
    <button>Click here</button>
  );
}

Components are said to be a fundamental concept in React.js and each component have their own logic and appearance, but they all exist in the same space and are bounded by the parent component. Depending on what you're building, you can create a reusable component that can be used repeatedly on your application.

Benefit Of Component

The advantage of using components is that because UIs are broken down into small pieces, they are easier to understand, reuse where necessary, and modify. A component should only do one thing; if it needs to do more, it should be broken down into subcomponents.

How To Identify A Component

As shown below, each React component begins with a capital letter.

function BlueButton() {
  return (
    <button>Read more</button>
  );
}

The "export default" keyword is used to identify the main component. Knowing the main component in a file allows you to easily import it from other files.

export default function MyApp() {
  return (
    <div>
      <h2>React Component</h2>
      <BlueButton />
    </div>
  );
}

Conclusion

You can build your application with just one component, but this is risky because you will be unable to easily modify it. Breaking down your React application into components is important because the simplicity of your application's components determines its performance.