webstorm 创建react组件_React 记账项目总结

一、项目创建

步骤：

• yarn global add create-react-app@3.4.1 （亦可用 npm 全局安装）
• create-react-app 项目名 --template typescript（项目名可以自定）
• cd 项目名
• yarn start（会自动打开浏览器）
• 不喜欢自动，就运行 echo 'BROWSER=none' > .env 再 yarn start

二、CSS 支持

使用scss：

• 使用dart-sass代替node-sass（后者经常被墙，下载速度慢，本地编译慢）
• React不支持dart-sass，但npm6.9有一个package alias的功能
• yarn add --dev node-sass@npm：dart-sass@1.25.0
• 这个命令可以用dart-sass代替node-sass
• 然后将所有.css改成.scss

import：

• 在React中可以直接 @import 'xxx/yyy'引入src/xxx/yyy.scss
• 在JS中在tsconfig.json添加"baseUrl":"src"即可

三、使用styled-components 实现css in js

• yarn add styled-components；yarn add --dev @types/styled-components 添加ts支持
• webstorm搜索Styled Components安装插件

使用方法：

const Button = styled.button` //写一个button
    color: red; 
`
<Button />

四、使用React Router实现导航

• yarn add react-router-dom；yarn add --dev @types/react-router-dom
• 官方文档React Router: Declarative Routing for React，里面的快速开始：

import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "