Creating a React Component

In this tutorial, we will learn how to create a React component from scratch. React components are the fundamental building blocks of a React application, enabling you to build modular, reusable pieces of UI. This content was created in 2016, so some updates have been added as comments to reflect the modern best practices in React development.

What is a React Component?

A React component is essentially a JavaScript function or class that can render part of the user interface. Components allow you to break down your application into smaller, reusable pieces, making it more organized and maintainable.

React components can be created as function components or class components. In 2016, both approaches were common, but today functional components are generally preferred because of their simplicity and the introduction of React Hooks.

Critical Update (2024): Functional components and hooks are now the recommended approach in React. Hooks such as useState and useEffect allow functional components to manage state and side effects, replacing the need for most class components.

Creating a Simple React Component

Let’s start by creating a simple React component using a function:

Functional Component

import React from 'react';

function Greeting() {
  return <h1>Hello, React!</h1>;
}

export default Greeting;

Explanation

• Import React: To create a React component, you need to import React from the 'react' package.
• Function Component: Greeting is a functional component that returns an h1 element with the text "Hello, React!".
• Export: We export the component to use it in other parts of the application.

Rendering a Component

To render the component, you need to use ReactDOM. ReactDOM is a package that takes care of rendering your components to the browser DOM.

import React from 'react';
import ReactDOM from 'react-dom';
import Greeting from './Greeting';

ReactDOM.render(
  <Greeting />,
  document.getElementById('root')
);

Explanation

• ReactDOM.render(): This method renders the Greeting component into the DOM element with the ID root.

Critical Update (2024): In React 18, ReactDOM.render() has been replaced with the createRoot() API for better performance and support for concurrent rendering.

Class Component (Legacy Approach)

In 2016, class components were often used to create components with internal state and lifecycle methods.

import React, { Component } from 'react';

class Greeting extends Component {
  render() {
    return <h1>Hello, React!</h1>;
  }
}

export default Greeting;

Explanation

• Class Component: Greeting is a class component that extends React.Component. It must have a render() method that returns the JSX to be displayed.

Note: Class components are still supported, but modern React applications generally use functional components and hooks for simplicity and easier maintenance.

Using Props in a Component

Props (short for properties) are used to pass data to components. Let’s modify our Greeting component to accept a name prop:

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

// Using the component
<Greeting name="John" />

Explanation

• Props: The props object allows you to pass data to a component. In this example, the Greeting component takes a name prop and renders it inside the h1 tag.

Critical Update (2024): Modern React now encourages destructuring props directly in the function parameter for more concise code:

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

Conclusion

In this tutorial, you learned how to create a simple React component and how to render it using ReactDOM. We also covered both functional and class components, though today functional components with hooks are the preferred method for building React applications.

For more tutorials and to continue your learning journey, visit the full course at 02geek.