Components: The building blocks in React

Introduction

React, a JavaScript library for building user interfaces, revolves around the concept of components. A component is a modular and reusable piece of code that encapsulates a specific functionality or UI element. Understanding components is fundamental to mastering React.

Let's a create a component using arrow function syntax, that returns a simple HTML code. Writing HTML inside JavaScript is called JSX in React.

Example Code of Component:

const Introduction = () => {
  return (
    <div>
      <h1>Welcome to React Components</h1>
      <p>Learn how to leverage the power of components in React.</p>
    </div>
  );
};
ReactDOM.render(<Introduction />, document.getElementById("app"));

Thinking in React

React encourages a component-based architecture, where complex UIs are broken down into smaller, manageable components. This modular approach simplifies development, debugging, and maintenance. When approaching a UI problem in React, think in terms of components and their interactions.

Let's say our website has a Header and a Sidebar. Refer to the below example:

const Header = () => {
  return <h2>This is a Header Component</h2>;
};

const Sidebar = () => {
  return <div>This is a Sidebar Component</div>;
};

const App = () => {
  return (
    <div>
      <Header />
      <Sidebar />
      {/* Other components */}
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("app"));

Single Page Application

React is well-suited for building Single Page Applications (SPAs), where a single HTML page is dynamically updated as the user interacts with the app. Components play a crucial role in SPAs, allowing developers to create a seamless user experience by updating only the necessary parts of the UI.

Traditionally, developers made separate HTML pages like home.html and profile.html for websites. In React, there's a single index.html for the Single Page App. Pages are implemented as components, so when users click a link, React loads the corresponding component. React Router creates a perception of multiple pages within the Single Page App.

Single Page Application Example:

const Home = () => {
  return <h1>Welcome to the Home Page</h1>;
};

const AnotherPage = () => {
  return <h1>Welcome to Another Page.</h1>;
};

const Profile = () => {
  return <h1>Welcome to User Profile!</h1>;
};

const App = () => {
  return (
    <Router>
      <header id="app-header">
        <nav id="app-nav">
          <li>
            <NavLink to="/" exact activeClassName="active">
              Home
            </NavLink>
          </li>
          <li>
            <NavLink to="/anotherPage" activeClassName="active">
              Another Page
            </NavLink>
          </li>
          <li>
            <NavLink to="/profile" activeClassName="active">
              Profile
            </NavLink>
          </li>
        </nav>
      </header>

      <Route path="/" exact component={Home} />
      <Route path="/anotherPage" component={AnotherPage} />
      <Route path="/profile" component={Profile} />
    </Router>
  );
};

Higher Order Components in React

Higher Order Components (HOCs) are functions that take a component and return a new component with enhanced capabilities. They enable code reuse, logic abstraction, and can be a powerful tool in building scalable React applications. HOCs are often used for cross-cutting concerns like authentication or data fetching.

Higher Order Components in React:

import React from 'react';

const withLogging = (WrappedComponent) => {
  return class extends React.Component {
    componentDidMount() {
      console.log(`Component ${WrappedComponent.name} is mounted`);
    }

    render() {
      return <WrappedComponent {...this.props} />;
    }
  };
};

const MyComponent = () => {
  return <div>This is my component</div>;
};

const EnhancedComponent = withLogging(MyComponent);

export default EnhancedComponent;

Conclusion

Components are the foundation of React development, enabling developers to create scalable and maintainable applications. Understanding their role and implementing them effectively is key to harnessing the full potential of React.

If you have any doubts, feel free to ask in comments.

Thanks for reading!