REACT Tutorial



COMPONENTS IN REACT


Components in React

Components are the building blocks of any React application. They let you split the UI into independent, reusable pieces, and think about each piece in isolation.

Types of Components

  • • Functional Components
  • • Class Components

Why Use Components?

Components help you organize your code, make it reusable, and improve maintainability in large apps.

Functional Component Example

function Welcome(props) {
  return <h1>Hello, {props.name}!</h1>;
}

This is a simple React function that accepts props and returns JSX to display a greeting.

Class Component Example

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

Class components provide additional features like lifecycle methods but are less commonly used with React Hooks now.

Remember: Components must start with a capital letter. React treats components starting with lowercase letters as built-in HTML tags.

How Components Work Together

Components can be nested inside other components to build complex UIs. Example:

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Mike" />
    </div>
  );
}

This App component renders two Welcome components with different names.


🌟 Enjoyed Learning with Us?

Help others discover Technorank Learning by sharing your honest experience.
Your support inspires us to keep building!

Leave a Google Review