* 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>
2.3 KiB
2.3 KiB
id, title, challengeType, forumTopicId, dashedName
id | title | challengeType | forumTopicId | dashedName |
---|---|---|---|---|
5a24bbe0dba28a8d3cbd4c5d | 創建一個複雜的 JSX 元素 | 6 | 301382 | create-a-complex-jsx-element |
--description--
上一個挑戰是 JSX 的一個簡單示例,但 JSX 也可以表示更復雜的 HTML。
關於嵌套的 JSX,需要知道的一件重要的事情,那就是它必須返回單個元素。
這個父元素將包裹所有其他級別的嵌套元素。
例如,幾個作爲兄弟元素編寫的 JSX 元素而沒有父元素包裹將不會被轉換。
這裏是一個示例:
有效的 JSX:
<div>
<p>Paragraph One</p>
<p>Paragraph Two</p>
<p>Paragraph Three</p>
</div>
無效的 JSX:
<p>Paragraph One</p>
<p>Paragraph Two</p>
<p>Paragraph Three</p>
--instructions--
定義一個新的常量 JSX
,渲染一個 div
,其中依次包含以下元素:
一個 h1
,一個 p
,一個包含三個 li
項的無序列表。 可以在每個元素中包含任意文本。
注意: 當像這樣渲染多個元素時,可以把它們都用圓括號括起來,但是這並不是必須的。 另外,此挑戰使用 div
標籤把所有子元素包裹在裏面。 如果刪除 div
,JSX 將不會編譯這些元素。 請記住這一點,因爲在 React 組件中返回 JSX 元素時也適用。
--hints--
常量 JSX
應該返回一個 div
元素。
assert(JSX.type === 'div');
div
應該包含一個 h1
標籤作爲第一個元素。
assert(JSX.props.children[0].type === 'h1');
div
應該包含一個p
標籤作爲第二個元素。
assert(JSX.props.children[1].type === 'p');
div
應該包含一個 ul
標籤作爲第三個元素。
assert(JSX.props.children[2].type === 'ul');
ul
應該包含三個 li
元素。
assert(
JSX.props.children
.filter((ele) => ele.type === 'ul')[0]
.props.children.filter((ele) => ele.type === 'li').length === 3
);
--seed--
--after-user-code--
ReactDOM.render(JSX, document.getElementById('root'))
--seed-contents--
--solutions--
const JSX = (
<div>
<h1>Hello JSX!</h1>
<p>Some info</p>
<ul>
<li>An item</li>
<li>Another item</li>
<li>A third item</li>
</ul>
</div>);