Your First React App
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.
