Skip to content

Latest commit

 

History

History
89 lines (56 loc) · 3.41 KB

LAB.md

File metadata and controls

89 lines (56 loc) · 3.41 KB

💻 Lab 2 - Generate a React app

⏰  Estimated time: 15-20 minutes

Before starting this lab, you can either clone this Git repository you're looking at (master branch will be the starting point) or continue in the folder you created. If you clone, you will get access to all the lab branches so you can git checkout lab-xx if you fall behind.

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
File structure lab2 file structure

🏋️‍♀️ 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 @nrwl/cli
    • if you don't want to install it globally, use yarn nx (if you have yarn) or npx nx (otherwise) instead of nx in all the commands in the upcoming labs

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


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

  1. Add the React plugin: yarn add @nrwl/react or npm i -S @nrwl/react

  1. Let's also add Material UI so we can use some of their components: yarn add @material-ui/core or npm i -S @material-ui/core

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

    ⚠️Important: Make sure you add React Router and select SCSS as a style when asked!

    🐳   Hint Nx generate cmd structure

  2. Create a fake-api.ts file in your new app 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


  1. 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)

  1. You can get the example game images from here

    ⚠️  Make sure you put them in the correct folder


  1. Serve the app: nx serve store

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

  1. 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 ➡️