前端开发者的最新选择：深入探索 React TS3 之旅

2023-12-28 19:57:04

从零开始构建 React TS3 项目

准备工作
- 安装 Node.js 和 npm
- 安装 create-react-app
创建第一个项目
- 创建一个新项目：```bash
  create-react-app my-app --template typescript
```
- 进入项目目录：```bash
cd my-app
```
- 启动开发服务器：```bash
  npm start

编写组件

创建一个组件：```bash
touch src/components/MyComponent.tsx

- 在组件中编写代码：```typescript
import React, { useState } from "react";

const MyComponent = () => {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
};

export default MyComponent;

将组件导入 App.tsx：```typescript
import MyComponent from "./components/MyComponent";

const App = () => {
return (

React TS3 App

);
};

export default App;

处理数据

使用状态管理工具 Redux：```bash
npm install redux react-redux

- 在项目中使用 Redux：```typescript
// store.ts
import { createStore } from "redux";

const initialState = {
  count: 0,
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case "INCREMENT":
      return { ...state, count: state.count + 1 };
    default:
      return state;
  }
};

const store = createStore(reducer);

// App.tsx
import React, { useEffect } from "react";
import { connect } from "react-redux";

const App = (props) => {
  useEffect(() => {
    store.subscribe(() => {
      console.log(store.getState());
    });
  }, []);

  return (
    <div>
      <h1>React TS3 App</h1>
      <MyComponent count={props.count} />
    </div>
  );
};

const mapStateToProps = (state) => {
  return {
    count: state.count,
  };
};

export default connect(mapStateToProps)(App);