用react+typescript实现一个todo应用。并且将静态资源(html,js,css等)编译到node.js的静态资源目录中。端口:3000
时间: 2023-06-18 08:03:20 浏览: 140
好的,下面是一个简单的 React + TypeScript 实现的 Todo 应用,并将静态资源编译到 Node.js 静态资源目录中。
首先,你需要安装 Node.js 和 npm。
然后,创建一个新的目录,进入该目录并执行以下命令:
```bash
npm init -y
npm install react react-dom react-scripts typescript @types/react @types/react-dom @types/node --save-dev
```
这些命令将安装 React、React DOM、React Scripts、TypeScript 和类型定义。
接下来,创建以下目录结构:
```
├── node_modules/
├── public/
│ ├── index.html
│ └── favicon.ico
├── src/
│ ├── App.tsx
│ ├── index.tsx
│ ├── Todo.tsx
│ └── index.css
├── package.json
└── tsconfig.json
```
其中,`public` 目录用于存放静态资源,`src` 目录用于存放 TypeScript 代码。
在 `public` 目录下创建一个 `index.html` 文件,内容如下:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
```
在 `src` 目录下创建 `index.tsx` 文件,内容如下:
```tsx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
```
在 `src` 目录下创建 `App.tsx` 文件,内容如下:
```tsx
import React, { useState } from 'react';
import Todo from './Todo';
import './index.css';
const App: React.FC = () => {
const [todos, setTodos] = useState<string[]>([]);
const handleAddTodo = (todo: string) => {
setTodos([...todos, todo]);
};
const handleRemoveTodo = (index: number) => {
const newTodos = [...todos];
newTodos.splice(index, 1);
setTodos(newTodos);
};
return (
<div className="app">
<h1>Todo App</h1>
<Todo onAddTodo={handleAddTodo} onRemoveTodo={handleRemoveTodo} todos={todos} />
</div>
);
};
export default App;
```
在 `src` 目录下创建 `Todo.tsx` 文件,内容如下:
```tsx
import React, { useState } from 'react';
interface Props {
onAddTodo: (todo: string) => void;
onRemoveTodo: (index: number) => void;
todos: string[];
}
const Todo: React.FC<Props> = ({ onAddTodo, onRemoveTodo, todos }) => {
const [todoText, setTodoText] = useState('');
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
onAddTodo && onAddTodo(todoText);
setTodoText('');
};
return (
<div className="todo">
<form onSubmit={handleSubmit}>
<input type="text" value={todoText} onChange={(e) => setTodoText(e.target.value)} />
<button type="submit">Add</button>
</form>
<ul>
{todos.map((todo, index) => (
<li key={index}>
{todo}
<button onClick={() => onRemoveTodo && onRemoveTodo(index)}>Remove</button>
</li>
))}
</ul>
</div>
);
};
export default Todo;
```
在 `src` 目录下创建 `index.css` 文件,内容如下:
```css
.app {
margin: 20px;
}
.todo {
margin-top: 20px;
}
.todo input {
margin-right: 10px;
}
.todo li {
list-style: none;
margin: 10px 0;
}
.todo button {
margin-left: 10px;
}
```
最后,在根目录下创建 `tsconfig.json` 文件,内容如下:
```json
{
"compilerOptions": {
"target": "es5",
"lib": ["es6", "dom"],
"jsx": "react",
"module": "commonjs",
"moduleResolution": "node",
"strict": true,
"esModuleInterop": true
},
"include": ["src"]
}
```
现在,你可以在终端中执行以下命令启动应用:
```bash
npm start
```
这将启动开发服务器,并在浏览器中打开应用。如果你对代码进行更改,服务器将自动重新加载应用。
要将静态资源编译到 Node.js 静态资源目录中,可以在 `package.json` 文件中添加以下内容:
```json
{
"name": "todo-app",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build && cp -r build/* static"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2"
},
"devDependencies": {
"@types/node": "^16.3.0",
"@types/react": "^17.0.11",
"@types/react-dom": "^17.0.8",
"react-scripts": "^4.0.3",
"typescript": "^4.3.5"
}
}
```
这将在 `npm run build` 命令中执行 `react-scripts build`,然后将编译后的静态资源复制到名为 `static` 的目录中。
现在,你可以在终端中执行以下命令编译应用:
```bash
npm run build
```
这将编译应用并将静态资源复制到 `static` 目录中。
最后,你可以在终端中执行以下命令启动 Node.js 服务器:
```bash
cd static
npx serve -p 3000
```
这将启动 Node.js 服务器,并在浏览器中打开应用。如果你对代码进行更改,你需要重新编译应用并重新启动服务器。
阅读全文