Kavindu udara
SE Undergaduate
github-profile-image

Components in React

Posted on Dec 1, 2024

React components are the building blocks of React applications. They allow developers to break the UI into reusable, independent pieces.

Functional Components vs Class Components

Aspect Functional Components Class Components
Definition Plain JavaScript functions that return JSX. ES6 classes that extend React.Component.
State Uses the useState and useEffect hooks (introduced in React 16.8). Uses this.state for managing state.
Lifecycle Methods Replaced by hooks like useEffect. Explicit lifecycle methods like componentDidMount.
Syntax Simpler and more concise. More verbose due to class structure.
Performance Generally lighter and faster. Slightly heavier because of class overhead.
Example
Functional Component: Class Component:
```jsx ```jsx
function Greet() { class Greet extends React.Component {
return <h1>Hello</h1>; render() {
} return <h1>Hello</h1>;
``` }

When to Use?

  • Use functional components whenever possible; they are the modern and preferred approach. Class components are now rarely used in new projects.

How to Create and Export Components

  1. Creating a Functional Component

    // Greet.jsx
function Greet() {
return <h1>Hello, World!</h1>;
}
export default Greet;

  2. Creating a Class Component

    // Welcome.jsx
import React, { Component } from 'react';
class Welcome extends Component {
render() {
    return <h1>Welcome to React!</h1>;
    }
}
export default Welcome;

  3. Named Exports You can export multiple components from a file:

// Greetings.jsx
export function Hello() {
    return <h1>Hello!</h1>;
}

export function Goodbye() {
    return <h1>Goodbye!</h1>;
}

Importing Components and Using Them Inside Other Components

  1. Default Export Import and use a default exported component
import Greet from './Greet';

function App() {
    return (
        <div>
            <Greet />
        </div>
    );
}
export default App;
  1. Named Exports Import and use named exported components
import { Hello, Goodbye } from './Greetings';

function App() {
    return (
        <div>
            <Hello />
            <Goodbye />
        </div>
    );
}
export default App;
  1. Aliasing Components Rename components during import
import { Hello as Hi } from './Greetings';

function App() {
    return <Hi />;
}
export default App;
  1. Composing Components Use components inside other components to build a hierarchy
import Greet from './Greet';

function Header() {
    return (
        <header>
            <Greet />
            <h2>This is a header</h2>
        </header>
    );
}

export default Header;

Summary

  • Functional Components are the modern standard due to hooks and simplicity.
  • Components can be exported as default or named exports.
  • You can compose a rich UI by importing and using components inside other components.
    This modular structure makes React scalable and maintainable.

References