4-TASK.md

💻 Task 4 - Generate a component lib

⏰  Estimated time: 10 minutes

Let's separate the header from the app! Because headers can be shared with other components, we will create a common lib that others can import as well.

📚 Learning outcomes:

• Get familiar with generating project specific component libraries inside a folder

📲 After this workshop, you should have:

App Screenshot

🏋️‍♀️ Steps:

1. Stop the nx serve

2. Generate a new empty React library called ui-shared in the libs/ folder. When asked, choose the @nx/rollup executor to build the library.

   🐳   Hint

   • it's a generator! you've used it before in the second task, but instead of an app, we now want to generate a lib
   • use the --help command to figure out how to generate it in a directory and that it doesn’t create default component
   
   

3. Generate a new React component, called header, inside the lib you just created

   ⚠️  Play around with the generator options so that the generated component is automatically exported from the lib's module

   🐳   Hint

   use --help to figure out how to specify under which project you want to generate the new component and how to automatically have it exported and skip the component generation

   
   

4. Replace the header component's code

5. Let's use the new shared header component we created

   • Add your new component to apps/game-store/src/app/app.tsx
   🐳   Hint

   import { Header } from '@bg-hoard/store/ui-shared';

   <Header title="Board Game Hoard" />

6. Serve the project and test the changes

7. Run the command to inspect the dependency graph - What do you see? (Remember to "Select all" in the top left corner)

   🐳   Hint

   nx dep-graph

   
   

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

---

🎓  If you get stuck, check out the solution

---

➡️  Next task ➡️