技术探索从零开始：用一个前端小项目点亮你的简历

大家好，我是老张，985计算机科班出身，现在是一名全栈工程师。平时喜欢在掘金写一些入门教程，帮助刚入行的朋友少走弯路。今天这篇教程的起因很简单——最近有好几个学弟学妹问我：“我零基础，怎么才能做出一个能放进简历的项目？”

我当初学的时候也特别迷茫，看一堆概念却不知道怎么落地。后来发现，最好的学习方式不是死记硬背，而是边做边学。所以今天，我们就用一个超简单的“待办事项（Todo List）”项目，带你体验完整的技术探索与实践优化过程。这个项目虽然小，但足够体现你的综合能力，也能成为你简历上的第一个亮点。

---

为什么选前端？因为它快、直观、反馈强！

前端是用户直接看到的部分，比如网页、App界面。你写一行代码，刷新一下浏览器就能看到效果——这种即时反馈对新手特别友好。而且，前端技术栈清晰，工具链成熟，非常适合零基础入门。

更重要的是：一个完整的前端项目，能展示你解决问题的能力。企业不只看你用了什么框架，更看重你怎么思考、怎么调试、怎么优化。

---

第一步：搭好开发环境（别怕，就三步！）

很多新手卡在第一步：装环境。其实现在前端开发环境已经非常简单了。我们只需要：

1. 安装 Node.js（它自带 npm，一个包管理工具）
2. 用脚手架快速创建项目
3. 启动开发服务器

具体操作（以 Windows / macOS 为例）：

1. 下载并安装 Node.js

• 打开官网：https://nodejs.org
• 点击 LTS 版本（长期支持版，更稳定）
• 安装时一路“下一步”即可

✅ 验证是否成功：打开终端（Windows 用 PowerShell 或 CMD，Mac 用 Terminal），输入：

node -v
npm -v

如果显示版本号（比如 v18.17.0），说明装好了！

2. 创建项目（用 Vite 脚手架，超快！）

Vite 是新一代前端构建工具，比传统 Webpack 快得多，特别适合新手。

在终端运行：

npm create vite@latest my-todo-app -- --template react
cd my-todo-app
npm install

💡 解释一下命令：

• my-todo-app：你的项目文件夹名字
• --template react：我们用 React 框架（目前最主流的前端库之一）
• npm install：安装项目依赖（就像下载插件）

3. 启动项目

npm run dev

你会看到类似这样的输出：

Local:   http://localhost:5173/

打开浏览器，访问这个地址，看到 React 的欢迎页面就算成功了！

---

第二步：搞懂几个核心概念（用大白话解释）

别被术语吓到，我用生活中的例子帮你理解。

术语	大白话解释	类比
组件（Component）	网页的一个独立部分，比如按钮、列表、导航栏	就像乐高积木，可以拼在一起
状态（State）	组件“记住”的数据，会变化	比如待办事项的完成/未完成状态
事件（Event）	用户操作触发的动作，比如点击、输入	就像你按开关，灯就亮了
Props	父组件传给子组件的数据	像父母给孩子零花钱

🌟 关键思想：前端 = 数据 + 视图。数据一变，视图自动更新。

---

第三步：动手做一个 Todo List 项目

我们现在要做的功能：

• 输入任务，按回车添加
• 显示任务列表
• 点击任务可标记完成（加删除线）
• 右侧显示未完成任务数

文件结构说明（你只需要改两个文件）

src/
├── App.jsx        ← 主组件（我们主要改这里）
└── main.jsx       ← 入口文件（不用动）

Step 1：修改 App.jsx

把原来的代码全部删掉，替换成下面的内容：

import { useState } from 'react'

function App() {
  // 状态：存储所有任务
  const [todos, setTodos] = useState([])
  // 状态：当前输入框的内容
  const [inputValue, setInputValue] = useState('')

  // 添加任务
  const addTodo = () => {
    if (inputValue.trim() === '') return // 空内容不添加
    setTodos([
      ...todos,
      { id: Date.now(), text: inputValue, completed: false }
    ])
    setInputValue('') // 清空输入框
  }

  // 切换任务完成状态
  const toggleTodo = (id) => {
    setTodos(todos.map(todo =>
      todo.id === id ? { ...todo, completed: !todo.completed } : todo
    ))
  }

  // 计算未完成数量
  const remaining = todos.filter(t => !t.completed).length

  return (
    <div style={{ padding: '20px', maxWidth: '500px', margin: '0 auto' }}>
      <h1>我的待办清单</h1>
      
      {/* 输入框 + 添加按钮 */}
      <div style={{ marginBottom: '20px' }}>
        <input
          type="text"
          value={inputValue}
          onChange={(e) => setInputValue(e.target.value)}
          onKeyPress={(e) => e.key === 'Enter' && addTodo()}
          placeholder="输入任务，按回车添加"
          style={{ padding: '8px', width: '70%' }}
        />
      </div>

      {/* 任务列表 */}
      <ul>
        {todos.map(todo => (
          <li
            key={todo.id}
            onClick={() => toggleTodo(todo.id)}
            style={{
              cursor: 'pointer',
              textDecoration: todo.completed ? 'line-through' : 'none',
              padding: '6px 0'
            }}
          >
            {todo.text}
          </li>
        ))}
      </ul>

      {/* 统计信息 */}
      <p>还有 <strong>{remaining}</strong> 项未完成</p>
    </div>
  )
}

export default App

Step 2：保存并查看效果

保存文件后，浏览器会自动刷新。试试输入“买牛奶”，按回车——任务就出现了！点击它，会变成删除线；再点一次，又恢复。

🔍 代码重点解析：

• useState：React 提供的“记忆”工具，让你存数据
• ...todos：展开语法，意思是“保留原来的所有任务，再加上新任务”
• map：把数组里的每个任务变成一个 <li> 元素

---

第四步：优化与综合提升（让项目更“值钱”）

现在项目能跑了，但简历上不能只写“做了个待办列表”。我们要通过实践优化体现综合能力。

优化点 1：本地存储（刷新不丢数据）

用户刷新页面后，任务还在！这叫“持久化”。

在 App.jsx 中加入：

// 在组件顶部，useEffect 用于副作用（比如读取本地数据）
import { useState, useEffect } from 'react'

// 在 return 之前加入：
useEffect(() => {
  const saved = localStorage.getItem('todos')
  if (saved) setTodos(JSON.parse(saved))
}, [])

// 每当 todos 变化，就存到本地
useEffect(() => {
  localStorage.setItem('todos', JSON.stringify(todos))
}, [todos])

💡 localStorage 是浏览器提供的“小仓库”，关掉浏览器数据还在。

优化点 2：样式美化（用 CSS-in-JS 或简单内联）

虽然我们用了内联样式，但你可以进一步引入 Tailwind CSS 或 styled-components。不过对新手来说，先保证功能正确更重要。

优化点 3：错误处理

比如输入为空时不添加，我们已经做了。还可以加提示：“任务不能为空！”。

---

新手常见问题 & 避坑指南

❓ 问题1：终端报错 “command not found: npm”

→ 你没装 Node.js，或者安装后没重启终端。装完 Node 后关闭终端再重新打开。

❓ 问题2：页面一片空白，控制台报错

→ 90% 是 JavaScript 语法错误。仔细看红色报错信息，通常会告诉你哪一行出错了。比如少了个括号、引号不匹配。

❓ 问题3：改了代码但页面没更新

→ 检查是否保存了文件（Ctrl+S / Cmd+S）。Vite 默认自动刷新，但前提是文件已保存。

❓ 问题4：状态更新没反应？

→ React 的状态更新是“不可变”的。不要直接写 todos[0].completed = true，而要用 setTodos(...) 返回一个新数组。

🛑 我当初就在这里卡了两天！记住：永远不要直接修改 state，而是用 setXXX 创建新数据。

---

这个项目如何写进简历？

别只写“使用 React 开发 Todo List”。要突出综合能力和问题解决过程。比如：

个人项目：智能待办清单（React + 本地存储）

• 实现任务增删改查、完成状态切换、未完成统计等核心功能
• 通过 localStorage 实现数据持久化，提升用户体验
• 采用组件化开发思路，代码结构清晰，便于维护
• 项目部署至 Vercel，支持在线访问（附链接）

💡 提示：免费部署可以用 Vercel 或 Netlify，拖拽文件夹就能上线！

---

下一步学什么？给你一条清晰路径

做完这个项目，你已经跨过了最难的第一步。接下来建议：

1. 巩固基础：系统学 HTML/CSS/JavaScript（推荐 MDN 文档）
2. 深入 React：学 hooks（useEffect, useContext）、路由（React Router）
3. 加点后端：用 Node.js + Express 写个 API，实现真正的增删改查
4. 做更复杂的项目：比如天气预报、博客系统、电商首页

🌈 最后送你一句话：每个大神都曾是小白，区别在于他们动手做了第一个项目。你今天的这个 Todo List，就是你技术生涯的起点。

别犹豫，现在就打开终端，敲下第一行命令吧！遇到问题随时来掘金评论区找我，我会尽力解答。

祝你 coding happy！