# CRA+TailwindCSS+Sass+ElasticUI+Redux 初始化配置
## 第一步：启动CRA，创建React App（with TS）
```sh
yarn create react-app my-app --template typescript
cd my-app
```
## 第二步：安装TailwindCSS（[文档](https://tailwindcss.com/docs/guides/create-react-app)）
```sh
yarn add -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
```
编辑`tailwind.config.js`文件：
```js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
```
编辑最根部的css文件，如`src/index.css`或者`App.css`，在最上方添加三行：
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```
参考Tailwind文档的[生产优化章节](https://tailwindcss.com/docs/optimizing-for-production)，给`postcss.config.js`添加相应的生产压缩配置：
```js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
...(process.env.NODE_ENV === 'production' ? { cssnano: {} } : {})
}
}
```
安装cssnano：
```sh
yarn add -D cssnano
```
## 第三步：安装ElasticUI（[文档](https://elastic.github.io/eui/#/guidelines/getting-started)）
```sh
yarn add @elastic/eui @elastic/datemath @emotion/react moment prop-types
```
## 第四步：安装router
```sh
# 这里一定要指定版本，不同版本兼容不同，一般EUI更新比较慢，
# 如果用了最新版的router，可能会和EUI不兼容，
# 具体可以看下面EUI和react-router的结合文档，
# 里面最新支持到哪个版本，最好就选哪个版本安装
yarn add [email protected]
```
### react-router与Eui的结合
主体上，我们尽可能多地使用react-router的“软导航”作为路由，而不是Eui的HTML原生“硬导航”。而EuiLink、breadcrumb等组件的优势也是不能忽视的。因此我们要将EUILink组件与react-router-dom的Link组件进行混合封装，以此来避免两种Link组件的难以抉择问题。
Eui官方有一份文档：<https://github.com/elastic/eui/blob/main/wiki/react-router.md> 专门提供了开箱即用的解决方案，按需选择即可。
其他情况，可以参考 <https://github.com/elastic/eui/issues/4043>，用onClick直接进行history的操作。
## 第五步：添加SASS支持（[文档](https://create-react-app.dev/docs/adding-a-sass-stylesheet)）
```sh
yarn add -D sass
```
EUI自定义Theme的方式：<https://elastic.github.io/eui/#/theming/customizing-themes>
有需要的话把现有的css文件都改成scss或sass。
## 第六步：添加Redux（Redux Toolkit）支持（[文档](https://redux-toolkit.js.org/tutorials/quick-start)）
```sh
yarn add @reduxjs/toolkit react-redux redux
```
## 总结初始项目结构的变动
> **EUI和react-router的组合方式采用的是[email protected]方式**
```text
src/
+ eui/
+ EuiCustomLink.tsx // 见EUI和react-router组合的文档
- App.css
- App.test.tsx
M App.tsx
M index.scss <= index.css
index.tsx
- logo.svg
react-app-env.d.ts
reportWebVitals.ts
setupTests.ts
```
`index.scss`:
```scss
@tailwind base;
@tailwind components;
@tailwind utilities;
@import '@elastic/eui/src/themes/amsterdam/colors_dark';
@import '@elastic/eui/src/themes/amsterdam/globals';
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
```
`index.tsx`:
```tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.scss';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {HashRouter} from 'react-router-dom';
import {EuiErrorBoundary, EuiProvider} from '@elastic/eui';
const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement,
);
root.render(
<React.StrictMode>
<HashRouter>
<EuiErrorBoundary>
<EuiProvider colorMode="dark">
<App/>
</EuiProvider>
</EuiErrorBoundary>
</HashRouter>
</React.StrictMode>,
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
// reportWebVitals(console.log);
```
`APP.tsx`：
```tsx
import React from 'react';
import { EuiProvider, EuiErrorBoundary } from '@elastic/eui';
const App = () => (
<EuiErrorBoundary>
<EuiProvider colorMode="dark">
...
</EuiProvider>
</EuiErrorBoundary>
);
```
![]()