Files
Shaun Hamilton c2a11ad00d feat: add 'back/front end' in curriculum (#42596)
* chore: rename APIs and Microservices to include "Backend" (#42515)

* fix typo

* fix typo

* undo change

* Corrected grammar mistake

Corrected a grammar mistake by removing a comma.

* change APIs and Microservices cert title

* update title

* Change APIs and Microservices certi title

* Update translations.json

* update title

* feat(curriculum): rename apis and microservices cert

* rename folder structure

* rename certificate

* rename learn Markdown

* apis-and-microservices -> back-end-development-and-apis

* update backend meta

* update i18n langs and cypress test

Co-authored-by: Shaun Hamilton <shauhami020@gmail.com>

* fix: add development to front-end libraries (#42512)

* fix: added-the-word-Development-to-front-end-libraries

* fix/added-the-word-Development-to-front-end-libraries

* fix/added-word-development-to-front-end-libraries-in-other-related-files

* fix/added-the-word-Development-to-front-end-and-all-related-files

* fix/removed-typos-from-last-commit-in-index.md

* fix/reverted-changes-that-i-made-to-dependecies

* fix/removed xvfg

* fix/reverted changes that i made to package.json

* remove unwanted changes

* front-end-development-libraries changes

* rename backend certSlug and README

* update i18n folder names and keys

* test: add legacy path redirect tests

This uses serve.json from the client-config repo, since we currently use
that in production

* fix: create public dir before moving serve.json

* fix: add missing script

* refactor: collect redirect tests

* test: convert to cy.location for stricter tests

* rename certificate folder to 00-certificates

* change crowdin config to recognise new certificates location

* allow translations to be used

Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com>

* add forwards slashes to path redirects

* fix cypress path tests again

* plese cypress

* fix: test different challenge

Okay so I literally have no idea why this one particular challenge
fails in Cypress Firefox ONLY. Tom and I paired and spun a full build
instance and confirmed in Firefox the page loads and redirects as
expected. Changing to another bootstrap challenge passes Cypress firefox
locally. Absolutely boggled by this.

AAAAAAAAAAAAAAA

* fix: separate the test

Okay apparently the test does not work unless we separate it into
a different `it` statement.

>:( >:( >:( >:(

Co-authored-by: Sujal Gupta <55016909+heysujal@users.noreply.github.com>
Co-authored-by: Noor Fakhry <65724923+NoorFakhry@users.noreply.github.com>
Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com>
2021-08-13 21:57:13 -05:00

2.1 KiB
Raw Permalink Blame History

id, title, challengeType, forumTopicId, dashedName
id title challengeType forumTopicId dashedName
587d7dbc367417b2b2512bb1 創建一個簡單的 JSX 元素 6 301390 create-a-simple-jsx-element

--description--

簡介React 是由 Facebook 創建和維護的開源視圖庫。 它是渲染現代 Web 應用程序用戶界面UI的好工具。

React 使用名爲 JSX 的 JavaScript 語法擴展,可以直接在 JavaScript 中編寫 HTML。 這有幾個好處。 可以在 HTML 中使用 JavaScript 的完整程序功能,並有助於保持代碼的可讀性。 在大多數情況下JSX 類似於已經學過的 HTML但是在這些挑戰中將會涉及一些關鍵差異。

例如,因爲 JSX 是 JavaScript 的語法擴展,所以實際上可以直接在 JSX 中編寫 JavaScript。 要做到這一點,只需在花括號中包含希望被視爲 JavaScript 的代碼:{ 'this is treated as JavaScript code' }(這被視爲 JavaScript 代碼)。 請牢記這個寫法,將會在接下來的挑戰中使用。

但是,由於瀏覽器不能解析 JSX因此必須將 JSX 代碼編譯爲 JavaScript。 在這個過程中,轉換器 Babel 是一個很受歡迎的工具。 後續挑戰已經在後臺引入了 Babel可以直接寫 JSX 代碼。 如果代碼不符合 JSX 語法,那麼挑戰中的第一個測試就不會通過。

值得注意的是,這些挑戰在底層調用 ReactDOM.render(JSX, document.getElementById('root'))。 這個函數調用將 JSX 置於 React 自己的輕量級 DOM 中。 然後React 使用自己的 DOM 快照來實現增量更新。

--instructions--

當前代碼使用 JSX 將 div 元素賦值給常量 JSX。 將 div 替換爲 h1 元素,並在其中添加文本 Hello JSX!

--hints--

常量 JSX 應該返回一個 h1 元素。

assert(JSX.type === 'h1');

h1 標籤應該包含文本 Hello JSX!

assert(Enzyme.shallow(JSX).contains('Hello JSX!'));

--seed--

--after-user-code--

ReactDOM.render(JSX, document.getElementById('root'))

--seed-contents--

const JSX = <div></div>;

--solutions--

const JSX = <h1>Hello JSX!</h1>;