# 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 ```