How do you create a simple React component?

Build your first React component step by step and understand how it returns JSX to render UI.

beginnerFundamentalsreactcomponentjsxfunction

Published: 10/26/2025

Updated: 10/26/2025

A simple React component is just a function that returns JSX.

function HelloWorld() {
  return <h1>Hello, World!</h1>;
}

export default HelloWorld;

You can render this inside your app:

import HelloWorld from './HelloWorld';

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

✅ React automatically renders it to the DOM through <App />.

Get the latest frontend challenges, interview questions and tutorials delivered to your inbox.