docs(react): clean up react tutorial to match the latest version of nx (

nrwl#7639)

docs/map.json

@@ -58,7 +58,7 @@
             "id": "05-add-node-app"
           },
           {
-            "name": "6 - Configure Proxy",
+            "name": "6 - Proxy Configuration",
             "id": "06-proxy"
           },
           {
@@ -1386,7 +1386,7 @@
             "id": "05-add-node-app"
           },
           {
-            "name": "6 - Configure Proxy",
+            "name": "6 - Proxy Configuration",
             "id": "06-proxy"
           },
           {

docs/react/tutorial/01-create-application.md

@@ -25,9 +25,9 @@ Application name                    todos
 Default stylesheet format           CSS
 ```
 
-> You can also choose to add [Nx Cloud](https://nx.app), but its not required for the tutorial.
+Enter the indicated answers.
 
-When asked about 'preset', select `react`, and `todos` for the app name.
+> You can also choose to add [Nx Cloud](https://nx.app), but its not required for the tutorial.
 
 ```treeview
 myorg/
@@ -46,6 +46,7 @@ myorg/
 │   │   ├── .browserslistrc
 │   │   ├── .eslintrc.json
 │   │   ├── jest.config.js
+│   │   ├── project.json
 │   │   ├── tsconfig.app.json
 │   │   ├── tsconfig.json
 │   │   └── tsconfig.spec.json
@@ -63,7 +64,7 @@ myorg/
 │       │       └── index.ts
 │       ├── .eslintrc.json
 │       ├── cypress.json
-│       ├── tsconfig.e2e.json
+│       ├── project.json
 │       └── tsconfig.json
 ├── libs/
 ├── tools/

docs/react/tutorial/05-add-node-app.md

@@ -11,12 +11,13 @@ Nx is an open platform with plugins for many modern tools and frameworks. **To s
 ```bash
 >  NX  Installed plugins:
 
-  @nrwl/cypress (executors,generators)
-  @nrwl/jest (executors,generators)
-  @nrwl/linter (builders)
+  @nrwl/cypress (builders,generators)
+  @nrwl/jest (builders,generators)
+  @nrwl/linter (builders,generators)
   @nrwl/react (generators)
-  @nrwl/web (executors,generators)
-  @nrwl/workspace (executors,generators)
+  @nrwl/storybook (builders,generators)
+  @nrwl/web (builders,generators)
+  @nrwl/workspace (builders,generators)
 
 
 >  NX  Also available:
@@ -27,7 +28,6 @@ Nx is an open platform with plugins for many modern tools and frameworks. **To s
   @nrwl/next (executors,generators)
   @nrwl/node (executors,generators)
   @nrwl/nx-plugin (executors,generators)
-  @nrwl/storybook (executors,generators)
 
 
 >  NX  Community plugins:
@@ -72,7 +72,10 @@ After this is done, you should see something like this:
 ```treeview
 myorg/
 ├── apps/
-│   ├── todos/
+│   ├── todos/
+│   │   ├── src/
+│   │   ├── project.json
+│   │   └── proxy.conf.json
 │   ├── todos-e2e/
 │   └── api/
 │       ├── src/
@@ -83,7 +86,7 @@ myorg/
 │       │   │   └── environment.prod.ts
 │       │   └── main.ts
 │       ├── jest.conf.js
-│       ├── proxy.conf.json
+│       ├── project.json
 │       ├── tsconfig.app.json
 │       ├── tsconfig.json
 │       └── tsconfig.spec.json
@@ -147,3 +150,7 @@ const server = app.listen(port, () => {
 });
 server.on('error', console.error);
 ```
+
+**Now run `npx nx serve api` to run the api server**
+
+Refresh the application in the browser. The React app is now able to fetch and create todos by calling the API.

docs/react/tutorial/06-proxy.md

@@ -1,33 +1,33 @@
-# React Nx Tutorial - Step 6: Proxy
+# React Nx Tutorial - Step 6: Proxy Configuration
 
 <iframe width="560" height="315" src="https://www.youtube.com/embed/xfvCz-yLeEw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 
 You passed `--frontendProject=todos` when creating the node application. What did that argument do?
 
 It created a proxy configuration that allows the React application to talk to the API in development.
 
-**To see how it works, open `workspace.json` and find the `serve` target of the todos app.**
+**To see how it works, open `apps/todos/project.json` and find the `serve` target.**
 
 ```json
 {
   "serve": {
-    "builder": "@nrwl/web:dev-server",
+    "executor": "@nrwl/web:dev-server",
     "options": {
       "buildTarget": "todos:build",
+      "hmr": true,
       "proxyConfig": "apps/todos/proxy.conf.json"
     },
     "configurations": {
       "production": {
-        "buildTarget": "todos:build:production"
+        "buildTarget": "todos:build:production",
+        "hmr": false
       }
     }
   }
 }
 ```
 
-**Note the `proxyConfig` property.**
-
-**Now open `proxy.conf.json`:**
+Note the `proxyConfig` property which points to `apps/todos/proxy.conf.json`. Open this file.
 
 ```json
 {
@@ -40,11 +40,11 @@ It created a proxy configuration that allows the React application to talk to th
 
 This configuration tells `npx nx serve` to forward all requests starting with `/api` to the process listening on port `3333`.
 
-## Workspace.json, Targets, Builders
+## Project.json, Targets, Executors
 
-You configure your workspaces in `workspace.json`. This file contains the workspace projects with their architect targets. For instance, `todos` has the `build`, `serve`, `lint`, and `test` targets. This means that you can run `npx nx build todos`, `npx nx serve todos`, etc..
+You configure your apps in `apps/[app-name]/project.json`. Open `apps/todos/project.json` to see an example. This file contains configuration for the todos app. For instance, you can see the `build`, `serve`, `lint`, and `test` targets. This means that you can run `npx nx build todos`, `npx nx serve todos`, etc..
 
-Every target uses a builder which actually runs this target. So targets are analogous to typed npm scripts, and builders are analogous to typed shell scripts.
+Every target uses an executor which actually runs this target. So targets are analogous to typed npm scripts, and executors are analogous to typed shell scripts.
 
 **Why not use shell scripts and npm scripts directly?**
 
@@ -54,7 +54,7 @@ There are a lot of advantages to providing additional metadata to the build tool
 npx nx run todos:serve [options,...]
 
 Options:
-  --buildTarget           Target which builds the application`
+  --buildTarget           Target which builds the application
   --port                  Port to listen on. (default: 4200)
   --host                  Host to listen on. (default: localhost)
   --ssl                   Serve using HTTPS.
@@ -73,4 +73,4 @@ Options:
 
 It helps with good editor integration (see [VSCode Support](/{{framework}}/getting-started/console#nx-console-for-vscode)).
 
-But, most importantly, it provides a holistic dev experience regardless of the tools used, and enables advanced build features like distributed computation caching and distributed builds).
+But, most importantly, it provides a holistic dev experience regardless of the tools used, and enables advanced build features like distributed computation caching and distributed builds.

docs/react/tutorial/07-share-code.md

@@ -25,8 +25,9 @@ myorg/
 │       │   │   └── data.ts
 │       │   └── index.ts
 │       ├── jest.conf.js
-│       ├── tsconfig.app.json
+│       ├── project.json
 │       ├── tsconfig.json
+│       ├── tsconfig.lib.json
 │       └── tsconfig.spec.json
 ├── tools/
 ├── nx.json

docs/react/tutorial/08-create-libs.md

@@ -31,37 +31,37 @@ myorg/
 │   └── ui/
 │       ├── src/
 │       │   ├── lib/
-│       │   │   └── ui/
-│       │   │       ├── ui.css
-│       │   │       ├── ui.spec.tsx
-│       │   │       └── ui.tsx
+│       │   │   ├── ui.css
+│       │   │   ├── ui.spec.tsx
+│       │   │   └── ui.tsx
 │       │   └── index.ts
 │       ├── jest.conf.js
-│       ├── tsconfig.app.json
+│       ├── project.json
 │       ├── tsconfig.json
+│       ├── tsconfig.lib.json
 │       └── tsconfig.spec.json
 ├── tools/
 ├── nx.json
+├── workspace.json
 ├── package.json
 └── tsconfig.base.json
 ```
 
 The `libs/ui/src/lib/ui.tsx` file looks like this:
 
 ```typescript
-import React from 'react';
-
-import './ui.css';
+import './ui.module.css';
 
+/* eslint-disable-next-line */
 export interface UiProps {}
 
-export const Ui = (props: UiProps) => {
+export function Ui(props: UiProps) {
   return (
     <div>
-      <h1>Welcome to ui!</h1>
+      <h1>Welcome to Ui!</h1>
     </div>
   );
-};
+}
 
 export default Ui;
 ```
@@ -87,18 +87,18 @@ myorg/
 │   └── ui/
 │       ├── src/
 │       │   ├── lib/
-│       │   │   ├── ui/
-│       │   │   │   ├── ui.css
-│       │   │   │   ├── ui.spec.tsx
-│       │   │   │   └── ui.tsx
 │       │   │   └── todos/
-│       │   │       ├── todos.css
-│       │   │       ├── todos.spec.tsx
-│       │   │       └── todos.tsx
+│       │   │   │   ├── todos.css
+│       │   │   │   ├── todos.spec.tsx
+│       │   │   │   └── todos.tsx
+│       │   │   ├── ui.css
+│       │   │   ├── ui.spec.tsx
+│       │   │   └── ui.tsx
 │       │   └── index.ts
 │       ├── jest.conf.js
-│       ├── tsconfig.app.json
+│       ├── project.json
 │       ├── tsconfig.json
+│       ├── tsconfig.lib.json
 │       └── tsconfig.spec.json
 ├── tools/
 ├── workspace.json
@@ -110,18 +110,22 @@ myorg/
 **Implement the Todos component.**
 
 ```typescript
-import React from 'react';
 import { Todo } from '@myorg/data';
+import './todos.module.css';
 
-export const Todos = (props: { todos: Todo[] }) => {
+export interface TodosProps {
+  todos: Todo[];
+}
+
+export function Todos(props: TodosProps) {
   return (
     <ul>
       {props.todos.map((t) => (
         <li className={'todo'}>{t.title}</li>
       ))}
     </ul>
   );
-};
+}
 
 export default Todos;
 ```

docs/react/tutorial/09-dep-graph.md

@@ -7,3 +7,11 @@ An Nx workspace can contain dozens or hundreds of applications and libraries. As
 Previously, some senior architect would create an ad-hoc dependency diagram and upload it to a corporate wiki. The diagram is not correct even on Day 1 and gets more and more out of sync with every passing day.
 
 With Nx, you can do better than that.
+
+Run
+
+```bash
+npx nx dep-graph
+```
+
+The dependency graph page opens in a new browser window. Click on "Show all projects" to see all the apps and libraries in the workspace.

docs/react/tutorial/10-computation-caching.md

@@ -54,41 +54,4 @@ Nx read the output from cache instead of running the command for 1 out of 2 proj
 
 Nx built `api` and retrieved `todos` from its computation cache. Read more about the cache [here](/{{framework}}/core-extended/computation-caching).
 
-## --with-deps
-
-As we saw already, Nx is smart, so it knows how applications and libraries in the workspace depend on each other.
-
-**Run `npx nx lint todos --with-deps`, and you see that Nx lints both the `todos` app and the libraries it depends on.**
-
-```bash
->  NX  Running target lint for project todos and its 2 deps.
-
-———————————————————————————————————————————————
-
-> npx nx run todos:lint
-
-Linting "todos"...
-
-All files pass linting.
-
-
-> npx nx run ui:lint
-
-Linting "ui"...
-
-All files pass linting.
-
-
-> npx nx run data:lint
-
-Linting "data"...
-
-All files pass linting.
-
-
-———————————————————————————————————————————————
-
->  NX   SUCCESS  Running target "lint" succeeded
-```
-
 > Add --parallel to any command, and Nx does most of the work in parallel.

docs/react/tutorial/11-test-affected-projects.md

@@ -4,29 +4,33 @@
 
 In addition to supporting computation caching, Nx scales your development by doing code change analysis to see what is affected by a particular pull request.
 
-**Commit all the changes in the repo**:
+**Commit all the changes you have made so far**:
 
 ```bash
 git add .
 git commit -am 'init'
 git checkout -b testbranch
 ```
 
-**Open `libs/ui/src/lib/todos/todos.tsx` and change the component:**
+**Open `libs/ui/src/lib/todos/todos.tsx` and change the component by updating the `<li>` content to `{t.title}!!`:**
 
 ```typescript
-import React from 'react';
 import { Todo } from '@myorg/data';
+import './todos.module.css';
 
-export const Todos = (props: { todos: Todo[] }) => {
+export interface TodosProps {
+  todos: Todo[];
+}
+
+export function Todos(props: TodosProps) {
   return (
     <ul>
       {props.todos.map((t) => (
         <li className={'todo'}>{t.title}!!</li>
       ))}
     </ul>
   );
-};
+}
 
 export default Todos;
 ```