# npx 是什么？ - 避免安装全局模块（例如只使用一次的脚手架等） - 便于调用项目内部安装的模块，例如： ```shell # node_modules/.bin/mocha --version # npx mocha --version ``` # 用脚手架搭建环境 ``` npx create-react-app projName --typescript ``` 可以在 tsconfig 文件中配置 tsc 编译器 # 一个 tsx 组件结构 ```js import React from 'react' // 用 interface 限制 props 属性，这样当使用时传入不正确的属性编译器会报错 interface IHelloProps { message?: string; } const Hello: React.FC<IHelloProps> = (props) => { // React.FC 是 React.FunctionComponent 的别名，其是描述函数的 interface return <h2>{props.message}</h2> } // 使用 React.FC 后可获得一系列静态属性 Hello.defaultProps = { message: 'Hello World' } export default Hello ``` # 项目结构 ``` proj/ README.md node_modules/ package.json tsconfig.json src/ components/ Button/ button.tsx // 组件主体 button.test.tsx // 测试 style.scss // 样式 styles/ ... index.tsx ``` # Bug 记录 1、脚手架搭建后 npm 安装 node-sass 总是删除之前的包导致出错。（Win10） 解决方案：使用 yarn add 安装 ``` yarn add node-sass ``` | npm | yarn | | --- | --- | | npm install | yarn | | npm install react --save | yarn add react | | npm uninstall react --save | yarn remove react | | npm install react --save-dev | yarn add react --dev | | npm update --save | yarn upgrade | # 常用第三方库 1、node-sass ```markup yarn add node-sass ``` 2、classnames ```shell yarn add classnames yarn add @types/clasnames or npm install classnames --save npm install @types/classnames --save ```