What are components in React js?
The basic definition of a component is “ Components represent part of UI ”.In other words, our application is a collection of multiple components.
In the above diagram, this traditional web application consists of five components that are header, side navbar, main content, footer, and one component to contain all other components known as root component. The root component is commonly known as the app component. Each of the four nested components(header, footer, side navbar, main content) describes only part of UI. These components are reusable means the same components can be used with different properties to display different data. Since now we understand that components can contain other components we can reuse the left-side navbar as the right navbar with the main content.
Code for components is done in a javascript file. For example, an app component named app.js you can also have a components file with a .jsx extension.
Code inside components depends upon the type of component. In react we have two types of components that are Stateless Functional Component and Stateful Class Component.
Stateless Functional Component is basically javascript that returns HTML which describes the UI.
function HelloWorld(){
returns <h1>Hello World</h1> ;
}
OUTPUT:
Hello World
Stateful Class Component is es6 classes that extend the component class from the react library. They must have a render method returning HTML.
class HelloWorld extends React.Component {
render(){
return <h1>Hello World</h1> ;
}
}
OUTPUT:
Hello World