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 用於超清潔減速機
