从 0 到 1，轻松搭建 React + Vite 项目🚀

呆呆的心
258 阅读7分钟

引言

在前端开发的世界里，React 和 Vite 无疑是两颗耀眼的明星✨。React 以其强大的组件化能力和虚拟 DOM 技术，让开发者能够高效地构建复杂的用户界面；而 Vite 则凭借其快速的冷启动和热更新能力，大大提升了开发体验。今天，就让我们一起探索如何使用 React 和 Vite 来搭建一个 Web 应用，远离繁琐的 JS API 编程，专注于业务逻辑的实现🎉。

为什么选择 React 和 Vite？

React 的魅力

React 作为一个用于构建用户界面的 JavaScript 库，具有许多令人心动的特性👍。它采用组件化的开发模式，将页面拆分成多个小的、可复用的组件，使得代码的可维护性和可扩展性大大提高。而且，React 的虚拟 DOM 技术能够高效地更新真实 DOM，减少不必要的重绘和回流，提升页面的性能。此外，React 生态系统丰富，有众多的第三方库和工具可供选择，能够满足各种不同的开发需求。

Vite 的优势

Vite 是一个基于 ES 模块的构建工具，它的出现为前端开发带来了全新的体验🌟。Vite 的冷启动速度极快，因为它不需要像传统的构建工具那样对整个项目进行打包，而是直接利用浏览器的原生 ES 模块支持来加载模块。同时，Vite 的热更新功能也非常强大，当你修改代码时，它能够快速地将修改应用到页面上，无需重新刷新整个页面，大大提高了开发效率。

项目搭建步骤

1. 初始化项目

首先，我们需要使用npm init vite命令来初始化一个基于 Vite 的项目模版。在终端中输入以下命令：

npm init vite

运行该命令后，会出现一些配置选项，我们可以根据自己的需求进行选择。这里我们选择react和js作为项目模版👇：

image.png

image.png

2. 安装依赖

初始化项目完成后，我们需要进入项目目录并安装依赖。在终端中输入以下命令：

cd 项目名
npm install(npm i)

执行npm i命令后，npm 会自动从 npm 仓库中下载项目所需的所有依赖，并将它们安装到node_modules目录下📂。这里的依赖包括 React、React DOM、Vite 以及其他必要的开发工具。

3. 启动应用

安装完依赖后，我们就可以启动应用了。在终端中输入以下命令：

npm run dev

启动成功后，我们可以在浏览器中访问http://localhost:5173，看到我们的 React 应用已经成功运行起来啦🎉。此时，Vite 会启动一个开发服务器，监听文件变化，并实时更新浏览器中的内容。

image.png

React 项目入口代码解读

当项目启动后，我们需要关注项目的入口代码。在项目中，有这样一段关键代码：

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

这段代码的作用是将 React 应用挂载到 HTML 页面上。具体解释如下：

  • import { StrictMode } from 'react'：引入StrictMode组件，它可以帮助我们在开发过程中发现潜在的问题。StrictMode会对其内部的组件进行额外的检查和警告，例如检测过时的 API 使用、不安全的生命周期方法等。

  • import { createRoot } from 'react-dom/client'：引入createRoot方法，用于创建一个根节点。这是 React 18 中推荐的挂载应用的方式，相比之前的ReactDOM.render方法，它支持并发特性和更好的错误处理。

  • import './index.css'：引入全局的 CSS 样式。这里的index.css文件通常包含一些全局的样式设置，如字体、颜色、边距等。

  • import App from './App.jsx'：引入我们的主组件App。App组件是整个应用的根组件，它会包含其他子组件。

  • createRoot(document.getElementById('root')).render(...)：将App组件渲染到 HTML 页面中 id 为root的元素上。在public/index.html文件中，我们可以找到这个 id 为root的元素：

    <body>
  <div id="root"></div>
  <script type="module" src="/src/main.jsx"></script>
</body>

React 组件初体验

在 React 中，组件是完成开发任务的最小单元。一个组件可以是一个函数，它返回一段 HTML 代码，并且在函数体里面return之前可以声明数据和业务逻辑。例如，我们可以创建一个简单的组件来显示一个任务列表👇：

import { useState } from 'react'
import './App.css'

function App() {
  // 数据 -> 数据状态 数据业务 改变的 数据状态
  const [todos,setTodos] = useState(['吃饭','睡觉','打豆豆']);
  const [title,setTitle] = useState('ECUT 一明')
  
  // 使用setTimeout模拟异步数据获取或状态更新
  setTimeout(() => {
    // 更新todos状态和title状态
    setTodos(['吃饭','睡觉','打豆豆','养鱼'])
    setTitle('广东皮')
  },3000)
  
  setTimeout(() => {
    // 再次更新title状态
    setTitle('广东')
  },5000)
  
  return(
    <div>
      <h1 className='title'>{title}</h1>
      <table>
        <thead>
          <tr>
            <th>序号</th>
            <th>任务</th>
          </tr>
        </thead>
        <tbody>
          {
            // 使用map方法遍历todos数组，生成表格行
            todos.map((item,index) => (
              <tr>
                <td>{index + 1}</td>
                <td>{item}</td>
              </tr>
            ))
          }
        </tbody>
      </table>
    </div>
  )
}
export default App

在上面的代码中，我们定义了一个名为App的函数组件。这个组件使用了useState钩子来管理数据状态。具体解释如下：

状态管理

  • const [todos,setTodos] = useState(['吃饭','睡觉','打豆豆'])：定义了一个名为todos的数据状态，并初始化为一个包含三个任务的数组。setTodos是一个用于更新todos状态的函数。
  • const [title,setTitle] = useState('ECUT 一明')：定义了一个名为title的数据状态，并初始化为ECUT 一明。setTitle是一个用于更新title状态的函数。

异步状态更新

  • setTimeout函数用于在一定时间后更新数据状态。例如，在 3 秒后，我们更新了todos和title状态；在 5 秒后，我们再次更新了title状态。需要注意的是，React 的状态更新是异步的，多次调用setState可能会被合并。

JSX 语法

  • 在return语句中，我们使用 JSX 语法返回了一段 HTML 代码。JSX 是一种 JavaScript 的语法扩展，它允许我们在 JavaScript 代码中编写类似 HTML 的结构。
  • 使用{}来嵌入 JavaScript 表达式，例如{title}用于显示标题，todos.map(...)用于遍历任务数组并生成表格行。

组件渲染流程

  1. 当组件首次渲染时，title的值为ECUT 一明，todos的值为['吃饭','睡觉','打豆豆']。
  2. 3 秒后，setTimeout回调函数执行，todos更新为['吃饭','睡觉','打豆豆','养鱼']，title更新为广东皮。这会触发组件的重新渲染。
  3. 5 秒后，另一个setTimeout回调函数执行，title更新为广东，再次触发组件的重新渲染。

添加交互功能

现在，让我们为这个任务列表添加一些交互功能，比如添加新任务和删除任务。以下是改进后的代码：

import { useState } from 'react'
import './App.css'

function App() {
  const [todos, setTodos] = useState(['吃饭', '睡觉', '打豆豆'])
  const [newTodo, setNewTodo] = useState('')
  const [title, setTitle] = useState('ECUT 一明')

  // 添加新任务
  const addTodo = () => {
    if (newTodo.trim()) {
      setTodos([...todos, newTodo])
      setNewTodo('')
    }
  }

  // 删除任务
  const deleteTodo = (index) => {
    const newTodos = [...todos]
    newTodos.splice(index, 1)
    setTodos(newTodos)
  }

  return (
    <div className="container">
      <h1 className="title">{title}</h1>
      
      {/* 添加任务输入框 */}
      <div className="add-todo">
        <input
          type="text"
          placeholder="请输入新任务..."
          value={newTodo}
          onChange={(e) => setNewTodo(e.target.value)}
        />
        <button onClick={addTodo}>添加任务</button>
      </div>
      
      <table>
        <thead>
          <tr>
            <th>序号</th>
            <th>任务</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          {todos.map((item, index) => (
            <tr key={index}>
              <td>{index + 1}</td>
              <td>{item}</td>
              <td>
                <button onClick={() => deleteTodo(index)}>删除</button>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  )
}

export default App

新增功能说明

  • 添加任务：新增了一个输入框和按钮，用户可以输入新任务并添加到列表中。
  • 删除任务：为每个任务添加了删除按钮，点击后可以删除对应的任务。
  • 状态管理：新增了newTodo状态来管理输入框中的值。

总结

通过本文的介绍，我们学习了如何使用 React 和 Vite 来搭建一个 Web 应用，以及如何创建一个简单的 React 组件。React 和 Vite 的结合，让我们能够更加高效地进行前端开发，远离繁琐的 JS API 编程，专注于业务逻辑的实现。希望本文对你有所帮助，快去动手实践一下吧💪！

avatar
文章
阅读
粉丝