开源项目教程:create-react-app-material-typescript-redux
1. 项目的目录结构及介绍
项目的目录结构如下:
create-react-app-material-typescript-redux/
├── public/
│ ├── index.html
│ └── ...
├── src/
│ ├── App.tsx
│ ├── index.tsx
│ └── ...
├── .gitignore
├── .prettierignore
├── .prettierrc.json
├── LICENSE
├── README.md
├── package-lock.json
├── package.json
├── tsconfig.json
├── tsconfig.prod.json
├── tsconfig.test.json
└── ...
目录结构介绍
public/
: 包含公开的静态文件,如index.html
。src/
: 包含源代码文件,如App.tsx
和index.tsx
。.gitignore
: 指定 Git 忽略的文件和目录。.prettierignore
: 指定 Prettier 忽略的文件和目录。.prettierrc.json
: Prettier 配置文件。LICENSE
: 项目许可证。README.md
: 项目说明文档。package-lock.json
: 锁定依赖版本。package.json
: 项目依赖和脚本配置。tsconfig.json
: TypeScript 配置文件。tsconfig.prod.json
: 生产环境 TypeScript 配置文件。tsconfig.test.json
: 测试环境 TypeScript 配置文件。
2. 项目的启动文件介绍
项目的启动文件主要包括 src/index.tsx
和 src/App.tsx
。
src/index.tsx
这是项目的入口文件,负责渲染 React 应用到 DOM 中。
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();
src/App.tsx
这是应用的主组件,负责应用的整体布局和路由。
import React from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import { ThemeProvider } from '@material-ui/core/styles';
import CssBaseline from '@material-ui/core/CssBaseline';
import theme from './theme';
import Routes from './Routes';
function App() {
return (
<Router>
<ThemeProvider theme={theme}>
<CssBaseline />
<Routes />
</ThemeProvider>
</Router>
);
}
export default App;
3. 项目的配置文件介绍
项目的配置文件主要包括 package.json
和 tsconfig.json
。
package.json
这是项目的依赖和脚本配置文件。
{
"name": "create-react-app-material-typescript-redux",
"version": "0.1.0",
"private": true,
"dependencies": {
"@material-ui/core": "^4.11.0",
"@material-ui/icons": "^4.9.1",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"@types/jest": "^26.0.15",
"@types/node": "^12.0.0",
"@types/react": "^16.9.53",
"@types/react-dom": "^16.9.8",
"react": "^17.0.1",
"react-dom":