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
3.1 KiB
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:
> 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:
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:
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:
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:
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.
What's Next
- Continue to 3: Task Running