How to Render “Hello, World!” in React

Introduction#

React applications are built from components. A component is a reusable piece of user interface that returns markup for React to render.

In this tutorial, you will create a React application with Vite and update its main component to display a Hello, World! message.

You will need Node.js and npm installed on your computer.

Create the project#

Open a terminal and run the following command:

npm create vite@latest hello-world

Follow the prompts and choose React, JavaScript, and ESLint. When asked whether to install dependencies and start the app, choose Yes.

This command creates a new Vite project named hello-world using Vite's React template, installs its dependencies, and starts a local dev server, typically at http://localhost:5173. Open that URL in the browser.

If you weren't asked whether to install dependencies and start the app, or you chose No, run the following commands instead:

cd hello-world
npm install
npm dev

Open the project#

Open the hello-world directory in your code editor.

The project includes several files and directories. For this tutorial, you only need to edit src/App.jsx.

Update the React component#

Open src/App.jsx and replace its contents with the following code:

import "./App.css";

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

export default App;

The App function is a React component. It returns an h1 element containing the text Hello, World!.

The export default App statement makes the component available to the rest of the application. The project’s entry point imports this component and renders it in the browser.

That's it. Refresh the browser if needed and it should display your "Hello World!" message.