React vs traditional JavaScript - Hands-On Comparison

React vs traditional JavaScript

📖 Scenario: You are building a simple web page that shows a list of favorite fruits. You want to compare how to do this using traditional JavaScript and React.

🎯 Goal: Build a React component that displays a list of fruits and compare it with a traditional JavaScript approach that updates the DOM manually.

📋 What You'll Learn

Create an array of fruits

Create a variable to hold the container element or React state

Use a loop or map to generate the list items

Render the list in the container using React or DOM methods

💡 Why This Matters

🌍 Real World

Web developers often need to display lists of data on pages. Understanding both traditional DOM methods and React helps choose the best tool for the job.

💼 Career

Knowing how React differs from traditional JavaScript DOM manipulation is key for frontend developer roles, improving code maintainability and user experience.

1

Create the fruits array

Create an array called fruits with these exact values: 'Apple', 'Banana', 'Cherry', 'Date', 'Elderberry'.

React

# Create the fruits array
# Your code here

Need a hint?

Use const fruits = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry'];

2

Select the container element

Create a constant called container that selects the HTML element with the id 'fruit-list' using document.getElementById.

React

const fruits = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry'];
// Select the container element with id 'fruit-list'
// Your code here

Need a hint?

Use const container = document.getElementById('fruit-list'); to get the container element.

3

Create list items using a loop

Use a for loop with the variable fruit to go through fruits. Inside the loop, append a string with a list item <li>{fruit}</li> to a variable called listItems which starts as an empty string.

React

const fruits = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry'];
const container = document.getElementById('fruit-list');
// Create listItems string by looping over fruits
// Your code here

Need a hint?

Start with let listItems = ''; then use for (const fruit of fruits) { listItems += `

${fruit}

`; }

4

Add the list items to the container

Set the innerHTML of container to a string with <ul> wrapping the listItems variable.

React

const fruits = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry'];
const container = document.getElementById('fruit-list');
let listItems = '';
for (const fruit of fruits) {
    listItems += `${fruit}`;
}
// Add the list items inside a  to the container
// Your code here

Need a hint?

Use container.innerHTML = `

${listItems}

`; to add the list to the page.