react记账本

React 项目搭建 - 起步

运行 yarn config set registry https://registry.npm.taobao.org/

yarn global add create-react-app@3.4.1 （亦可用 npm 全局安装）
yarn create react-app my-app --template typescript（项目名可以自定）
cd morney
yarn start（会自动打开浏览器）

---

不喜欢自动，就运行 echo 'BROWSER=none' > .env 再 yarn start

git rm -rf --cached .idea
git rm -rf --cached .vscode

如果用 WebStorm，就在 .gitignore 添加 /.idea
如果用 VSCode，就在 .gitignore 添加 /.vscode

---

在 index.css 添加 @import-normalize
作用保证页面在不同浏览器上面默认样式相近
CSS reset把默认样式去掉

---

支持 SCSS

yarn add --dev node-sass@npm:dart-sass@1.25.0

---

import 和 JS import 优化

在jsconfig.json or tsconfig.json加上这句话

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

module located at src/components/Button.js, you can import the module like so:

import Button from 'components/Button';

---

CSS-in-JS 之 styled-components

安装
yarn add styled-components
yarn add --dev @types/styled-components

import styled from "styled-components";

const Button = styled.button`
  color: red;
`

---

安装react-router-dom

yarn add react-router-dom
yarn add --dev @types/react-router-dom

import {HashRouter as Router, Switch, Route, Redirect} from 'react-router-dom';

image.png