DEV Community

Dhiraj kumar Nayak
Dhiraj kumar Nayak

Posted on

Components in react🔥

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.

Discussion (4)

Collapse
jsphwllng profile image
joseph

When you'd you use function components and when would you use class components?

Collapse
dingtian profile image
DingTian

It depends on you. but if you want to have more time to enjoy with coding , maybe React Hook will be better . lol .

Collapse
dingtian profile image
DingTian

Great job ! you can map child components .