现代 React Web 开发实战
宋一玮
FreeWheel 中国研发中心前端架构师
16115 人已学习
新⼈⾸单¥59
登录后,你可以任选4讲全文学习
课程目录
已完结/共 31 讲
现代 React Web 开发实战
15
15
1.0x
00:00/00:00
登录|注册

03|看板应用:从零开始快速搭建一个React项目

你好,我是宋一玮。从这节课开始,我们就进入到 React Web 应用开发的学习。
作为前端开发者,在学习一门新技术时最常用的方法是什么?Linux 操作系统的创始人 Linus 大神有句名言:“口说无凭,放码过来。”没错儿,上手写代码确实是最有效的方式之一。
然而我也听到过不少吐槽:
前端开发不应该是一边写代码,一边刷新浏览器就够了吗?
为什么只想写几行代码,要配置一天的开发环境?
代码在别人那里跑的好好的,为什么我这里跑不起来了?
我改了几行代码,为什么页面没反应 / 就挂了?
我们需要了解一个现状,那就是现代前端开发早已结束了刀耕火种的时代,逐步向其他软件开发领域看齐。比如常被一起提到的后端开发领域,开发者们也常会抱怨配置开发环境又复杂又耗时间,同样的代码换个环境编译就会挂,等等。
现代前端的编译构建、依赖管理、CI/CD 等工程化实践一应俱全,正如第 1 讲提到的,前端应用功能日益丰富、强大,这样的变化也是为了应对开发复杂度的攀升,但同时也带来了类似的痛点。我们即将要创建的 React 项目,就需要用到一系列工具链。不过这些技术,对于初学者来说确实有一定的门槛。
这时你可能会问到:“那我什么时候才可以上手写 React 代码?”
确认放弃笔记?
放弃后所记笔记将不保留。
新功能上线,你的历史笔记已初始化为私密笔记,是否一键批量公开?
批量公开的笔记不会为你同步至部落
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线
笔记
复制
AI
  • 深入了解
  • 翻译
    • 英语
    • 中文简体
    • 中文繁体
    • 法语
    • 德语
    • 日语
    • 韩语
    • 俄语
    • 西班牙语
    • 阿拉伯语
  • 解释
  • 总结

使用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归属地:北京
    2
    11
  • 船长
    老师好,问下这里 setTodoList 时为什么要用函数写?直接写有什么问题吗? (不能贴图,我上传了图床) ![20220907QgBXtq](http://picbed.tanguangzhi.com/uPic/20220907QgBXtq)

    作者回复: 你好,船长,在第9节课React Hooks中会详细讲到这种用法,这里先剧透一下:在一些特定情况下,你通过useState声明的todoList变量值不是最新的state值,基于这个变量值来计算下一次的state值时,可能会覆盖上次的修改;而当state更新函数的参数是一个函数时,React会保证为这个函数传入对应state的最新值,这样函数就可以基于这个最新值来计算下一次的state值。

    2022-09-07归属地:北京
    2
    4
  • 学习前端-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归属地:北京
    7
    3
  • 若川
    学到了新的node版本管理工具 fnm。 Windows 用户安装 VSCode 后,命令行终端默认就有 code 命令了~可以 code -h 查看帮助信息。

    作者回复: 你好,若川。感谢你分享Windows上VSCode的使用经验。如果你在Windows上开发React应用时遇到一些不容易解决的问题,可以考虑使用Windows的WSL2 Linux子系统。

    2022-08-23归属地:北京
    10
    3
  • 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归属地:北京
    2
    1
  • 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归属地:北京
    2
    1
  • muzzy
    老师 现在还推荐使用cra去创建react的应用么 还是直接用vite去创建

    作者回复: 你好,muzzy,最近半年我们新开的项目基本都是用vite创建的了,vite确实快,尤其是在代码量大的时候。不过小型项目中它跟cra的区别并不明显。

    2023-07-27归属地:浙江
收起评论
显示
设置
留言
33
收藏
沉浸
阅读
分享
手机端
快捷键
回顶部