React has two types of components function component and class components. The component composed together to form an upper-level component.
Function vs class component
function components are defined as the javascript function
where the pros parameter contains the property of the component.
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
The class components are defined as the class and are extended with the react component.
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
Composition of the component
the component can be combined together to form an upper-level component.
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
function App() {
return (
<div>
<Welcome name="Sara" />
<Welcome name="Cahal" />
<Welcome name="Edite" />
</div>
);
}
Make the component as much as you can split it. If you do that you can reuse the component in others so split it.
Latest comments (3)
Great job ! you can map child components .
When you'd you use function components and when would you use class components?
It depends on you. but if you want to have more time to enjoy with coding , maybe React Hook will be better . lol .