Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Вивчайте Writing more Complex Elements using JSX | React in Practice
Introduction to React

bookWriting more Complex Elements using JSX

We can combine multiple JSX elements or components into one big element and render it into the root. For example we can create a heading and a paragraph element and embed it into a <div> element:

index.html

index.html

copy

If you look at the above code, we have created the element main using two other elements, heading and paragraph.

We used the expression embedding syntax {} to embed other elements inside the main <div> and rendered it through the root's render method. This can be repeated as many times as wanted to create further complex elements.

question-icon

Complete the code below:

let items = [
    <li>Cats</li>,
    <li>Dogs</li>,
    <li>Birds</li>,
    <li>Lizards</li>
];
let main = <ul>{
}</ul>
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(main);

Все було зрозуміло?

Як ми можемо покращити це?

Дякуємо за ваш відгук!

Секція 3. Розділ 2

Запитати АІ

expand

Запитати АІ

ChatGPT

Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат

Suggested prompts:

Запитайте мені питання про цей предмет

Сумаризуйте цей розділ

Покажіть реальні приклади

Awesome!

Completion rate improved to 2.7

bookWriting more Complex Elements using JSX

Свайпніть щоб показати меню

We can combine multiple JSX elements or components into one big element and render it into the root. For example we can create a heading and a paragraph element and embed it into a <div> element:

index.html

index.html

copy

If you look at the above code, we have created the element main using two other elements, heading and paragraph.

We used the expression embedding syntax {} to embed other elements inside the main <div> and rendered it through the root's render method. This can be repeated as many times as wanted to create further complex elements.

question-icon

Complete the code below:

let items = [
    <li>Cats</li>,
    <li>Dogs</li>,
    <li>Birds</li>,
    <li>Lizards</li>
];
let main = <ul>{
}</ul>
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(main);

Все було зрозуміло?

Як ми можемо покращити це?

Дякуємо за ваш відгук!

Секція 3. Розділ 2
some-alt