03｜看板应用：从零开始快速搭建一个React项目
荧光笔
直线
曲线- 深入了解
- 翻译
- 解释
- 总结
使用React和Create React App（CRA）工具快速搭建前端项目是现代前端开发的重要实践。本文详细介绍了搭建开发环境的步骤，包括安装Node.js和使用fnm工具管理Node版本，以及推荐的前端开发IDE。作者还展示了如何使用Flexbox布局和循环渲染来构建React组件，以实现页面布局和动态数据展示。此外，文章还介绍了React的状态state和useState()的使用，以及如何处理交互和条件渲染。通过实例演示了如何实现“添加新卡片”功能，并讨论了状态state对组件重新渲染的影响。最后，文章提出了数据驱动的概念，并引导读者思考如何实现更复杂的交互功能。总体而言，本文为读者提供了快速上手React项目开发的指南，同时强调了现代前端开发的工程化实践和即时反馈特性。
《现代 React Web 开发实战》，新⼈⾸单¥59
全部留言(33)
- 最新
- 精选
🐑置顶你好，我是咱们《现代React Web开发实战》的专栏编辑！课程中的相关代码我都放在了这里，你可以根据需要来学习👇 🌟https://gitee.com/evisong/geektime-column-oh-my-kanban 这是oh-my-kanban项目源代码。 🌟https://gitee.com/evisong/geektime-column-oh-my-kanban/commits/main 这个是03分步骤提交的commits。 🌟https://gitee.com/evisong/geektime-column-oh-my-kanban/releases/tag/v0.3.0 这个是03的完整代码。2022-08-25归属地：北京7
东方奇骥跟着老师一起写，Typescript版本：https://github.com/worldluoji/front-end/blob/main/react/my-app/src/components/board/board.tsx作者回复: 你好，东方奇骥，为你的认真好学点赞！你的TS代码我看过，代码中能看出你的严谨和思考。 我有两个小的comments： 1. 目前03的功能，你基本都实现了，除了最后一步“把组件外面的todoList 数组改为 state 转移到组件内部”，希望你再接再厉：） 2. interface Card和interface Submit的命名。据即不官方也不严肃的统计，软件工程师每天开发时间的50%都在为类、接口、变量取名字。我的习惯是 interface KanbanCardProps和interface KanbanNewCardProps ，等到真有抽象需求时再重构改名。这样可以省去一半的动脑时间：）
2022-08-25归属地：北京211
船长老师好，问下这里 setTodoList 时为什么要用函数写？直接写有什么问题吗？ （不能贴图，我上传了图床） 作者回复: 你好，船长，在第9节课React Hooks中会详细讲到这种用法，这里先剧透一下：在一些特定情况下，你通过useState声明的todoList变量值不是最新的state值，基于这个变量值来计算下一次的state值时，可能会覆盖上次的修改；而当state更新函数的参数是一个函数时，React会保证为这个函数传入对应state的最新值，这样函数就可以基于这个最新值来计算下一次的state值。
2022-09-07归属地：北京24
学习前端-react请问：什么是受控组件？是不是指的是value值是传入的然后触发的事件去更新value？作者回复: 你好，Geek_8aba0d，你的理解基本正确，再加一个限定：value值是来自于state，更新value也是通过更新state间接达成的，这样可以保证state是组件的“单一事实来源”。在后面第10节课事件处理，我们还会深入介绍受控组件，敬请期待。
2022-08-31归属地：北京3
coderHOW做的时候加了一个input框自动焦点的功能： const inputRef = useRef(); useEffect(() => { inputRef.current.focus() })作者回复: 你好，coder，这个功能非常赞，这也体现了我们前端开发者对用户体验的追求。 虽然后面讲hooks才会讲到useRef这个API，但我想请你先做个实验，在focus() 语句后面加一句： console.log('focused'); 然后在文本框里连续输入字符，在浏览器控制台看看有没有什么异样。
2022-08-26归属地：北京73
若川学到了新的node版本管理工具 fnm。 Windows 用户安装 VSCode 后，命令行终端默认就有 code 命令了~可以 code -h 查看帮助信息。作者回复: 你好，若川。感谢你分享Windows上VSCode的使用经验。如果你在Windows上开发React应用时遇到一些不容易解决的问题，可以考虑使用Windows的WSL2 Linux子系统。
2022-08-23归属地：北京103
CondorHero以前只用过 nvm，这回了解了 fnm，借助它去调研了下 Node.js 管理器，然后一下子打开了 Node.js 管理器的大门，什么 nvm、n、fnm、Volta、nvs 等等，一圈看下来还是 fnm 香 ，速度快、更好的跨平台、像 nvm 一样的 API 简洁度，瞬间把 nvm 卸了装上 fnm😄作者回复: 你好，Condor Hero，你对技术的热情和这样举一反三的学习方式，一定会给你带来更多的收获。 话说Volta我是第一次听说，我大概看了下它介绍，看起来原理与fnm类似，也是在使用shim的方式。谢谢你告诉大家。
2022-08-25归属地：北京2
阿阳老师你好，请问在更新组件状态时，这样使用： setTodoList((currentTodoList) => [ { title, status: new Date().toDateString() }, ...currentTodoList, ]); 这时候传入的是一个回调函数，这种使用方法能讲一下吗？作者回复: 你好，阿阳，在第9节课React Hooks中会详细讲到这种用法，这里先剧透一下：在一些特定情况下，你通过useState声明的todoList变量值不是最新的state值，基于这个变量值来计算下一次的state值时，可能会覆盖上次的修改；而当state更新函数的参数是一个函数时，React会保证为这个函数传入对应state的最新值，这样函数就可以基于这个最新值来计算下一次的state值。
2022-09-01归属地：北京21
Ccccceilui执行完 brew install fnm 和 fnm install --lts 命令后 npx 和 yarn 命令并不存在啊？作者回复: 你好，Ccccceilui，抱歉这里我遗漏了一个步骤，安装完fnm后，需要在你的.bashrc或.zshrc文件中加入 eval "$(fnm env --use-on-cd)" 之后重启命令行才能生效。另外后面的yarn start命令请改成npm start。 抱歉给你造成了困扰，同时也感谢你的抓虫，我会尽快修正文稿。
2022-08-24归属地：北京21- muzzy老师 现在还推荐使用cra去创建react的应用么 还是直接用vite去创建
作者回复: 你好，muzzy，最近半年我们新开的项目基本都是用vite创建的了，vite确实快，尤其是在代码量大的时候。不过小型项目中它跟cra的区别并不明显。
2023-07-27归属地：浙江