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.
Top comments (3)
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 .
Great job ! you can map child components .