基础 · 考试Course

地基 · 项目怎么跑起来，JS/TS 到底要会哪些Foundations · how a project runs, and the JS/TS you actually need

在动 React 和 GraphQL 之前，先把「一个 JavaScript 项目是怎么运行的」搞清楚：Node、npm、package.json、scripts、目录结构、怎么跑测试、报错该从哪看起。然后只补两门考试真正会用到的 JavaScript 与 TypeScript。Before starting React or GraphQL, get clear on how a JavaScript project runs: Node, npm, package.json, scripts, the directory layout, how to run the tests, and where to look first when something fails. After that, only the JavaScript and TypeScript that the two exam projects actually use.

Node.js 22npmESMJavaScriptTypeScript 5

这门考试到底考什么What this exam actually tests

这一门本身不是考试，是另外两门的地基。考场上真正会卡住新手的往往不是 React 语法，而是「测试怎么跑」「这个报错是我写错了还是项目本来就坏的」「dependencies 和 devDependencies 有什么区别」这类问题。This course is not an exam itself. It is the base the other two stand on. What usually stops a beginner in an exam is not React syntax. It is questions like how to run the tests, whether an error is your own mistake or a defect that was already in the project, and what the difference is between dependencies and devDependencies.

内容来源 · 你本机上的真实项目Where the content comes from · the real project on your machine

源项目Source project2 项 · 2 个可以展开看原文2 items · 2 can be opened

react-notes-appReact Capstone，提供真实 package.json / tsconfig / vite 配置React Capstone, the source of the real package.json, tsconfig and vite config

Textreact-notes-app/ · tree源项目From source

1react-notes-app/

2├── q2/

3│ ├── demo.ts

4│ └── taskRunner.ts

5├── src/

6│ ├── components/

7│ │ ├── NoteForm/

8│ │ │ └── index.tsx

9│ │ ├── NoteItem/

10│ │ │ └── index.tsx

11│ │ ├── NoteManager/

12│ │ │ └── index.tsx

13│ │ └── NoteTable/

14│ │ └── index.tsx

15│ ├── types/

16│ │ └── Note.ts

17│ ├── App.tsx

18│ ├── index.css

19│ ├── main.tsx

20│ └── NoteManager.test.tsx

21├── index.html

22├── package-lock.json

23├── package.json

24├── README.md

25├── tsconfig.json

26├── vite.config.ts

27└── vitest.setup.ts

Source: react-notes-app

graphql-federation-practiceFederation Capstone，提供真实 subgraph package.json / pom.xmlFederation Capstone, the source of the real subgraph package.json and pom.xml

Textgraphql-federation-practice/ · tree源项目From source

1graphql-federation-practice/

2├── java-service/

3│ ├── src/

4│ │ ├── main/

5│ │ │ ├── java/

6│ │ │ │ └── com/

7│ │ │ │ └── techflow/

8│ │ │ │ └── orders/

9│ │ │ │ ├── config/

10│ │ │ │ │ ├── CorrelationIdFilter.java

11│ │ │ │ │ └── MetricsConfig.java

12│ │ │ │ ├── controller/

13│ │ │ │ │ └── OrderController.java

14│ │ │ │ ├── dto/

15│ │ │ │ │ ├── CreateOrderRequest.java

16│ │ │ │ │ └── OrderItemRequest.java

17│ │ │ │ ├── exception/

18│ │ │ │ │ ├── EntityNotFoundException.java

19│ │ │ │ │ └── GlobalExceptionHandler.java

20│ │ │ │ ├── model/

21│ │ │ │ │ ├── Order.java

22│ │ │ │ │ ├── OrderItem.java

23│ │ │ │ │ └── OrderStatus.java

24│ │ │ │ ├── repository/

25│ │ │ │ │ ├── InMemoryOrderRepository.java

26│ │ │ │ │ └── OrderRepository.java

27│ │ │ │ ├── service/

28│ │ │ │ │ └── OrderService.java

29│ │ │ │ └── OrderServiceApplication.java

30│ │ │ └── resources/

31│ │ │ └── application.properties

32│ │ └── test/

33│ │ └── java/

34│ │ └── com/

35│ │ └── techflow/

36│ │ └── orders/

37│ │ └── OrderControllerTest.java

38│ ├── orders.db

39│ └── pom.xml

40├── node-subgraph/

41│ ├── __tests__/

42│ │ └── resolvers.test.js

43│ ├── src/

44│ │ ├── dataSources/

45│ │ │ └── orderDataSource.js

46│ │ ├── resolvers/

47│ │ │ └── orderResolvers.js

48│ │ ├── index.js

49│ │ └── schema.graphql

50│ ├── package-lock.json

51│ └── package.json

52├── QUESTIONS.md

53└── README.md

Source: graphql-federation-practice

课程Lessons

地基 · 第 1 部分Foundations · Part 1

4 节4 lessons

一个 JavaScript 项目是怎么运行的How a JavaScript project runs

从 Node.js 是什么开始，一路讲到「我怎么知道这个项目支持哪些命令」。全部用两个真实 assessment 的文件当例子。Starts at what Node.js is and ends at how to find out which commands a project supports. Every example is a real file from one of the two exam projects.

Node.js、npm、node_modules 和 lockfileNode.js, npm, node_modules and the lockfile package.json 逐字段读一遍package.json, field by field npm scripts：命令到底跑了什么npm scripts: what the command actually runs 两个考试项目的目录，逐个说明The directory layout of both exam projects

地基 · 第 2 部分Foundations · Part 2

3 节3 lessons

JavaScript：只补考试真正会用的那几样JavaScript: only the parts the exams use

不做完整 JS 教程。只讲 CRUD 三件事（增删改）背后的数组与对象操作，以及 Q2 和 resolver 都离不开的异步。Not a full JavaScript course. It covers the array and object work behind adding, deleting and updating, plus the async parts that both Q2 and the resolvers depend on.

数组与对象：不可变更新三件套Arrays and objects: three ways to update without changing the original 异步：Promise、await、all 和 allSettledAsync: Promise, await, all and allSettled ESM:import / export 与那些莫名其妙的报错ESM: import / export, and the errors that look strange at first

地基 · 第 3 部分Foundations · Part 3

2 节2 lessons

TypeScript：够用就好TypeScript: just enough

只讲两个考试里真实出现的：基本类型、type 与 interface、组件 props 类型、泛型参数，以及怎么读 tsc 的报错。Only what actually appears in the two exams: basic types, type versus interface, typing component props, generic parameters, and how to read a tsc error.

类型、type 与 interfaceTypes, type and interface 泛型参数，以及怎么读 tsc 的报错Generic parameters, and how to read a tsc error