Welcome to the tiny triumph of frontend development where we make a web page say Hello World and pretend we understood everything. This guide walks you through a beginner friendly React tutorial that uses Create React App to scaffold a project fast and renders a simple JSX component to the DOM. You will learn about components JSX and how to run the dev server so you can watch your changes live like a responsible code voyeur.

What you will build

A minimal React app that renders a Hello World component in your browser. It demonstrates the basic project setup with Create React App the anatomy of a functional component and how to start the dev server. Think of this as the warm up before state hooks routing and dramatic API calls.

Step 1 Create a new React project

Open a terminal and run the official bootstrap tool to scaffold a project. This gives you folders and scripts so you do not have to wire everything by hand.

npx create-react-app my-app

Once that finishes change into the project folder and inspect the structure. You will see src public and package json files that handle build scripts and dependencies.

Step 2 Edit the main component

Open src/App js and replace the placeholder markup with a tiny functional component. Functional components are short and they play nicely with modern React patterns. JSX looks like HTML but it is actually JavaScript under the hood.

function App() {
  return (
    

      Hello World
    
  )
}

export default App

Remember to keep your JSX wrapped in a single parent element. If you try to return two sibling elements without a wrapper React will complain like a teacher who just found gum on the desk.

Step 3 Render the component in the browser

Open src index js and ensure the root file imports React DOM and renders your App component. The default bootstrap does this for you but it is worth a peek to see how React DOM ties your component tree to the actual DOM.

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'

ReactDOM.render(
  ,
  document.getElementById('root')
)

Step 4 Start the development server

Run the dev server and enjoy live reload as you change files. It is almost as satisfying as a perfectly timed joke.

npm start

Your browser should open and display the Hello World message. Edit src/App js and watch the page update automatically. If nothing appears check the browser devtools console for errors and stack traces.

Common gotchas and quick fixes

• Missing closing tag or a stray comma in JSX will break the compile step. Check the console it will usually point you to the file.
• Forgetting export default will leave your root file wondering where the component went. Export it and move on.
• JSX requires a single parent node so use a wrapper div or a fragment when needed.

What comes next

Once Hello World is working you can add state hooks to make things dynamic introduce routing to navigate between views and fetch data from APIs to make the app stop pretending. Learn more about component composition React DOM and frontend development patterns as you grow beyond the tutorial.

If you get stuck open the browser devtools console and read the error message like a treasure map. Most problems are simple typos and forgotten exports so breathe and fix the little crimes against syntax.