🔭 全栈基础

学习构建Web应用程序的基础工具和技能

在本工作坊中，我们将通过一个真实世界的应用程序中的练习，帮助你学习构建Web应用程序的一些关键概念。

先决条件

系统要求

git v2.18或更高版本
NodeJS v20或更高版本
npm v8或更高版本

所有这些都必须在你的PATH中可用。要验证是否正确设置，你可以运行以下命令：

git --version
node --version
npm --version

如果你在任何一项上遇到问题，可以了解更多关于PATH环境变量的信息，以及如何在Windows或Mac/Linux上修复它。

设置

这是一个相当大的项目（实际上是多个应用程序合一），因此第一次设置可能需要几分钟时间。请确保网络连接良好，然后再运行设置，并准备一些小吃。

按照以下步骤进行设置：

git clone --depth 1 https://github.com/epicweb-dev/full-stack-foundations.git
cd full-stack-foundations
npm run setup

如果你在此过程中遇到错误，请提出问题并提供尽可能多的详细信息。

练习

你可以在exercises目录中找到所有练习。下面描述了工作坊应用程序的结构，但大多数时候，你应该能够简单地运行应用程序，并使用应用程序导航不同的练习（甚至有按钮可以直接在你的编辑器中打开正确的练习文件）。

练习的目的不是让你自己完成所有的材料。它的目的是让你的大脑思考在_我_讲解材料时要问我的正确问题。

运行应用程序

要启动并运行应用程序（并真正看看它是否正常工作），请运行：

npm start

现在打开浏览器，访问为你记录的地址，你就可以开始了！

运行测试

package.json中的测试脚本会对解决方案运行测试（这些测试应该都能通过）。要对你自己的工作运行测试，只需打开问题页面并点击"Test"标签。

启动你的编辑器

应用程序有几个按钮，可以将你的编辑器启动到正确的文件。这个工作坊中有很多文件，所以你会经常使用这个功能来在正确的时间到达正确的位置。

这应该能正常工作™️（它会查看你当前运行的进程并根据此选择编辑器）。如果它没有正确猜测，请在项目根目录创建一个.env文件，并添加一个名为EPICSHOP_EDITOR的环境变量，其值设置为你的编辑器可执行文件的路径。例如，如果你在Windows上使用VS Code，你应该在.env文件中添加以下内容：

EPICSHOP_EDITOR='"C:\Program Files\Microsoft VS Code\bin\code.cmd"'

确保如果路径包含空格，要用引号将路径括起来，如上所示（注意使用单引号包裹双引号！）。

EPICSHOP_EDITOR的值应该是你在终端中运行以从命令行打开编辑器的命令。这意味着，第一个应该是编辑器可执行文件的路径（或者如果你在PATH中有命令，则为该命令）。因此，你可能可以简单地这样做：

EPICSHOP_EDITOR=code

练习

exercises/*.*/README.md：练习背景信息
exercises/*.*/*.problem.*/README.*.md：问题说明
exercises/*.*/*.problem.*/*.tsx：带有表情符号辅助的练习 👈 你大部分时间都在这里。
exercises/*.*/*.solution.*/*.tsx：解决方案版本

练习的目的不是让你自己完成所有的材料。它的目的是让你的大脑思考在_我_讲解材料时要问我的正确问题。

有用的表情符号 🐨 🦺 💰 📝 🦉 📜 💣 💪 🏁 👨‍💼 🚨 🧝‍♀️

每个练习都有注释来帮助你完成练习。这些有趣的表情符号字符在这里帮助你。

考拉Kody 🐨 会告诉你何时有具体的事情要做
救生衣Lily 🦺 会帮助你处理练习中与TypeScript相关的部分
钱袋Marty 💰 会在过程中给你具体的提示（有时还有代码）
记事本Nancy 📝 会鼓励你记下你正在学习的内容
猫头鹰Olivia 🦉 会给你有用的小知识/最佳实践注意事项
文档Dominic 📜 会给你有用的文档链接
炸弹Barry 💣 会在你需要炸毁（删除代码）的地方出现
肌肉Matthew 💪 会表示你正在做练习
方格旗Chuck 🏁 会表示你正在进行最后的工作
产品经理Peter 👨‍💼 帮助我们了解用户想要什么
警报Alfred 🚨 偶尔会在测试失败时出现，解释测试失败的可能原因
同事Kellie 🧝‍♀️ 你的同事，有时会在你的练习之前完成工作

工作坊反馈

每个练习都有一个详细说明和反馈链接。请在练习和指导之后填写。

在工作坊结束时，请前往此URL提供总体反馈。谢谢！https://kcd.im/rmx-workshop-ws-feedback