Skip to content

Latest commit

 

History

History
83 lines (51 loc) · 3.16 KB

LAB.md

File metadata and controls

83 lines (51 loc) · 3.16 KB
Raw

💻 Lab 2 - Generate a React app

⏰  Estimated time: 15-20 minutes

In this lab we'll generate our first React application within the new monorepo.

📚 Learning outcomes:

  • Get familiar with generating new apps within your workspace using the Nx CLI

📲 After this workshop, your app should look similar to this:

App Screenshot screenshot of lab2 result

🏋️‍♀️ Steps:

  1. Make sure you can run Nx commands:

    • try out nx --version and see if it outputs a version number

    • install the CLI globally: npm i -g nx

    • if you don't want to install it globally, use npx/yarn/pnpm nx (depending on the installed package manager) instead of nx in all the commands in the upcoming labs

      Please make sure you are using the latest version of Nx (17+)

  2. Run nx list to see which plugins you have installed

  3. Add the React plugin: npm i -S @nx/react (or yarn add @nx/react or pnpm add @nx/react)

  4. Let's also add Material UI so we can use some of their components: npm i -S @mui/material @emotion/react @emotion/styled (or yarn add ... or pnpm add ...)

  5. Use the @nx/react plugin to generate an React app called store in your new workspace

    ⚠️Important: Make sure you add React Router, select SCSS as a style, select cypress as E2E test runner, and use the Webpack bundler when asked!

    🐳   Hint Nx generate cmd structure

  6. Create a fake-api.ts file in your new app's src folder that returns an array of some games (you can just copy the code from here)

    ⏳Reminder: When you are given example files to copy, the folder they're in hints to the folder and filename you can place them in when you do the copying

  7. Add some basic styling to your new component and display the games from the Fake API (to not spend too much time on this, you can copy it from here .tsx / .scss - and replace the full contents of the files)

  8. You can get the example game images from here

    ⚠️  Make sure you put them in the correct folder

  9. Serve the app: nx serve store

  10. See your app live at http://localhost:4200/

  11. Inspect what changed from the last time you committed, then commit your changes

screenshot of lab2 result

Your app should look similar to the screenshot above!

Now we're starting to see some content! But the ratings also don't look that good - we'll fix those in Lab 5.

🎓  If you get stuck, check out the solution

➡️  Next lab ➡️