React Basics

React ES6

React Hooks

React First App

Your First React App

What you'll learn

  • Understand the main ideas in React First App.
  • See a working example and explanation to help you learn by doing.
  • Follow a clear path to the next lesson in this topic.

When to use this lesson

Use this lesson when you want to understand the key concepts behind React First App.

❮ Previous Next ❯

Your First React App

Now that you have your React environment set up, let's explore your first React application.

When you create a new React app, you will see a bunch of files and folders. The most important file to look at right now is src/App.js. This is your main React component that gets rendered onto the screen.

The App Component

Open src/App.js in your code editor and replace its contents with the following code:

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

Save the file. Your browser will automatically reload, and you will see "Hello, React World!" on the screen. Congratulations, you've just modified your very first React app!

❮ Previous Next ❯