Welcome to the tiny heroic moment where you make a web page say Hello World and feel like a wizard. This guide walks a beginner through creating a React hello world app using Node and VS Code without pretending you need a PhD in build systems.

What you need before we break the internet

Install Node and have a code editor ready. VS Code is the usual suspect. You will also need a terminal and a willingness to type commands that actually do things for you.

• Node and npm installed from the official site
• VS Code or another editor you tolerate
• About 5 minutes and mild curiosity

Create the React project

Use create react app to scaffold a starter project so you do not have to pretend you enjoy configuring webpack. Run this in a terminal in the folder where you want your project.

npx create-react-app hello-world

This command uses create react app to set up React, JavaScript tooling, and a sensible default file layout for front end development.

Open the project and peek around

Launch VS Code in the new folder and scan the source tree. The important bits are in the src folder and the public folder has the root div that React mounts into. The entry point is index.js so no need to memorize every file right now.

Edit the App component to show Hello World

Open src/App.js and replace the default content with a small function component. Function components are modern and concise which means less ceremony and more output.

function App() {
  return (
    

      
Hello World
      
This is a React hello world example for beginners
    
  )
}

export default App

Start the development server and see it live

Run the dev server and enjoy instant updates while you edit files. It hot reloads so your changes show up without ritual sacrifice.

npm start

Open a browser at http slash slash localhost port 3000 to view your app. If the page says Hello World then congratulations you have achieved peak beginner front end glory.

Optional build for production

When you want to deploy run a build command that optimizes assets for the real world. Then host the static files on any platform that serves HTML and JavaScript.

npm run build

What to explore next

• Props and simple component composition
• Local state and hooks such as useState
• Client side routing with react router
• Deploying the build to a static host

This short tutorial covered installing Node creating a project with create react app editing a component to render Hello World and running a dev server to preview the result. Those steps give a safe foundation for learning more about React, JavaScript, and web development without getting lost in configuration stew.

Go forth and make more components. Or at least change the greeting to something snarky and satisfying.