最详细教程【React+TS】从零开始搭建React+TypeScript+Router+Redux+Less+px2rem自适应+sass+axios反向代理+别名@+Antd-mobile

以下是搭建一个React+TypeScript项目的基本步骤，包括集成Router、Redux以及样式处理：

1. 初始化项目：

npx create-react-app my-app --template typescript

2. 安装react-router-dom：

npm install react-router-dom

3. 安装react-redux和redux：

npm install react-redux redux

4. 安装redux-thunk中间件（如果需要异步actions）：

npm install redux-thunk

5. 安装less和less-loader以支持LESS文件：

npm install less less-loader

6. 安装postcss-px2rem以转换单位：

npm install postcss-px2rem

7. 在src目录下创建redux文件夹，并初始化store.ts：

// src/redux/store.ts
 
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';
 
const store = createStore(rootReducer, applyMiddleware(thunk));
 
export default store;

8. 在src目录下创建redux/reducers.ts：

// src/redux/reducers.ts
 
import { combineReducers } from 'redux';
 
const rootReducer = combineReducers({
  // 定义reducers
});
 
export default rootReducer;

9. 在src目录下创建redux/actions.ts：

// src/redux/actions.ts
 
// 定义actions

10. 修改index.tsx以使用Redux和React Router：

// src/index.tsx
 
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { BrowserRouter } from 'react-router-dom';
import store from './redux/store';
import App from './App';
 
ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

11. 在src/App.tsx中添加路由：

// src/App.tsx
 
import React from 'react';
import { Route, Switch } from 'react-router-dom';
import HomePage from './HomePage';
 
function App() {
  return (
    <div>
      <Switch>
        <Route path="/home" component={HomePage} />
        {/* 其他路由 */}
      </Switch>
    </div>
  );
}
 
export default App;

12. 在src目录下创建HomePage.tsx组件：

// src/HomePage.tsx
 
import React from 'react';
 
const HomePage: React.FC = () =>