React Nx Tutorial - Step 8: Create Libs

Nx.dev Tutorial | React | Step 8: Create Libs

Libraries are not just a way to share code in Nx. They are also useful for factoring out code into small units with a well-defined public API.

Public API

Every library has an index.ts file, which defines its public API. Other applications and libraries should only access what the index.ts exports. Everything else in the library is private.

UI Libraries

To illustrate how useful libraries can be, create a library of React components.

Run

npx nx g @nrwl/react:lib ui

You should see the following:

myorg/
├── apps/
│   ├── todos/
│   ├── todos-e2e/
│   └── api/
├── libs/
│   ├── data/
│   └── ui/
│       ├── src/
│       │   ├── lib/
│       │   │   └── ui/
│       │   │       ├── ui.css
│       │   │       ├── ui.spec.tsx
│       │   │       └── ui.tsx
│       │   └── index.ts
│       ├── jest.conf.js
│       ├── tsconfig.app.json
│       ├── tsconfig.json
│       └── tsconfig.spec.json
├── tools/
├── nx.json
├── package.json
└── tsconfig.base.json

The libs/ui/src/lib/ui.tsx file looks like this:

1import React from 'react';
2
3import './ui.css';
4
5export interface UiProps {}
6
7export const Ui = (props: UiProps) => {
8  return (
9    <div>
10      <h1>Welcome to ui!</h1>
11    </div>
12  );
13};
14
15export default Ui;

Add a Component

Here, you can either change the UI component or generate a new one.

Add a component to the newly created ui library by running:

npx nx g @nrwl/react:component todos --project=ui --export

myorg/
├── apps/
│   ├── todos/
│   ├── todos-e2e/
│   └── api/
├── libs/
│   ├── data/
│   └── ui/
│       ├── src/
│       │   ├── lib/
│       │   │   ├── ui/
│       │   │   │   ├── ui.css
│       │   │   │   ├── ui.spec.tsx
│       │   │   │   └── ui.tsx
│       │   │   └── todos/
│       │   │       ├── todos.css
│       │   │       ├── todos.spec.tsx
│       │   │       └── todos.tsx
│       │   └── index.ts
│       ├── jest.conf.js
│       ├── tsconfig.app.json
│       ├── tsconfig.json
│       └── tsconfig.spec.json
├── tools/
├── workspace.json
├── nx.json
├── package.json
└── tsconfig.base.json

Implement the Todos component.

1import React from 'react';
2import { Todo } from '@myorg/data';
3
4export const Todos = (props: { todos: Todo[] }) => {
5  return (
6    <ul>
7      {props.todos.map((t) => (
8        <li className={'todo'}>{t.title}</li>
9      ))}
10    </ul>
11  );
12};
13
14export default Todos;

Use the UI Library

Now import Todos into apps/todos/src/app/app.tsx.

1import React, { useEffect, useState } from 'react';
2import { Todo } from '@myorg/data';
3import { Todos } from '@myorg/ui';
4
5const App = () => {
6  const [todos, setTodos] = useState<Todo[]>([]);
7
8  useEffect(() => {
9    fetch('/api/todos')
10      .then((_) => _.json())
11      .then(setTodos);
12  }, []);
13
14  function addTodo() {
15    fetch('/api/addTodo', {
16      method: 'POST',
17      body: '',
18    })
19      .then((_) => _.json())
20      .then((newTodo) => {
21        setTodos([...todos, newTodo]);
22      });
23  }
24
25  return (
26    <>
27      <h1>Todos</h1>
28      <Todos todos={todos} />
29      <button id={'add-todo'} onClick={addTodo}>
30        Add Todo
31      </button>
32    </>
33  );
34};
35
36export default App;

Restart both npx nx serve api and npx nx serve todos and you should see the application running.

Nx helps you explore code generation options. Run npx nx g @nrwl/react:component --help to see all options available. Pass --dry-run to the command to see what would be generated without actually changing anything, like this: npx nx g @nrwl/react:component mycmp --project=ui --dry-run.