ایجاد پروژه جدید react typescript با استفاده از vite

npm create vite@latest my-app --template react-ts

yarn create vite my-app --template react-ts

cd my-app

npm install react-router-dom redux @reduxjs/toolkit react-redux

npm install --save-dev @types/react-router-dom @types/react-redux

yarn add react-router-dom redux @reduxjs/toolkit react-redux
yarn add -D @types/react-router-dom @types/react-redux

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
  resolve: {
    extensions: [".ts", ".tsx", ".js"],
  },
});

import { configureStore } from "@reduxjs/toolkit";

const store = configureStore({
  reducer: {},
});

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

export default store;

import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Home from "./pages/Home";
import About from "./pages/About";

const App: React.FC = () => {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
};

export default App;

import React from "react";
import ReactDOM from "react-dom/client";
import { Provider } from "react-redux";
import store from "./store";
import App from "./App";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <Provider store={store}>
    <App />
  </Provider>
);

npm run dev

yarn dev