Rendering elements in React - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of rendering elements in React?

Rendering elements means showing React components or HTML on the screen so users can see and interact with them.

beginner

How do you render a simple element in React?

You use ReactDOM.createRoot to select a place in the HTML, then call root.render() with a React element like

Hello

.

beginner

What does ReactDOM.createRoot(document.getElementById('root')).render(<App />) do?

It finds the HTML element with id 'root' and shows the <App /> component inside it on the page.

intermediate

Can React render multiple elements at once?

React renders one root element at a time, but that element can contain many nested elements inside it.

intermediate

Why should React elements be immutable?

React elements are like snapshots of the UI. They don’t change after creation, which helps React update the screen efficiently.

Which method is used to render a React element into the DOM?

A root.render()

B React.renderElement()

C document.render()

D ReactDOM.show()

ReactDOM.createRoot(...).render() is the correct way to render React elements in React 18+.

What does React render on the screen?

A HTML elements and components

B Only plain text

C JavaScript functions

D CSS styles

React renders HTML elements and components that describe the UI.

Where do you usually render your React app in the HTML file?

A Inside the <head> tag

B Inside a div with id 'root'

C Inside a <footer> tag

D Directly in the body without a container

The common practice is to render React inside a div with id 'root' in the HTML body.

Can you render multiple root elements directly in React?

A Only if you use class components

B Yes, React renders as many roots as you want

C No, React renders one root element at a time

D Only if you use ReactDOM.renderMultiple()

React expects a single root element to render; nested elements can be inside it.

Why are React elements considered immutable?

A Because they change automatically

B Because they are functions

C Because they are stored in a database

D Because they represent a fixed UI snapshot

React elements don’t change after creation; this helps React update the UI efficiently.

Explain how React renders elements to the screen starting from the HTML file.

Think about how React connects JavaScript code to the HTML page.

Describe why React elements are immutable and how this helps React update the UI.

Consider how React knows what parts of the screen to update.

Practice

1. What does rendering elements in React mean?

easy

A. Managing database connections

B. Writing CSS styles for components

C. Creating backend APIs

D. Showing content on the screen using React components

Solution

1. Step 1: Understand rendering in React

   Rendering means React creates and shows elements on the screen for users to see.

2. Step 2: Identify the correct description

   Only showing content on the screen matches rendering elements, not styling or backend tasks.

3. Final Answer:

   Showing content on the screen using React components -> Option D

4. Quick Check:

   Rendering = Showing content [OK]

Hint: Rendering means displaying content on screen [OK]

Common Mistakes:

• Confusing rendering with styling
• Thinking rendering means backend work
• Mixing rendering with database tasks

2. Which of the following is the correct way to render a simple React element?

easy

A. ReactDOM.render(<h1>Hello</h1>, document.getElementById('root'));

B. React.render(<h1>Hello</h1>, 'root');

C. ReactDOM.render('Hello', document.getElementById('root'));

D. ReactDOM.render(<h1>Hello</h1>);

Solution

1. Step 1: Recall ReactDOM.render syntax

   The correct syntax requires ReactDOM.render(element, container), where container is a DOM node.

2. Step 2: Check each option

   ReactDOM.render(<h1>Hello</h1>, document.getElementById('root')); uses ReactDOM.render with JSX element and document.getElementById('root'), which is correct.

3. Final Answer:

   ReactDOM.render(<h1>Hello</h1>, document.getElementById('root')); -> Option A

4. Quick Check:

   ReactDOM.render(element, container) = ReactDOM.render(<h1>Hello</h1>, document.getElementById('root')); [OK]

Hint: ReactDOM.render needs element and container node [OK]

Common Mistakes:

• Using React.render instead of ReactDOM.render
• Passing string instead of JSX element
• Omitting container DOM node

3. What will be displayed on the screen after running this React code?

const element = <h2>Welcome to React!</h2>;
ReactDOM.render(element, document.getElementById('root'));

medium

A. A plain text 'element' string

B. An <h2> heading with text 'Welcome to React!'

C. Nothing, because of a syntax error

D. An empty page with no content

Solution

1. Step 1: Understand JSX element creation

   The variable 'element' holds an <h2> JSX element with text 'Welcome to React!'.

2. Step 2: ReactDOM.render displays the element

   ReactDOM.render inserts this <h2> element inside the DOM node with id 'root', showing the heading on screen.

3. Final Answer:

   An <h2> heading with text 'Welcome to React!' -> Option B

4. Quick Check:

   JSX element renders as HTML heading [OK]

Hint: JSX inside render shows as HTML element [OK]

Common Mistakes:

• Thinking JSX is a string
• Expecting no output due to misunderstanding JSX
• Confusing variable name with output

4. Identify the error in this React rendering code:

const element = <h1>Hello World</h1>
ReactDOM.render(element, document.getElementById('root'));

medium

A. No error, code runs correctly

B. document.getElementById('root') is undefined

C. Missing semicolon after JSX element declaration

D. JSX element must be wrapped in parentheses

Solution

1. Step 1: Check JSX element syntax

   The JSX element is correctly assigned to 'element' variable; semicolon is optional in JavaScript.

2. Step 2: Verify ReactDOM.render usage

   ReactDOM.render is called with valid arguments; assuming 'root' exists in HTML, no error occurs.

3. Final Answer:

   No error, code runs correctly -> Option A

4. Quick Check:

   Valid JSX and render call = No error, code runs correctly [OK]

Hint: JSX semicolon optional; check DOM node exists [OK]

Common Mistakes:

• Thinking semicolon is mandatory after JSX
• Assuming JSX needs parentheses always
• Not verifying if 'root' element exists in HTML

5. You want to render a list of names as <li> items inside a <ul>. Which React code correctly renders this list?

const names = ['Anna', 'Bob', 'Cara'];

// Choose the correct rendering code

hard

A. ReactDOM.render(<ul><li>names</li></ul>, document.getElementById('root'));

B. const listItems = names.forEach(name => <li>{name}</li>);
ReactDOM.render(<ul>{listItems}</ul>, document.getElementById('root'));

C. const listItems = names.map(name => <li key={name}>{name}</li>);
ReactDOM.render(<ul>{listItems}</ul>, document.getElementById('root'));

D. const listItems = names.map(name => <li>{name}</li>);
ReactDOM.render(<ul>listItems</ul>, document.getElementById('root'));

Solution

1. Step 1: Understand list rendering with keys

   React requires keys on list items for efficient updates; map returns a new array of elements.

2. Step 2: Analyze each option

   const listItems = names.map(name => <li key={name}>{name}</li>); ReactDOM.render(<ul>{listItems}</ul>, document.getElementById('root')); uses map with key attribute and renders list correctly. const listItems = names.forEach(name => <li>{name}</li>); ReactDOM.render(<ul>{listItems}</ul>, document.getElementById('root')); uses forEach which returns undefined. ReactDOM.render(<ul><li>names</li></ul>, document.getElementById('root')); renders literal 'names' text. const listItems = names.map(name => <li>{name}</li>); ReactDOM.render(<ul>listItems</ul>, document.getElementById('root')); misses {} around listItems, rendering literal 'listItems' text.

3. Final Answer:

   const listItems = names.map(name => <li key={name}>{name}</li>); ReactDOM.render(<ul>{listItems}</ul>, document.getElementById('root')); -> Option C

4. Quick Check:

   Use map with keys for lists [OK]

Hint: Use map with keys to render lists in React [OK]

Common Mistakes:

• Using forEach instead of map for rendering
• Omitting key attribute on list items
• Rendering array as plain text