Creating and rendering components in React

One of the key features of React is its component-based architecture. Components are the building blocks of React applications, and are used to create reusable UI elements that can be composed together to create more complex UIs. In this article, we’ll explore how to create and render components in React.

Creating a component

In React, components can be created in two ways: as a function component or as a class component.

Function components

Function components are the simplest type of component in React, and are essentially JavaScript functions that return a React element. Here’s an example of a function component that displays a simple heading:

jsx

function Heading() {
  return <h1>Hello, world!</h1>;
}

To use this component in your React application, you can simply include it in another component or in your app’s top-level JSX code:

jsx

function App() {
  return (
    <div>
      <Heading />
    </div>
  );
}

This code creates a new App component that includes the Heading component. When the App component is rendered, the Heading component will also be rendered and display the heading.

Class components

Class components are another type of component in React, and are defined as ES6 classes that extend the React.Component class. Here’s an example of a class component that displays a simple heading:

jsx

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

To use this component in your React application, you can include it in the same way as a function component:

jsx

function App() {
  return (
    <div>
      <Heading />
    </div>
  );
}

This code creates a new App component that includes the Heading component. When the App component is rendered, the Heading component will also be rendered and display the heading.

Rendering a component

To render a component in React, you simply include the component in your JSX code. React will take care of rendering the component and displaying it in the UI.

Here’s an example of rendering a component in React:

jsx

function App() {
  return (
    <div>
      <Heading />
    </div>
  );
}

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

This code creates a new App component that includes the Heading component, and then uses the ReactDOM.render() function to render the App component and display it in the UI. The ReactDOM.render() function takes two arguments: the component to render, and the DOM element to render it in.

Conclusion

Creating and rendering components is an essential part of building React applications. Components allow you to create reusable UI elements that can be composed together to create more complex UIs. In this article, we explored how to create and render components in React, using both function components and class components. With these tools in your toolbox, you’re well on your way to building powerful and dynamic web applications with React.