02-RunningYourProject.md

Lab 2: Running Your Project

Objectives

• Run the project
• Make a change and see the app update
• Stop the project

Steps

Run the project

1. Run one of the following commands:

   npm

   npm start

   Yarn

   yarn start

2. After the application builds, it will automatically open your Chrome browser to http://localhost:3000.

3. Verify the React logo is displayed in the browser.

Make a change and see the app update

1. Add some additional text (exclamation points) in the render method of the App component as shown below.

   src\App.js

   function App() {
   return (
       <div className="App">
       <header className="App-header">
           <img src={logo} className="App-logo" alt="logo" />
           <p>
           Edit <code>src/App.js</code> and save to reload.
           </p>
           <a
           className="App-link"
           href="https://reactjs.org"
           target="_blank"
           rel="noopener noreferrer"
           >
   -        Learn React
   +        Learn React!!!
           </a>
       </header>
       </div>
   );
   }

2. Save your changes to the file.

   In the VS Code menu bar you can turn on File > Autosave and this is recommended for the course.

3. Verify the additional text is displayed in your browser.

   The page will automatically reload if you make changes to the code. The file saves then the code compiles then the browser refreshes.

   

Stop the Project

1. Focus your cursor in the command prompt (Windows) or terminal (Mac).
2. Type Ctrl + C.

   On Windows you will be prompted with Are you sure you want to... (Y/N)...type y.

3. Use what you learned earlier in the lab to restart the application.

---

✔ You have completed Lab 2