Search⌘ K
Home
Courses
The Road to React: The One with Hooks

Meet the First React Component

Explore the fundamentals of creating your first React function component, called the App component. Learn how JSX works inside this component and understand how variables behave within function components to build a solid React foundation.

We'll cover the following...

Our first React component is in the src/App.js file, which should look similar to the example below. The file might differ slightly because create-react-app will sometimes update the default component’s structure.

Node.js
import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          Href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}
export default App;

This file will be our focus throughout this tutorial unless otherwise specified. Let’s start by reducing the component to a more lightweight version for getting you started without too much boilerplate code from ...