course content

Course Content

Introduction to React

Writing more Complex Elements using JSXWriting 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:

html

index.html

css

index.css

js

index.js

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);
down-icon

Section 3.

Chapter 2