Understanding Components

You will learn

• What are components?
• Functional vs. Class components.
• JSX (JavaScript XML) syntax.
• Nesting components

What are Components?

In React, components are the building blocks of a user interface. A component is a reusable, self-contained piece of code that represents a part of the UI. It can be as small as a button or as complex as an entire page. Components allow you to break down your UI into manageable and modular pieces, making it easier to develop, test, and maintain your code.

💡 In React, it's a common convention to name components using PascalCase (also known as UpperCamelCase), especially for those meant to be used as custom React components. This naming convention helps distinguish your components from regular HTML elements and makes it clear that they are React components.

In React, there are two main types of components: functional components and class components.

Functional vs. Class Components:

Functional Components: Functional components are the simpler of the two. They are JavaScript functions that take in props (more on this later) and return React elements. Functional components are easy to read, write, and test. With the introduction of React Hooks, functional components can now also manage state and have lifecycle features.

Example of a functional component:

import React from 'react';

const MyFunctionalComponent = (props) => {
  return (
    <div>
      <p>Hello, {props.name}!</p>
    </div>
  );
};

export default MyFunctionalComponent;

Class Components: Class components are ES6 classes that extend from React.Component. They have additional features such as local state and lifecycle methods. Before the introduction of Hooks in React 16.8, class components were the primary way to handle state and side effects.

Example of a class component:

import React, { Component } from 'react';

class MyClassComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
      </div>
    );
  }
}

export default MyClassComponent;

JSX (JavaScript XML) Syntax:

JSX is a syntax extension for JavaScript recommended by React. It looks similar to XML or HTML, but it's actually closer to JavaScript. JSX allows you to write HTML elements and components in a syntax that closely resembles XML or HTML. It makes React code more concise and expressive.

Example of JSX in a component:

import React from 'react';

const MyJSXComponent = () => {
  return (
    <div>
      <h1>Hello, React!</h1>
      <p>This is a JSX component.</p>
    </div>
  );
};

export default MyJSXComponent;

Nesting Components:

In React, one of the powerful features is the ability to nest components within each other, creating a hierarchy of components that build up the user interface. This approach makes it easy to manage and organize complex UIs. Let's explore how to nest components using functional.

// ButtonComponent.js
import React from 'react';

// Button functional component
const Button = () => {
  return <button>Submit</button>;
};

export default Button;

Now, let's create another component that imports and uses the Button component:

// FormComponent.js
import React from 'react';
import Button from './ButtonComponent';

// Form functional component that uses the Button component
const Form = () => {
  return (
    <form>
      <h2>Sample Form</h2>
      <label>
        Username: <input type="text" />
      </label>
      <label>
        Password: <input type="password" />
      </label>
      <Button />
    </form>
  );
};

export default Form;

In this example, the Form component imports the Button component from './ButtonComponent' and uses it within its JSX. This demonstrates how you can create modular and reusable components, where one component can be exported and utilized in another.

Make sure that the file paths are adjusted based on your project structure. This way, you can easily organize your components into separate files and reuse them across different parts of your application.