React.js • Beginner Learning Page

Hello World in React.js

Build your first React application, understand the App component, and see how React turns a component's returned JSX into content in the browser.

1. Create a React Project

Open the terminal and create a new React project using Vite.

1

Create the project

npm create vite@latest hello-react -- --template react
2

Move into the project folder

cd hello-react
3

Install the required packages

npm install
4

Start the development server

npm run dev
Open the app: Open the URL shown in the terminal. It is usually http://localhost:5173.

2. Open src/App.jsx

Replace the contents of src/App.jsx with this simple component:

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

export default App;
http://localhost:5173

Hello World!

3. What Does This Mean?

Let's understand the code in a very simple way.

function App() { ... }

We create a function called App.

Think of App as a box containing our webpage.

return ( ... )

return says: "Show this on the webpage."

<h1>Hello World!</h1>

<h1> is an HTML heading, so React displays:

Hello World!

export default App;

This tells React: "Make the App component available to other files."

The Complete Flow

Think of the process as a small pipeline:

App.jsx
↓
function App()
↓
return <h1>Hello World!</h1>
↓
React displays it in the browser
ELI10 idea: You can think of App as a reusable box. The return statement describes what should appear inside that box.

Important React Idea

In React, we usually create components.

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

This is our first React component: App.

Component A reusable piece of UI.
App Our first React component.
JSX The HTML-like UI returned by the component.

Quick Revision

  • Create a React project with Vite.
  • Move into the project folder and run npm install.
  • Start the development server with npm run dev.
  • Open src/App.jsx.
  • Create the App function component.
  • Use return to specify what is displayed.
  • export default App makes the component available to other files.
  • Component = a reusable piece of UI.