miel.truyen/nx
1
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

docs(react): video and other improvements on tutorial

Browse Source
This commit is contained in:
Juri 2023-07-28 08:58:59 +02:00 committed by Juri Strumpflohner
parent 205b6fec10
commit 1e30d43f7a
1 changed files with 17 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
docs/shared/react-standalone-tutorial/react-standalone.md
View File

@ -19,6 +19,8 @@ Note, this tutorial sets up a repo with a single application at the root level t
{% /callout %} {% /callout %}
Note, while you could easily use Nx together with your manually set up React application, we're going to use the `@nx/react` plugin for this tutorial which provides some nice enhancements when working with React. [Visit our "Why Nx" page](/getting-started/why-nx) to learn more about plugins and what role they play in the Nx architecture.
## Warm Up ## Warm Up
Here's the source code of the final result for this tutorial. Here's the source code of the final result for this tutorial.
@ -27,6 +29,11 @@ Here's the source code of the final result for this tutorial.
{% stackblitz-button url="github.com/nrwl/nx-recipes/tree/main/react-standalone?file=README.md" /%} {% stackblitz-button url="github.com/nrwl/nx-recipes/tree/main/react-standalone?file=README.md" /%}
{% youtube
src="https://www.youtube.com/embed/OQ-Zc5tcxJE"
title="Tutorial: Standalone React Application"
width="100%" /%}
## Creating a new React App ## Creating a new React App
Create a new standalone React application with the following command: Create a new standalone React application with the following command:
@ -214,6 +221,16 @@ Note that all of these targets are automatically cached by Nx. If you re-run a s
Not all tasks might be cacheable though. You can configure `cacheableOperations` in the `nx.json` file. You can also [learn more about how caching works](/core-features/cache-task-results). Not all tasks might be cacheable though. You can configure `cacheableOperations` in the `nx.json` file. You can also [learn more about how caching works](/core-features/cache-task-results).
## Nx Plugins? Why?
One thing you might be curious about is the project.json. You may wonder why we define tasks inside the `project.json` file instead of using the `package.json` file with scripts that directly launch Vite.
Nx understands and supports both approaches, allowing you to define targets either in your `package.json` or `project.json` files. While both serve a similar purpose, the `project.json` file can be seen as an advanced form of `package.json` scripts, providing additional metadata and capabilities. In this tutorial, we utilize the `project.json` approach primarily because we take advantage of Nx Plugins.
So, what are Nx Plugins? Nx Plugins are optional packages that extend the capabilities of Nx, catering to various specific technologies. For instance, we have plugins tailored to React (e.g., `@nx/react`), Vite (`@nx/vite`), Cypress (`@nx/cypress`), and more. These plugins offer additional features, making your development experience more efficient and enjoyable when working with specific tech stacks.
[visit our "Why Nx" page](/getting-started/why-nx) for more deails.
## Creating New Components ## Creating New Components
You can just create new React components as you normally would. However, Nx plugins usually also ship [generators](/core-features/plugin-features/use-code-generators). They allow you to easily scaffold code, configuration or entire projects. To see what capabilities the `@nx/react` plugin ships, run the following command and inspect the output: You can just create new React components as you normally would. However, Nx plugins usually also ship [generators](/core-features/plugin-features/use-code-generators). They allow you to easily scaffold code, configuration or entire projects. To see what capabilities the `@nx/react` plugin ships, run the following command and inspect the output: