Skip to content

Latest commit

 

History

History
98 lines (61 loc) · 2.86 KB

LAB.md

File metadata and controls

98 lines (61 loc) · 2.86 KB

💻 Lab 4 - Generate a component lib

⏰  Estimated time: 10 minutes

Let's add a header to our 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 screenshot of lab4 result
File structure lab4 file structure

🏋️‍♀️ Steps:

  1. Stop the nx serve

  1. Generate a new empty React library called ui-shared in the libs/store folder

    🐳   Hint
    • it's a generator! you've used it before in the second lab, 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

  2. 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


  3. Replace the header component's code


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

    • Add your new component to apps/store/src/app/app.tsx
    🐳   Hint 
    import { Header } from '@bg-hoard/store/ui-shared';
    <Header title="Board Game Hoard" />
<!-- right at the top - above our container -->
<div className="{styles.container}"></div>

    Wrap the App component in a fragment (<> and </>)

    ⚠️  You might need to restart the TS compiler in your editor (CTRL+SHIFT+P in VSCode and search for Restart Typescript)


  1. Serve the project and test the changes

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

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


🎓  If you get stuck, check out the solution

➡️  Next lab ➡️