Components are bits of code that are freelance and reusable. They serve a similar purpose as JavaScript functions. However, work isolation and returns HTML via a render function.
A Component is one of the core building blocks of React. In other words, we can say that every application you will develop in React will be made up of pieces called components. Components make the task of building UIs much easier. You can see a UI broken down into multiple individual pieces called components and work on them independently and merge them all in a parent component which will be your final UI.
Components in React basically return a piece of JSX code which tells what should be rendered on the screen. In React, we mainly have two types of components:
- Functional Components: Functional components are simply JavaScript functions. We can create a functional component to React by writing a JavaScript function. These functions may or may not receive data as parameters, we will discuss this later in the tutorial. Below example shows a valid functional component in React:
Javascript
function Democomponent() { return <h1>Welcome Message!</h1>; } |
- Class Components: The class components are a little more complex than the functional components. The functional components are not aware of the other components in your program whereas the class components can work with each other. We can pass data from one class component to other class components. We can use JavaScript ES6 classes to create class-based components in React.
Below example shows a valid class-based component in React:
Javascript
class Democomponent extends React.Component { render(){ return <h1>Welcome Message!</h1>; } } |
Complete Reference:
- ReactJS | Components
- ReactJS | Components – Set 2
- ReactJS Pure Components
- ReactJS | Functional Components
- ReactJS | Lifecycle of Components
- Differences between Functional Components and Class Components in React
- Presentational vs container components
