4.2 KiB
4.2 KiB
id | title | challengeType | isRequired | videoUrl | localeTitle |
---|---|---|---|---|---|
587d7dbc367417b2b2512bb1 | Create a Simple JSX Element | 6 | false | Создание простого элемента JSX |
Description
{ 'this is treated as JavaScript code' }
. Помните об этом, поскольку он используется в нескольких будущих задачах. Однако, поскольку JSX недействителен JavaScript, код JSX должен быть скомпилирован в JavaScript. Транспилер Babel - популярный инструмент для этого процесса. Для вашего удобства это уже добавлено за кулисами для этих задач. Если вам удастся написать синтаксически недействительный JSX, вы увидите, что первый тест в этих задачах терпит неудачу. Стоит отметить, что под капотом возникают вызовы ReactDOM.render(JSX, document.getElementById('root'))
. Этот вызов функции - это то, что помещает ваш JSX в собственное легкое представление DOM DOM. Затем React использует моментальные снимки своей собственной DOM для оптимизации обновления только определенных частей фактического DOM. Instructions
div
постоянному JSX
. Замените div
элементом h1
и добавьте текст Hello JSX!
внутри него. Tests
tests:
- text: Постоянный <code>JSX</code> должен возвращать элемент <code>h1</code> .
testString: 'assert(JSX.type === "h1", "The constant <code>JSX</code> should return an <code>h1</code> element.");'
- text: Тег <code>h1</code> должен содержать текст <code>Hello JSX!</code>
testString: 'assert(Enzyme.shallow(JSX).contains("Hello JSX!"), "The <code>h1</code> tag should include the text <code>Hello JSX!</code>");'
Challenge Seed
const JSX = <div></div>;
After Test
console.info('after the test');
Solution
// solution required