Reac项目起步

技术栈：TypeScript / React / Hooks / LocalStorage / React Router

项目搭建

1.安装使用react

yarn global add create-react-app 

2.创建react项目

create-react-app 项目名 --template typescript //--template typescript声明使用ts类型

3.运行项目

cd 项目名
yarn start (浏览器自动打开）

4.解决自动打开浏览器，多开窗口解决方法

根目录下创建.env文件，BROWSER=none

css相关

1.css normalize（index.css加上@import-normalize），作用保证页面在不同的浏览器上默认样式相同。

2.css-reset 默认样式全部重置

3.可以直接用@import 'xxx/yyy'来引用src/xxx/yyy.scss 文档说明

4.js也不需要@引入。在tsconfig.json添加"baseUrl":"src",可用import 'xxx/yyy.tsx'来引用src/xxx/yyy.tsx 文档说明

scss支持

• react默认使用nodesass 缺点：本地编译慢，网络下载慢
• 如何支持dartsass 使用package alias用法。

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

Css in Js方案：styled-components(本项目使用的方案)

1.安装

yarn add styled-components

2.安装后声明

yarn add --dev@types/styled-components

3.推荐webstrom插件（Styled-Components）,推荐Vscode插件（vscode-styled-components）

4.使用方法

const Div=styled.div`
	border:1px solid red;
`
const App=()=>{
	return (
    	<Button>
        你好
        </Button>
    )
}

react-router

1.hash模式和history模式区别，有后台用history模式，否则hash模式

2.安装

yarn add react-router-dom

3.安装声明文件（报错提示安装）

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

svg sprite loader

1.yarn eject 暴露出webpack.json的配置

2.yarn add --dev svg-sprite-loader 官网链接

3，引用时防止TreeShaking，使用require而不是import

4,做到一次性引入

let importAll = (requireContext: __WebpackModuleApi.RequireContext) => requireContext.keys().forEach(requireContext);
try {importAll(require.context('../assets/icons', true, /\.svg$/));} catch (error) {console.log(error);}