Component Structure | Components and Props Tutorial

Component Structure in React

React applications are built by composing smaller, reusable pieces of code called components. Components let you split up your UI into independent, manageable parts. This makes your code easier to understand, test, and maintain.

What is a Component?

Think of components as building blocks. They encapsulate their own logic and rendering. A component can be as simple as a button or as complex as an entire page layout.

There are two main types of components:

Function Components: These are JavaScript functions that return JSX. They are simpler to write and are often preferred for presentational components (components that just display data).
Class Components: These are JavaScript classes that extend React.Component. They have more features, like state and lifecycle methods, and are often used for more complex components that manage their own data and behavior. (While still supported, function components with Hooks are now generally preferred even for complex logic).

Component Structure - A Basic Example (Function Component)

Let's look at a simple function component:

import React from 'react';

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

export default Welcome;

Explanation:

import React from 'react';: Imports the React library, which is essential for defining components.
function Welcome(props) { ... }: Defines a function named Welcome. This is our component. It accepts an argument called props (short for properties).
return <h1>Hello, {props.name}</h1>;: This is the JSX that the component renders. It displays an <h1> heading with a greeting, using the name property passed in through props.
export default Welcome;: Makes the Welcome component available for use in other parts of your application.

Component Structure - A Basic Example (Class Component - Less Common Now)

import React from 'react';

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

export default Welcome;

Explanation:

import React from 'react';: Imports the React library.
class Welcome extends React.Component { ... }: Defines a class named Welcome that inherits from React.Component.
render() { ... }: The render() method is required in class components. It returns the JSX to be rendered.
return <h1>Hello, {this.props.name}</h1>;: Similar to the function component, this renders an <h1> heading, but accesses the name property using this.props.name.
export default Welcome;: Makes the Welcome component available for use.

Rendering Components

To use a component, you "render" it within another component or directly into the root element of your application.

import React from 'react';
import ReactDOM from 'react-dom/client';
import Welcome from './Welcome'; // Assuming Welcome.js is in the same directory

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

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

Explanation:

import Welcome from './Welcome';: Imports the Welcome component.
<Welcome name="Alice" />: This is how you use the Welcome component. We're passing a name prop with the value "Alice". This is similar to passing arguments to a function.
<Welcome name="Bob" />: Another instance of the Welcome component, this time with the name prop set to "Bob".
root.render(<App />);: Renders the App component into the DOM element with the ID "root".

Component Composition

React encourages building complex UIs by composing smaller components. You can nest components within each other to create a hierarchical structure. This makes your code more modular and easier to reason about.

For example, you might have a Profile component that contains Avatar, Name, and Bio components. This allows you to reuse these smaller components in other parts of your application.

Key Takeaways

Components are the building blocks of React applications.
There are function and class components (function components with Hooks are generally preferred).
Components receive data through props.
Component composition allows you to build complex UIs from smaller, reusable parts.
JSX is used to describe the UI within components.