使用TypeScript版本的React实现TodoList应用

使用TypeScript版本的React实现TodoList应用

新建项目

1. 确保你安装了较新版本的Node.js

2. 创建一个新的项目

   npx create-react-app todo-react-ts --template typescript
   

3. 删除多余的文件

   cd todo-react-ts
   rm src/*
   

4. 新建下列文件

   touch src/index.tsx src/App.tsx
   

   并分别填入下面的内容：

   // index.tsx
   import React from 'react';
   import ReactDOM from 'react-dom';
   import App from './App';
   ReactDOM.render(
     <App />,
     document.getElementById('root')
   );
   
   // App.tsx
   import React from 'react';
   const App: React.FC = () => {
       return <div>Hello World!</div>
   };
   export default App;
   

5. 执行npm start，在浏览器中如下图所示则表示环境准备成功。

组件组成

应用组件结构如下:

App
--TodoList
---- TodoListItem
--AddTodoForm

实现TodoListItem组件

1. 在src下新建一个TodoListItem.tsx文件，一个types.ts文件，一个TodoListItem.css文件

   touch src/TodoListItem.tsx
   touch src/types.ts
   touch</