Flash cards
Review the key moves
What is the main idea behind Your First React App?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
Which statement best captures the main point of this lesson?
Complete the missing token from the example code.
___ { useState } from 'react'Put the learning moves in the order that makes the concept easiest to apply.
Now that your development environment is set up, let's try to modify the default app to display "Hello, World!".
Modify the React App
Look in the my-react-app directory, and you will find a src folder. Inside the src folder there is a file called App.js , open it and it will look like this:
Example
This is the default content of the App.jsx file in the src folder:
import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
function App() {
const [count, setCount] = useState(0)
return ( <> <div> <a href="https://vitejs.dev" target="_blank"> <img src={viteLogo} className="logo" alt="Vite logo" /> </a> <a href="https://react.dev" 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> </> )
}
export default AppTry replacing the entire file content with the code below and save the file.
Example
Replace all the content of the App.jsx file with the code below:
function App() {
return ( <div className="App"> <h1>Hello World!</h1> </div> );
}
export default App;See the changes in the browser when you click Save.
Notice that the changes are visible immediately after you save the file, you do not have to reload the browser!
The result
Congratulations! You've just modified your first React application.