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.
Click the link above to open an online editor. Feel free to make some changes, and see how they affect the output. Most pages in this guide will have editable examples like this one.
How to Read This Guide
This is the first chapter in a step-by-step guide about main React concepts. You can find a list of all its chapters in the navigation sidebar. If you’re reading this from a mobile device, you can access the navigation by pressing the button in the bottom right corner of your screen.
Every chapter in this guide builds on the knowledge introduced in earlier chapters. You can learn most of React by reading the “Main Concepts” guide chapters in the order they appear in the sidebar. For example, “Introducing JSX” is the next chapter after this one.
In this guide, 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.
If you prefer to learn by doing, you might also want to check out the Tutorial. It goes at a faster pace than this guide, and is more practically oriented. You might find this guide and the tutorial complementary to each other.
Knowledge Level Assumptions
Let’s Get Started!
Keep scrolling down, and you’ll find the link to the next chapter of this guide right before the website footer.