Hey there!
In this article, we are going to see what is a Component in React.js.
If you prefer video, then check it out
In short, React components are a function or a class that returns Html.
Components come in two types Class component and Functional component.
Just like a function component takes an argument called props.
Here's an example of a Functional Component:
import React from 'react';
function FunctionalComponent(props) {
return (
<div>
<h2>{props.greeting} world form functional component</h2>
</div>
);
}
export default FunctionalComponent;
A Functional component is just a plain old JavaScript function. It could also be an arrow function.
In a functional component, we access props from the props argument.
Here's an example of a Class Component:
import React, { Component } from 'react';
class ClassComponent extends Component {
render() {
return (
<div>
<h2 className='class'>
{this.props.greeting} world form Class component
</h2>
</div>
);
}
}
export default CassComponent;
Here we created a simple Class component. To create a Class Component we need to first import the "Component" component from React. Then extends it to create a Class Component.
In a class component, we access props from "this.props".
To render these components, import them inside the app.js file and call them like this:
function App() {
return (
<div className='App'>
<ClassComponent greeting={"Hello" }/>
<FunctionalComponent greeting={"Hello" }/>
</div>
);
}
Conclusion:
That's it for today.
If you liked it don't forget to give it a like. And if you want to add anything to it please leave a comment below.
Thanks for reading.
Top comments (0)