1298a0f6db
* docs(react): update react tutorial text * docs(react): fixes to computation cache lesson * docs(react): reworking react tutorial * docs(react): fixing broken links in tutorial * docs(react): fixing broken more links in tutorial * docs(react): fixing last broken link in tutorial * docs(react): really fixing last broken link in tutorial * fixing images in preview * docs(react): cleaning up text and formatting issues * docs(react): more fixes and cleanup * docs(react): more fixes * docs(react): fixing nx console broken links * docs(react): adjusting ending summary cards * docs(react): more typo fixes * docs(react): incorporating victor and isaac's feedback * docs(react): fixing broken link * docs(react): a self-round of typo and formatting fixes * docs(react): another round of formatting fixes * docs(react): another small change * docs(react): another typo fix * docs(react): more typo fixed noticed working with node tutorial * docs(react): making h1's consistent * docs(react): fixing tab title for part 1 * docs(react): fixing the title * docs(react): escaping colon in title * docs(node): copying react tutorials as starting point * docs(node): fixing map.json and links to other lessons * docs(node): updating the copy-pasted react tutorial for the node example * docs(node): more fixes after self-review * docs(node): fixing another typo * docs(node): Making h1's consistent * docs(node): fixing tab title in step 1 * docs(node): fixing the title * docs(node): escaping colon in title * docs(core): nx graph => project graph * docs(core): fixing titles * docs(core): further shortening the text * docs(core): formatting fixes * docs(core): responding to victor comments * docs(core): switching to new terminal code blocks * docs(core): light and dark mode friendly images
127 lines
3.1 KiB
Markdown
127 lines
3.1 KiB
Markdown
# React Tutorial - Part 2: Project Graph
|
|
|
|
Run the command: `npx nx graph`. A browser should open up with the following contents:
|
|
|
|
|
|
|
|
This is still different than the design from the start of Part 1:
|
|
|
|
|
|
|
|
The Project Graph is derived from the source code of your workspace. Make the following adjustments to your existing projects, so that our Project Graph will match the design:
|
|
|
|
### `common-ui`
|
|
|
|
Run the `@nrwl/react:component` generator with the command:
|
|
|
|
```{% command="npx nx g @nrwl/react:component banner --project=common-ui --export" path="~/myorg" %}
|
|
|
|
> NX Generating @nrwl/react:component
|
|
|
|
CREATE libs/common-ui/src/lib/banner/banner.module.css
|
|
CREATE libs/common-ui/src/lib/banner/banner.spec.tsx
|
|
CREATE libs/common-ui/src/lib/banner/banner.tsx
|
|
UPDATE libs/common-ui/src/index.ts
|
|
```
|
|
|
|
Then create a simple `Banner` component in the generated file:
|
|
|
|
```javascript {% fileName="libs/common-ui/src/lib/banner/banner.tsx" %}
|
|
export interface BannerProps {
|
|
text: string;
|
|
}
|
|
|
|
export function Banner(props: BannerProps) {
|
|
return <header>{props.text}</header>;
|
|
}
|
|
|
|
export default Banner;
|
|
```
|
|
|
|
### `admin`
|
|
|
|
Add the `Banner` component to the admin app:
|
|
|
|
```javascript {% fileName="apps/admin/src/app/app.tsx" %}
|
|
import { Banner } from '@myorg/common-ui';
|
|
|
|
export function App() {
|
|
return (
|
|
<>
|
|
<Banner text="Welcome to our admin app." />
|
|
<div />
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default App;
|
|
```
|
|
|
|
### `products`
|
|
|
|
Export a `Product` TS interface and some example products:
|
|
|
|
```javascript {% fileName="libs/products/src/lib/products.ts" %}
|
|
export interface Product {
|
|
id: string;
|
|
name: string;
|
|
price: number;
|
|
}
|
|
|
|
export const exampleProducts: Product[] = [
|
|
{
|
|
id: '1',
|
|
name: 'Product 1',
|
|
price: 100,
|
|
},
|
|
{
|
|
id: '2',
|
|
name: 'Product 2',
|
|
price: 200,
|
|
},
|
|
];
|
|
```
|
|
|
|
### `store`
|
|
|
|
Use both the `Banner` component from your `common-ui` lib, and the `exampleProducts` from your `products` lib:
|
|
|
|
```javascript {% fileName="apps/store/src/app/app.tsx" %}
|
|
import { Banner } from '@myorg/common-ui';
|
|
import { exampleProducts } from '@myorg/products';
|
|
|
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
export function App() {
|
|
return (
|
|
<>
|
|
<Banner text="Welcome to the store!" />
|
|
<ul>
|
|
{exampleProducts.map((product) => (
|
|
<li key={product.id}>
|
|
<strong>{product.name}</strong> Price: {product.price}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default App;
|
|
```
|
|
|
|
Now run `npx nx graph` again:
|
|
|
|
{% side-by-side %}
|
|
|
|
|
|
|
|
{% /side-by-side %}
|
|
|
|
Your graph now matches the original design.
|
|
|
|
The Project Graph is more than just a visualization - Nx provides tooling to optimize your task-running and even automate your CI based on this graph. This will be covered in more detail in: [4: Workspace Optimization](/react-tutorial/4-workspace-optimization).
|
|
|
|
## What's Next
|
|
|
|
- Continue to [3: Task Running](/react-tutorial/3-task-running)
|