react.dev/content/docs/hello-world.md

id	title	permalink	prev	next	redirect_from
hello-world	Hello World	docs/hello-world.html	cdn-links.html	introducing-jsx.html	[docs/ docs/index.html docs/getting-started.html docs/getting-started-ko-KR.html docs/getting-started-zh-CN.html]

The smallest React example looks like this:

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

It displays a heading saying "Hello, world!" on the page.

The next few sections will gradually introduce you to using React. We will examine the building blocks of React apps: elements and components. Once you master them, you can create complex apps from small reusable pieces.

Following Along

The easiest way to get started with React is to use this Hello World example code on CodePen. You don't need to install anything; you can open it in another tab and follow along as we go through examples. If you'd rather use a local development environment, check out the Installation section.

Knowledge Level Assumptions

React is a JavaScript library, and so we'll assume you have a basic understanding of the JavaScript language. If you don't feel very confident, we recommend going through a JavaScript tutorial to check your knowledge level and enable you to follow along this walkthrough without getting lost. It might take you between 30 minutes and an hour, but as a result you won't have to feel like you're learning both React and JavaScript at the same time.

This walkthrough also uses some of the newer JavaScript syntax in the examples. If you haven't worked with JavaScript in the last few years, these three points should get you most of the way:

• We define variables with let and const statements. For the purposes of this walkthrough, you can consider them equivalent to var.
• We use the class keyword to define JavaScript classes. There are two things worth remembering about them. Firstly, unlike with objects, you don't need to put commas between class method definitions. Secondly, unlike many other languages with classes, in JavaScript the value of this in a method depends on how it is called.
• We sometimes use => to define "arrow functions". They're like regular functions, but shorter. For example, x => x * 2 is roughly equivalent to function(x) { return x * 2; }. Importantly, arrow functions don't have their own this value so they're handy when you want to preserve the this value from an outer method definition.

Don't worry if this is too much to take in at once. The MDN JavaScript Reference is a stellar resource, and you can consult it whenever you get confused by something.

Also, when you feel unsure about what some newer syntax means, you can use the Babel REPL with the ES2015 preset to check what equivalent older syntax it compiles to.