What is React - Quick Revision & Key Takeaways

Recall & Review

beginner

What is React?

React is a JavaScript library used to build user interfaces, especially for web apps. It helps create reusable components that update efficiently when data changes.

beginner

What is a React component?

A React component is a small, reusable piece of code that returns HTML-like elements to show on the screen. Components can be functions or special JavaScript classes.

beginner

Why do we use React?

We use React to build fast and interactive user interfaces. It updates only the parts of the page that change, making apps feel quick and smooth.

beginner

What is JSX in React?

JSX is a syntax that looks like HTML but works inside JavaScript. It lets you write UI code that React can understand and turn into real web page elements.

intermediate

How does React update the UI efficiently?

React uses a virtual copy of the UI called the virtual DOM. It compares changes there first, then updates only the real parts that need to change, saving time and resources.

What is React mainly used for?

A Building user interfaces

B Managing databases

C Styling web pages

D Writing server code

React is a library focused on building user interfaces, not databases or server code.

What does JSX allow you to do in React?

A Write CSS styles directly

B Write HTML-like code inside JavaScript

C Create server endpoints

D Manage databases

JSX lets you write HTML-like syntax inside JavaScript to describe UI elements.

How does React improve performance when updating the UI?

A By using a virtual DOM to update only changed parts

B By disabling user interactions

C By running code on the server only

D By updating the entire page every time

React uses a virtual DOM to find and update only the parts of the UI that changed.

Which of these is a React component?

A A CSS style rule

B A database table

C A reusable piece of UI code

D A server configuration

React components are reusable pieces of code that define parts of the UI.

React is best described as:

A A full web framework

B A CSS framework

C A database system

D A JavaScript library for UI

React is a JavaScript library focused on building user interfaces, not a full framework or database.

Explain what React is and why it is useful for building web apps.

Think about how React helps with building parts of a web page that change often.

Describe how React uses JSX and the virtual DOM to create fast user interfaces.

Focus on how React writes UI code and updates the screen quickly.

Practice

1. What is React mainly used for?

easy

A. Writing server-side scripts

B. Managing databases

C. Building interactive user interfaces

D. Designing logos

Solution

1. Step 1: Understand React's purpose

   React is a tool to build parts of websites or apps that users interact with.

2. Step 2: Identify correct use case

   Among the options, only building interactive user interfaces matches React's main use.

3. Final Answer:

   Building interactive user interfaces -> Option C

4. Quick Check:

   React = interactive UI [OK]

Hint: React is for UI, not backend or design [OK]

Common Mistakes:

• Confusing React with backend frameworks
• Thinking React manages databases
• Assuming React is for graphic design

2. Which of the following is the correct way to define a React component?

easy

A. component MyComponent { return Hello; }

B. function MyComponent() { return Hello; }

C. def MyComponent(): return Hello

D. class MyComponent = () => Hello;

Solution

1. Step 1: Recall React component syntax

   React components can be functions returning JSX like function MyComponent() { return <div>Hello</div>; }.

2. Step 2: Check each option

   function MyComponent() { return
   Hello; } matches the correct function component syntax. Others use invalid or non-JS syntax.

3. Final Answer:

   function MyComponent() { return <div>Hello</div>; } -> Option B

4. Quick Check:

   Function component syntax = function MyComponent() { return
   Hello
   ; } [OK]

Hint: React components are functions returning JSX [OK]

Common Mistakes:

• Using Python or other language syntax
• Trying to declare components with 'component' keyword
• Incorrect arrow function syntax for components

3. What will this React component display?

function Greeting() {
  const name = 'Anna';
  return <h1>Hello, {name}!</h1>;
}

medium

A. Hello, Anna!

B. Hello, {name}!

C. Error: name is undefined

D. Hello, !

Solution

1. Step 1: Understand JSX expression usage

   The component uses curly braces {name} to insert the variable value 'Anna' inside the <h1> tag.

2. Step 2: Predict rendered output

   The output will be <h1>Hello, Anna!</h1> as the variable is correctly used.

3. Final Answer:

   <h1>Hello, Anna!</h1> -> Option A

4. Quick Check:

   JSX {variable} inserts value =

   Hello, Anna!

   [OK]

Hint: JSX uses { } to show variable values [OK]

Common Mistakes:

• Thinking JSX shows variable names literally
• Assuming variable is undefined
• Forgetting to use curly braces for variables

4. Find the error in this React component:

function Welcome() {
  return (
    <div>
      <h1>Welcome</h2>
    </div>
  );
}

medium

A. Mismatched closing tag: </h2> instead of </h1>

B. Missing return statement

C. Function name should start with lowercase

D. JSX must be wrapped in a single tag

Solution

1. Step 1: Check JSX tags for correctness

   The opening tag is <h1> but the closing tag is </h2>, which is invalid in JSX.

2. Step 2: Confirm other parts are correct

   The return statement exists, function name is valid, and JSX is wrapped in a <div> tag.

3. Final Answer:

   Mismatched closing tag: </h2> instead of </h1> -> Option A

4. Quick Check:

   JSX tags must match exactly = Mismatched closing tag: </h2> instead of </h1> [OK]

Hint: Check opening and closing JSX tags match [OK]

Common Mistakes:

• Ignoring tag mismatch errors
• Thinking function names must be lowercase
• Missing that JSX needs one root element

5. You want to update a React component when data changes. Which React feature helps update the screen quickly?

hard

A. HTML forms

B. JSX syntax

C. CSS styling

D. Virtual DOM

Solution

1. Step 1: Understand React's update mechanism

   React uses a Virtual DOM to compare changes and update only what is needed on the screen.

2. Step 2: Identify the correct feature

   JSX is for describing UI, CSS styles appearance, HTML forms handle input, but Virtual DOM manages efficient updates.

3. Final Answer:

   Virtual DOM -> Option D

4. Quick Check:

   Fast updates = Virtual DOM [OK]

Hint: Virtual DOM speeds up UI updates [OK]

Common Mistakes:

• Confusing JSX with update mechanism
• Thinking CSS controls updates
• Assuming HTML forms handle UI refresh