vite + react +typescript 环境搭建小白入门教程

下面是"vite + react +typescript 环境搭建小白入门教程"的完整攻略：

1. 安装 Node.js

Node.js是运行在服务器端的JavaScript运行环境，需要先安装好这个软件才可以进行后续的搭建。在Node.js官方网站下载相应的可执行安装程序，然后按照指引进行安装。

2. 初始化项目

打开一个命令行终端，进入项目所在目录，并执行以下命令，进行项目初始化：

npm init -y

这个命令会自动生成一个默认的package.json文件，用于描述项目的基本信息和依赖。

3. 安装必要的依赖

执行以下命令，安装必要的依赖：

npm install vite react react-dom @types/react @types/react-dom --save-dev
npm install typescript @types/node --save-dev

• vite是一个快速和轻量级的Web 应用程序开发工具，可以用于构建前端应用。

• react和react-dom是React框架的核心依赖。

• @types/react和@types/react-dom是React的类型定义文件，用于做类型检查。

• typescript是一种跨平台的编程语言，用于增强JavaScript的类型系统。

• @types/node是Node.js的类型定义文件。

4. 创建源代码文件

在项目根目录下创建以下目录结构：

src/
├── App.tsx
└── index.tsx

在index.tsx文件中编写以下代码：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

在App.tsx文件中编写以下代码：

import React from 'react';

function App() {
  return (
    <div>
      <h1>Hello, World!</h1>
    </div>
  );
}

export default App;

这两个文件是一个React应用程序的入口和主组件。

5. 编写vite配置文件

在项目根目录下创建一个名为vite.config.ts的文件，编写以下代码：

import reactRefresh from '@vitejs/plugin-react-refresh';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [reactRefresh()],
  esbuild: {
    jsxInject: `import React from 'react';`
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js', '.json']
  },
  server: {
    port: 3000
  }
});

这个配置文件设置了vite的一些基本选项，比如React的热更新和端口号等。

6. 运行程序

在命令行终端中执行以下命令，启动React应用程序：

npx vite

打开浏览器，访问http://localhost:3000，可以看到Hello, World!的字样。

示例说明一

假设我们要在应用程序中新增一个累加器组件，它可以保存一个数字，并能够实现数字加1的功能。在src目录下创建一个名为Counter.tsx的文件，编写以下代码：

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState<number>(0);

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

  return (
    <div>
      <h2>Counter: {count}</h2>
      <button onClick={handleClick}>+1</button>
    </div>
  );
}

export default Counter;

在App.tsx文件中添加以下代码：

import React from 'react';
import Counter from './Counter';

function App() {
  return (
    <div>
      <h1>Hello, World!</h1>
      <Counter />
    </div>
  );
}

export default App;

保存文件，浏览器窗口会自动刷新，可以看到在页面上新增了一个按钮和一个计数器。

示例说明二

假设我们要调整应用程序的主题颜色为黄色。在项目根目录下创建一个名为styles.css的文件，编写以下代码：

body {
  background-color: yellow;
}

在index.tsx文件中引入styles.css文件：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './styles.css';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

保存文件，浏览器窗口会自动刷新，可以看到页面的背景颜色变成了黄色。

至此，我们已经完成了"vite + react +typescript 环境搭建小白入门教程"的攻略。