What is React ⚛️ and the Concept of Components

React ⚛️ is a powerful JavaScript library for building user interfaces. Developed by Facebook in 2013, it revolutionized UI development with its component-based architecture and declarative approach. Whether you’re creating a simple web app or a complex system, React makes building reusable, dynamic UIs efficient and enjoyable.

This article dives into the fundamentals of React and its core concept: Components, with plenty of code examples to illustrate these ideas.

What is React?

At its core, React is a JavaScript library designed for building dynamic and interactive user interfaces. It focuses on the view layer of an application, following the Model-View-Controller (MVC) architecture. React makes it easy to create interfaces that update efficiently as your application’s data changes.

Why Choose React?

1. Reusable Components: Develop modular UIs by breaking them into independent, reusable components.
2. Virtual DOM: Faster updates by calculating changes in a lightweight Virtual DOM before updating the actual DOM.
3. Declarative: Describe what you want to see in the UI, and React handles the rest.
4. Rich Ecosystem: Leverage libraries like Redux, React Router, and Next.js to extend React’s capabilities.

The Concept of Components in React

React applications are built using components, which are the building blocks of a React app. A component is an independent piece of the UI that encapsulates its logic, structure, and styling.

Functional Components

Functional components are simple JavaScript functions that accept props as input and return React elements. They are the most common type of component in modern React applications.

Example: A Basic Functional Component

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

// Usage
<Welcome name="Alice" />;

Class Components

Class components are ES6 classes that extend the React.Component class. They were commonly used before the introduction of hooks.

Example: A Basic Class Component

import React, { Component } from 'react';

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

// Usage
<Welcome name="Alice" />;

The Anatomy of a Component

Example: Functional Component with State

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

Breakdown:

1. State Management: The useState hook is used to manage the state (count) within the component.
2. Props: Data can be passed to the component through props.
3. Events: The onClick event handler updates the state when the button is clicked.

Props vs State

Feature	Props	State
Definition	Data passed to a component from its parent.	Data managed within the component.
Mutability	Immutable (cannot be changed by the receiving component).	Mutable (can be updated within the component).
Usage	Used for passing data to child components.	Used for dynamic data that changes over time.

State in Components

State is a special object in React used to store data that a component needs to render. Functional components use the useState hook for state management.

Example: Counter with State

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

// Usage
<Counter />;

Props in Components

Props are arguments passed from a parent component to a child component, allowing data to flow down the component hierarchy.

Example: Passing Props

function Greeting({ name }) {
  return <h1>Welcome, {name}!</h1>;
}

function App() {
  return <Greeting name="John" />;
}

// Renders: Welcome, John!

Composing Components

React encourages nesting components to build complex UIs from smaller, reusable building blocks.

Example: Nested Components

function Header() {
  return <header><h1>My Website</h1></header>;
}

function Main() {
  return <main><p>This is the main content.</p></main>;
}

function Footer() {
  return <footer><p>© 2024 My Website</p></footer>;
}

function App() {
  return (
    <div>
      <Header />
      <Main />
      <Footer />
    </div>
  );
}

// Usage
<App />;

Lifecycle Methods in Class Components

Class components include lifecycle methods to perform actions during mounting, updating, and unmounting phases. For functional components, React hooks like useEffect replace these lifecycle methods.

Example: Lifecycle Methods

import React, { Component } from 'react';

class Timer extends Component {
  componentDidMount() {
    console.log('Timer mounted');
  }

  componentWillUnmount() {
    console.log('Timer unmounted');
  }

  render() {
    return <p>Timer running...</p>;
  }
}

// Usage
<Timer />;

Example: Lifecycle with useEffect

import React, { useEffect } from 'react';

function Timer() {
  useEffect(() => {
    console.log('Timer mounted');
    return () => console.log('Timer unmounted');
  }, []);

  return <p>Timer running...</p>;
}

// Usage
<Timer />;

Event Handling in React

React makes handling events simple. Event handlers are passed as props to elements and executed when the event occurs.

Example: Click Event

function Button() {
  function handleClick() {
    alert('Button clicked!');
  }

  return <button onClick={handleClick}>Click Me</button>;
}

// Usage
<Button />;

Example: Input Handling

import React, { useState } from 'react';

function InputExample() {
  const [text, setText] = useState('');

  function handleChange(event) {
    setText(event.target.value);
  }

  return (
    <div>
      <input type="text" value={text} onChange={handleChange} />
      <p>You typed: {text}</p>
    </div>
  );
}

// Usage
<InputExample />;

Conditional Rendering

React allows you to render components or elements conditionally based on application logic.

Example: Conditional Rendering

function UserStatus({ isLoggedIn }) {
  return isLoggedIn ? <p>Welcome back!</p> : <p>Please log in.</p>;
}

// Usage
<UserStatus isLoggedIn={true} />;

Lists and Keys

When rendering lists in React, it’s important to assign a unique key to each element to help React identify changes.

Example: Rendering a List

function ItemList({ items }) {
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}

// Usage
<ItemList items={['Apple', 'Banana', 'Cherry']} />;

Reusable Components

React encourages creating components that can be reused across the application to reduce redundancy.

Example: Reusable Button Component

function Button({ label, onClick }) {
  return <button onClick={onClick}>{label}</button>;
}

function App() {
  return (
    <div>
      <Button label="Save" onClick={() => alert('Saved!')} />
      <Button label="Cancel" onClick={() => alert('Cancelled!')} />
    </div>
  );
}

// Usage
<App />;

Conclusion

React is a powerful tool for building modern web applications. Its component-based architecture, coupled with features like props, state, and hooks, makes it possible to create dynamic, efficient, and reusable UIs. By mastering React’s core concepts and using its tools effectively, developers can deliver exceptional user experiences while maintaining clean and maintainable codebases. Ready to get started? Build your first React app and see the magic of components in action! 🚀

Comments

[Tom Österlund]

Nice one 👌🏻