1. Create a project
First, create a new React project using the create-react-app tool:
npx create-react-app 项目名 --template typescript
2. Install dependencies
After using scaffolding to create a project, it comes with react-dom and other dependencies, but the routing method used in react is react-router-dom.
npm install react-router-dom
3. File structure
By default, the create-react-app template automatically generates some files and folders, including:
- node_modules
- public
|- index.html
|- favicon.ico
- src
|- App.css
|- App.tsx
|- index.tsx
|- logo.svg
|- react-app-env.d.ts
|- setupTests.ts
- package.json
- README.md
- tsconfig.json
- node_modules: stores all project dependencies.
- public: stores static resource files, such as index.html and favicon.ico files.
- src: Stores the source code of the application.
- App.css and App.tsx: are the styles and logic of React components.
- index.tsx: is the entry point of the application.
- tsconfig.json: Stores TypeScript configuration information.
4. Configuration style
After completing the above steps, we can also use preprocessors such as sass and less to process styles.
npm install sass stylelint stylelint-config-standard-scss --D
This way we can use sass styles directly in the project.
5. Configure routing
Create a new router folder and create the index.tsx file in it
import {
lazy } from "react";
import {
RouteObject } from "react-router-dom";
import Home from "../views/home";
const New = lazy(() => import("../views/editor/new") as any);
const Article = lazy(() => import(`../views/Article/[id]`) as any);
const routes: RouteObject[] = [
{
path: "/",
element: <Home />,
},
{
path: "/new",
element: <New />,
},
{
path: "/article/:id",
element: <Article />,
}
];
export default routes;
Use routing in the App.tsx folder to
wrap the routing in index.tsx in the root directory
After running successfully, you should be able to access your application through http://localhost:3000.
Put a version information at the end
