What Is React?

Part of the Fundamentals section of Coddy's React journey — lesson 1 of 42.

React is the world's most popular library for building user interfaces. Facebook, Netflix, Airbnb: the interactive parts of the web you use every day are built with it.

The big idea is simple: instead of writing one giant page, you build small, reusable pieces called components. A button is a component. A profile card is a component. A whole page is just components inside components.

A component is nothing scary: it's a JavaScript function that returns what should appear on screen:

function App() {
    return <h1>Hello, React!</h1>;
}

That HTML-looking thing inside JavaScript is called JSX. It lets you describe the screen right where the logic lives. React takes what your components return and keeps the real page in sync. You describe what you want, React figures out how to update the browser.

In this course you'll edit App.jsx, the main component of a small React app. The preview on the right shows your app live as you type. Let's build something.

Challenge

Beginner

Here is your first React component, already written for you.

What to do:

Read App.jsx: it is a function that returns JSX.
Press the Run button.
Watch the preview on the right render what the component returned.

That is the whole React loop: a component returns JSX, and React puts it on the screen. From the next lesson on, you write the JSX yourself.

Try it yourself

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div id="root"></div>
        <script type="module" src="main.jsx"></script>
    </body>
</html>