You just saw how to create your first React application.

This application comes with a series of files that do various things, mostly related to configuration, but there’s one file that stands out: App.jsx.

App.jsx is the first React Component you meet.

Its code is this:

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import './App.css'

function App() {
  const [count, setCount] = useState(0)

  return (
    <div className="App">
      <div>
        <a href="https://vitejs.dev" target="_blank">
          <img src="/vite.svg" className="logo" alt="Vite logo" />
        </a>
        <a href="https://reactjs.org" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
        <p>
          Edit <code>src/App.jsx</code> and save to test HMR
        </p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </div>
  )
}

export default App

An application built using React, or one of the other popular frontend frameworks like Vue and Svelte, for example, is typically built using dozens of components.

But let’s start by analyzing this first component. I’m going to simplify this component code like this:

function App() {
  return /* something */
}

You can see we define a function called App.

App is a function that in the original example returns something that at first sight looks quite strange.

It looks like HTML but it has some JavaScript embedded into it.

Simplified, it can also look like this:

function App() {
  return <p>test</p>
}

That is JSX, a special language we use to build a component’s output.

We’ll talk more about JSX in the next section.

A component is a function, so you can also use arrow functions to define it:

const App = () => {
  return <p>test</p>
}

The main difference here is that the first is a named function, so when you’ll run into errors, you’ll see the component’s name in the error message. Which is a good thing.

In addition to defining some JSX to return, a component has several other characteristics.

A component can have its own state, which means it encapsulates some variables that other components can’t access unless this component exposes this state to the rest of the application.

A component can also receive data from other components. In this case, we talk about props.

Don’t worry, we’re going to look in detail at all those terms (JSX, State, and Props) soon.

Lessons in this unit:

0:	Introduction
1:	Setting up a React project with Vite
2:	▶︎ React Components
3:	Introduction to JSX
4:	Using JSX to compose UI
5:	The difference between JSX and HTML
6:	Embedding JavaScript in JSX
7:	Handling user events
8:	Install the React Developer Tools
9:	Getting started with JSX
10:	How to return multiple elements in JSX
11:	How to learn React
12:	Should you use jQuery or React?
13:	React concepts: declarative
14:	The Virtual DOM
15:	The roadmap to learn React
16:	What’s new in React 19
17:	How to install React
18:	The React Fragment
19:	React, how to transfer props to child components
20:	React PropTypes
21:	React DOM events on components
22:	How to pass a parameter to event handlers in React