Loading lesson path
Now that your development environment is set up, let's try to modify the default app to display "Hello, World!".Formula
Look in the my - react - app directory, and you will find a src folder. Inside the src folder there is a file calledApp.js, open it and it will look like this:
App.jsx file in the src folder:
import { useState } from 'react'Formula
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>
Formula
< h1 > Vite + React </h1 ><div className="card">
<button onClick={() => setCount((count) => count + 1)}>
count is {count}</button> <p>
Formula
Edit < code > src/App.jsx </code > and save to test HMR</p> </div>
Formula
< p className ="read - the - docs">Click on the Vite and React logos to learn more </p> </> )
}export default App Try replacing the entire file content with the code below and save the file.
App.jsx file with the code below:
function App() {
return (
<div className="App">Formula
< 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!
Congratulations! You've just modified your first React application.