Getting familiar with JSX

If you recall from the JSX chapters, we can store HTML elements inside JavaScript variables. Let's try storing a simple heading element inside a variable with an embedded name value:

After adding these two lines in the script, we will be able to render the element heading by passing it into the render method of the root instead of the older value:root.render(element);

If you look in the output console, you should be able to see rendered results.

index.html

index.css

index.js

This task isn't obligatory to complete the course!

Task

On Line 26, create an unordered list having three list items Item 1, Item 2, and Item 3. Store it in a variable called myList. Render it using the root's render function.

Note
You can use the codesandbox window below. Sliding from the right edge will reveal the result (rendered page).

Hint

You can use <ul> tag to create an unordered list.

Solution

Everything was clear?

Section 3. Chapter 1

Course Content

Introduction to React

1. Getting Started: ES6

Why React?Node.js and npm ES6 Variables ES6 Arrow Functions ES6 Map Method ES6 Destructuring ES6 Spread Operator ES6 Ternary Operator

2. Getting Started: JSX

JSX Introduction JSX Variables & Nested Elements JSX Embedding Expressions JSX Specifying Attributes Getting Started with React

3. React in Practice

Getting familiar with JSX Writing more Complex Elements using JSX Creating a React-Based Project Structure of a React Project

4. React Components

Introduction to Components Functional Components Creating React Components Importing Components

5. Controlling Data & Content

Passing Data into Components Conditional Rendering Loop Based Rendering Keys in Lists Event Handling Creating a TODO Application

6. Hooks

Introduction to Hooks Using the State Hook The Effect Hook Rules of Using Hooks Creating Custom Hooks Fixing the Todo Application

7. React Router

Introduction to React Router Route-Based Rendering Creating Navigation Bars Using Params