Ahoy React

Let’s get coding! We’ll start with the simplest of simple React examples: The hello world.

Over to the right see the tab App.js. This is a JavaScript file that exports a simple React Functional component. Functional components are just regular JavaScript functions, but they return HTML to be rendered in the DOM. This is not part of regular JavaScript, React uses an extension called JSX that allows any HTML to be evaluated like a regular JavaScript expression, and any JavaScript expressions to be evaluated inside HTML. That's what makes React brilliant! It combines markup with scripting in a seamless way.

Any HTML element can be used in JSX. You can see we have rendered an <h1> tag. Unlike HTML, all tags must be closed off (with a closing tag, like </h1>). For a more complete comparison between JSX and HTML, see our lesson on JSX vs HTML.

Over to our right you will see a text editor and a browser rendering the React app.

Task 1: Render some JSX in the app

To start, change the <h1> content from "Ahoy, React!" to say "The Captain's Crew" Then, insert a JSX element below the <h1> tag:

<p> A simple app to create tasks </p>

When you're done, hit "next".