How to Write Your First React Hello World Program
Writing a React Hello World is the perfect first step. Here is how to do it, what is actually happening, and why it matters for learning React.
How to Write Your First React Hello World Program
Every React journey starts with Hello World. It sounds trivial, but your first React render is where you start to see how React differs from vanilla JavaScript.
The Simplest React Hello World
Using React via CDN, the smallest example loads two scripts, React and ReactDOM, grabs a DOM element, and calls ReactDOM.createRoot to render a heading.
What Is Actually Happening
You are not writing HTML directly. You are using JSX, which looks like HTML but compiles to JavaScript function calls. React.createElement creates a description of the UI, and ReactDOM turns that description into real DOM nodes.
Why Start With the CDN Approach
Loading React from a CDN lets you focus on React itself without configuring build tools. It is the fastest way to see React work in the browser. Just remember this approach is for learning, not production.
The Mistake Beginners Make Here
Beginners copy the Hello World, see it work, and move on without understanding what React did. Slow down. Ask why React.createElement exists and what ReactDOM does. This curiosity pays off later.
Next Step After Hello World
Once Hello World works, try rendering a list, passing props, and re-rendering on a button click. These small experiments build the intuition that makes hooks and components click later.
The Point
Hello World is not just a ritual. It is your first look at React's core idea: you describe the UI, and React handles the DOM. Understanding that one idea is the foundation of everything that follows.
Load React and ReactDOM from a CDN, create a root on a DOM element using ReactDOM.createRoot, and call root.render with a JSX element like <h1>Hello World</h1>. That is the simplest React Hello World.
No. JSX looks like HTML but it is syntax that compiles to JavaScript function calls, specifically React.createElement. Small differences exist, like using className instead of class, because JSX is JavaScript.
A CDN lets you start writing React immediately without setting up build tools. It keeps the focus on React concepts. However, the CDN approach is only for learning; real projects use a bundler like Parcel or Vite.
It creates a root that connects React to a real DOM element. Calling render on that root turns your JSX description into actual DOM nodes. It is the bridge between React's virtual UI and the browser.
Try rendering a list, passing props, and re-rendering on a button click. These small experiments build the intuition for components and reactivity that makes the rest of React easier to learn.
Ready to master React completely?
Want to upskill yourself, crack your next interview, and get your dream job? Join our comprehensive course to dive deeper with high-quality video tutorials, solve interview questions, and a premium community.
Master React
Want to upskill yourself, crack your next interview, and get your dream job? Join our comprehensive course.