full-stack-foundations

<div> <h1 align="center"><a href="https://www.epicweb.dev/workshops/full-stack-foundations">🔭 全栈基础</a></h1> <strong> 学习构建Web应用程序的基础工具和技能 </strong> <p> 在本工作坊中，我们将通过一个真实世界的应用程序中的练习，帮助你学习构建Web应用程序的一些关键概念。 </p> </div> <div align="center"> <a alt="Epic Web标志及'已部署版本'字样" href="https://foundations.epicweb.dev/" > <img width="300px" src="https://github-production-user-asset-6210df.s3.amazonaws.com/1500684/254000390-447a3559-e7b9-4918-947a-1b326d239771.png" /> </a> </div> <hr /> <!-- prettier-ignore-start -->

<!-- prettier-ignore-end -->

先决条件

• 一些JavaScript经验
• 一些TypeScript经验
• 一些React经验
• 一些Node.js经验

系统要求

• 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

<!-- prettier-ignore-start --> <!-- prettier-ignore-end -->