计算机专业实用技能导引 (13).pdf
npmnpmyarnyarn安装指定第三库npm install react-saveyarn add react移除指定第三库npm uninstall react-saveyarn remove react开发模式下安装npm install react-save-devyarn add react-devReact 课前准备 在编写 React 代码之前，我们希望你能够安装好 React 前端框架并能够跑通最简单的 demo。本档默认了你已经安装了于 v12 的 nodenode，并且可以使 npm installnpm install。如果这两个条件暂未满，请根据 Web 开发基础课程的课前准备档安装。使 yarnyarn 代替 npmnpm 这是个可选项，在实际程之中两者并没有本质上的差别。与常的 npm 相，yarn 多情况下具有更快的下载速度和更为清晰的命令输出。所以我们更加推荐使 yarn。这不具体叙述安装过程，可以参考官上给出的式进安装，也可以使 npm install yarn-g 命令安装（后者可能不适于 Linux 户）。yarn 的命令和 npm 的命令致具有以下对应关系：安装 TypeScript TypeScript 是 JavaScript 的超集。简之，TypeScript 就是带有类型系统的 JavaScript。TypeScript代码可以直接被编译为 JavaScript 代码并执。安装 TypeScript 是简单的：安装后可以在某录下新建 hello.ts 件，输以下代码：并在这个录下执：#yarnyarn global add typescript#npmnpm install-g typescriptlet a:string=Hello world!;console.log(a);如果安装顺利，这个录下应当会出现编译成的 hello.js 件，使命令 node hello.js 应当就可以看到命令输出的问候语。安装 React 框架&创建 React 应 React 框架的安装可以通过脚架 create-react-app 完成，般安装框架这过程可以集成在创建应的过程中完成。进到你想要创建应的录下，执以下命令：这 是你的应的录的路径。这些命令会创建个使 TypeScript 开发的 React 应，并安装 React 框架。如果安装顺利，使命令：即可编译整个应，随后应当就可以通过本地 3000 端访问到 React 的欢迎界了。替换源代码 React 默认成的源代码内部除去必要的代码，还包括了单元测试代码、图标等件。我们建议将 React默认成的 src 录完整替换为我们下发的 src 录。我们所下发的代码将会是课程的演示代码，其较为简单。课前准备的标是替换 src 录后依然可以编译跑通整个应。使 ESLint 规范码 这是个可选项，但是我们认为开发较程的时候，尤其是需要多协作的时候，统的码是必要的。在应录下执下列命令，即可初步配置个 ESLint：tsc hello.js#npm 5.2+npm install create-react-app-gnpx create-react-app -template typescript#yarn 0.25+yarn global add create-react-appyarn create react-app -template typescript#npmnpm run start#yarnyarn start执第条命令后，ESLint 会询问你的配置。对于前个问题我们建议选择“强制调整码”“使JavaScript modules(import/export)”“使 React 框架”“使 TypeScript”“在浏览器上运代码”。后续则是对具体码规则的配置，你可以回答具体问题或选择使模板，也可以暂且不回答选择后续动配置.eslintrc 件中的码规则。下我们希望能够键调整码，如说终端执 yarn fix 就可以修复所有源代码的码。现在打开package.json 件，可以注意到这样的段：在最后添加：这的意思是执 yarn fix 的时候会使 ESLint 将 src 录下的所有扩展名为 js/jsx/ts/tsx 的件修复码。不过要注意的是，动修复能有限，所以更多的时候还需要动对件进些调整。动修复也有可能会出错，这个时候可以动添加让 ESLint 忽略这部分的注释。#npmnpm install eslint-save-dev./node_modules/.bin/eslint-init#yarnyarn add eslint-dev./node_modules/.bin/eslint-initscripts:start:react-scripts start,build:react-scripts build,test:react-scripts test,eject:react-scripts ejectscripts:.fix:./node_modules/.bin/eslint src-ext.js,.jsx,.ts,.tsx-fix
