Your First React App: Edit App.jsx & Run React

Running and Editing Your First React App

Making Your First Change

Open src/App.jsx and replace everything in it with this:

src/App.jsx

function App() {
  const studentName = "Priya";
  const courseName = "Full Stack Development";

  return (
    <div>
      <h1>Student Dashboard</h1>
      <p>Welcome back, {studentName}</p>
      <p>Currently enrolled in: {courseName}</p>
    </div>
  );
}

export default App;

Save the file.

How It Works

• const studentName = "Priya"; a normal JavaScript variable inside the component function.
• {studentName} curly braces let you insert a JavaScript value into JSX.
• Everything is wrapped in a single <div>. A component must return one top-level element.
• export default App; makes App importable by main.jsx.

Output

The browser updates immediately without you refreshing, and shows:

Student Dashboard
Welcome back, Priya
Currently enrolled in: Full Stack Development

This instant update is called Hot Module Replacement. It is one of the main reasons React development feels fast.

Understanding npm Scripts

Open package.json and look at the scripts section:

You will use npm run dev throughout this tutorial. npm run build matters only when you deploy.

Practice Task

Modify App.jsx to display:

• Your own name
• A course you are learning
• The number of lessons you have completed

Store each value in its own variable and display all three using curly braces.