datacamp light
v2.5.0
路线图 |文档
将脚本添加到您的 HTML 页面（ examples/standalone-example.html中有一个示例）：
< script type =" text/javascript " src =" //cdn.datacamp.com/dcl-react.js.gz " > </ script >就是这样！如果您的应用程序在初始页面加载后添加 DataCamp Light 练习（例如，在 React 应用程序中），请调用以下函数来初始化这些新练习：
initAddedDCLightExercises ( ) ;您还可以通过将练习和脚本标记包含为代码片段，在 stackoverflow.com 答案中使用 JavaScript 库。
添加 JavaScript 库后，您可以开始按以下格式编写 HTML 块。这些将动态转换为练习。
< div data-datacamp-exercise data-lang =" r " >
< code data-type =" pre-exercise-code " >
# This will get executed each time the exercise gets initialized
b = 6
</ code >
< code data-type =" sample-code " >
# Create a variable a, equal to 5
# Print out a
</ code >
< code data-type =" solution " >
# Create a variable a, equal to 5
a < - 5
# Print out a
print(a)
</ code >
< code data-type =" sct " >
test_object("a")
test_function("print")
success_msg("Great job!")
</ code >
< div data-type =" hint " > Use the assignment operator ( < code > < - </ code > ) to create the variable < code > a </ code > . </ div >
</ div >正如我们在示例中看到的，整个练习包含在一个<div>元素中，该元素具有两个数据属性data-datacamp-exercise和data-lang 。第一个属性data-datacamp-exercise指示<div>应被视为 DataCamp Light 练习，而另一个属性data-lang指定应使用哪种编程语言。 data-lang可接受的值为r和python 。还有一个可选属性data-height可以设置 div 的高度（以px为单位）（最小高度为300px ）或根据示例代码行数设置大小： data-height="auto" 。
预练习代码在 R/Python 会话初始化时执行。您可以使用它为学生预加载数据集、包等。指定这一点的方法是定义一个包含初始化代码的<code>标记，并将data-type属性设置为pre-exercise-code ，如下所示：
< code data-type =" pre-exercise-code " >
# This will get executed each time the exercise gets initialized
b = 6
</ code >在我们的示例中，我们用值6初始化（相当无用的）变量b 。
要设置最初出现在代码编辑器中的示例代码，应定义包含示例代码<code>标记，并将data-type属性设置为sample-code如下所示：
< code data-type =" sample-code " >
# Create a variable a, equal to 5
# Print out a
</ code >我们的示例仅显示了一些注释和一些换行符。 JavaScript 库还负责去除前导缩进，因此无需担心这一点。
要设置解决方案代码，应定义包含解决方案代码的<code>标记，并将data-type属性设置为solution如下所示：
< code data-type =" solution " >
# Create a variable a, equal to 5
a < - 5
# Print out a
print(a)
</ code >提交正确性测试用于检查用户提交的代码是否正确解决了练习。有关这方面的详细信息，您可以查看 R 文档和 Python 文档。指定 SCT 的方法是定义一个包含 SCT 代码的<code>标记，并将data-type属性设置为sct如下所示：
< code data-type =" sct " >
test_object("a")
test_function("print")
success_msg("Great job!")
</ code >在我们的示例中，第一行检查用户是否声明了变量a及其值是否与解决方案代码的值匹配。第二行检查是否调用print函数，最后指定一条成功消息，当练习成功完成时将向用户显示该消息。
要指定提示，应定义一个包含提示的标签，并将data-type属性设置为hint如下所示：
< div data-type =" hint " >
Use the assignment operator ( < code > < - </ code > ) to create the variable < code > a </ code > .
</ div >提示可能包含例如<code>标签，就像我们示例中的情况一样。
data-show-run-button属性以始终显示“运行”按钮，以便访问者可以尝试代码而无需提交代码。data-no-lazy-loading属性，以便在页面加载后立即加载所有练习，而不是等待用户向下滚动到它们。这可能会导致性能问题，但可以修复基于 iFrame 的页面的兼容性问题。[ data-datacamp-exercise ] {
visibility : hidden;
}带有data-datacamp-exercise属性的div将被转换为 DataCamp 学习界面的最小版本（要了解真正的交易，您可以访问 www.datacamp.com）。它包含一个会话管理器，可连接到 DataCamp 的服务器以提供 R 或 Python 会话，就像您在本地系统上工作一样。 R 和 Python 计算环境具有最流行的软件包：
如果您想使用不可用的软件包，请创建一个问题，我们可以安装它（不可能在运行时安装软件包）。
如果您愿意贡献，那就太棒了！您可以首先阅读自述文件的这一部分，以了解该项目的技术细节。在大多数情况下，它的结构是一个标准的 React/Redux 项目（用 TypeScript 编写），因此如果您不熟悉其中之一，您可能需要阅读一下。
要开发 DataCamp Light，您需要在本地运行该应用程序。该存储库包含一些用于测试它的示例练习。
首先克隆此存储库、安装依赖项并启动开发服务器。当您进行更改时，页面将使用您的新代码重新加载。
git clone https://github.com/datacamp/datacamp-light.git
cd datacamp-light
git checkout beta
npm i
npm start
vendor/文件夹包含一些目前未公开托管的内部 DataCamp 包的精简代码。
在开始实施任何测试之前，请阅读这两个文档：
测试文件命名为{moduleName}.spec.js 。
npm test 由于减速器是一个纯函数，因此测试它并不复杂。您必须使用种子来创建模拟状态。然后，您可以将其作为参数与要测试的操作一起传递给减速器。
使用快照测试来确保组件不会意外更改（有关示例，请参阅src/components/Footer.spec.ts ）。可以对内部具有逻辑的组件进行其他测试。
测试中间件会更加复杂，因为它们有副作用。您可以使用rxjs-marbles框架测试 Epics，因为它们会转换 Observable 流。有关示例，请参阅src/autocomplete.spec.ts 。
我们使用 Prettier 来保持格式一致。这将在预提交挂钩上格式化您的文件（JS、TS、CSS、JSON）。如果需要，您还可以调用prettier --write filename手动更新文件。
还有一些编辑器插件，例如prettier-vscode ，可以在保存时自动格式化。
我建议在编辑器中安装这些检查器的插件。 TSLint 和 Stylelint 也在开发命令中运行，因此您也会看到它们的警告弹出。
我们一直在使用这个提交消息约定，因为它有表情符号，而表情符号是？。
开发主要在development分支上完成。
提交到development分支会触发 DataCamp 开发环境上的构建并在此处生成构建：
https://cdn.datacamp.com/dcl-react-dev.js.gz
接下来，提交到beta分支，将版本推送到暂存环境：
https://cdn.datacamp.com/dcl-react-staging.js.gz
最后，当我们创建版本时，更新会被推送到生产环境。这应该是 DataCamp Light 的稳定版本：
https://cdn.datacamp.com/dcl-react.js.gz
提交到此分支会触发部署在 DataCamp 开发环境上的构建。对主分支beta提交已构建并部署到登台。创建版本后，该版本将部署到生产环境。
当然是 TypeScript。如果编辑器没有附带插件，请确保为您的编辑器安装了合适的插件。
redux-observable 用于可观察中间件
typescript-fsa 用于简单、类型安全的动作创建者
typescript-fsa-reducers 用于超清洁减速机
