一、部署 LWC Recipes 应用
本单元设置并部署 LWC Recipes 示例应用。
学完本项目，你将能够：部署 Lightning Web Components Recipes 示例应用、学习三个 recipe。
介绍 Lightning Web Components Recipes
Lightning Web Components 利用 Web 标准加速 Salesforce 平台开发。为帮助开发者感受 LWC 的能力，我们提供 LWC Recipes 应用——它包含几十个小组件，每个都演示如何完成特定任务：想知道如何把组件绑定到服务端 Apex 控制器？有对应的 recipe；想知道如何创建新记录表单？也有对应的 recipe。
上图是 LWC Recipes 的 Hello 标签概览。这个 Quick Start 项目从 Trailhead Sample Gallery 安装示例应用，其中的示例代码可用来学习 LWC，并作为开发自己组件的起步。开始前需先完成 Quick Start: Lightning Web Components（设置 Salesforce DX 开发环境）。
新建 Trailhead Playground
为本项目创建一个全新的 Trailhead Playground：点击 Launch 旁的下拉箭头，选择 Create a Trailhead Playground，通常需 3-4 分钟。为什么必须是新的？因为用现有 org 或 playground 可能在完成挑战时遇到问题。这个 playground 就是你要部署 LWC Recipes 应用的地方。
获取 Playground 用户名与密码
部署需要你的 playground 登录凭据。用 Playground Starter（或 Get Your Login Credentials 标签）记下用户名，点击 Reset My Password 触发邮件，点击链接设置新密码。保存好这些凭据——授权 org 与部署应用时会用到。
获取 Git 命令行
要克隆示例应用仓库，需要 Git。从 git-scm.com 安装 Git、接受默认设置，然后在 Terminal（macOS）或 Command Prompt（Windows）输入 git 确认安装——输出一串 git 命令即表示就绪。之后按应用 readme 的说明克隆并部署。
部署应用
按项目 readme 的说明，从 Visual Studio Code 克隆仓库并推送到 Trailhead Playground，部署 LWC Recipes 示例应用。部署成功后，LWC Recipes 应用就绪，下一步即可在其中探索。
二、认识示例应用
本单元探索 LWC Recipes 应用，以及三个最有用的 recipe。
使用 LWC Recipes
从 App Launcher 选择 LWC Recipes 打开应用（若不可见点击 View All）。应用按主题分标签页组织：从基础框架功能（如 Hello World 示例）到与数据交互（Apex 与 Data Services）的 recipe。
有两种方式访问这些 recipe：在之前克隆的仓库中查看源码，或在应用里浏览每个标签页——每个 recipe 卡片底部都有直接链到 GitHub 源码的链接。接下来我们会重点介绍几个最喜欢的 recipe，不讲代码逐行，而是讲它们做什么、你如何扩展或修改它们。
用 LWC 与 Lightning Data Service 创建新记录
快速高效地把数据录入 Salesforce org 很重要，这也给了开发者一个绝佳机会——通过移除或重排字段来定制数据创建表单。这个 recipe 展示如何无需服务端代码创建记录：导航到 Data Service 标签，打开 LdsCreateRecord 组件，在 Name 字段输入你的名字并点击 Create Account。
该组件使用 Lightning Data Service。查看源码：点击组件底部的 View Source 链接，打开 ldsCreateRecord.js，注意 createRecord 导入语句——它引入了 Lightning Data Service 的 createRecord 功能。
从子组件向父组件（或祖组件）传递信息
迟早你需要把数据从子组件传给父组件（或祖组件）。在 LWC 中，子到父的通信通过事件实现。在 EventWithData recipe 里，父组件包含一个 ContactListItem（子）组件列表，每个子组件显示头像与联系人姓名链接，点击姓名后联系人详情显示在列表右侧。
为实现这一点，子组件：点击姓名时触发 click 事件（调用 handleClick），实例化名为 select 的自定义事件，把联系人 id 放入事件的 detail 属性，再派发事件。父组件：handleSelect(event) 方法接收事件细节并显示联系人详情（方法命名需遵循 handle<customEventName> 约定）。
用组件组合组件
组合（Composition）是 LWC 的核心——组件天生是更大整体的一部分，你可以把组件组合起来构建其他组件，还能使用 Salesforce 提供的 base 组件添加卡片、按钮等 UI 元素。CompositionBasics recipe 包含两个子组件：一个自定义的联系人卡片组件，以及一个把 recipe 链接到其源码的自定义view source组件。
这展示了如何复用与组合组件来构建用户界面。下面是 CompositionBasics 组件的层次图：
因为 LWC 组件基于标准 HTML、CSS 与 JavaScript，可能性无穷无尽。
文章来源：Trailhead - Quick Start: Explore the LWC Recipes Sample App