What is a component in React - Visual Explanation

Concept Flow - What is a component

Start React App

↓

Define Component

↓

React Calls Component Function

↓

Component Returns JSX

↓

React Converts JSX to DOM Elements

↓

DOM Elements Rendered in Browser

↓

User Sees UI from Component

This flow shows how React uses a component function to create UI elements that appear in the browser.

Execution Sample

React

function Greeting() {
  return <h1>Hello, friend!</h1>;
}

// Usage in JSX
<Greeting />

A simple React component called Greeting returns a heading that says 'Hello, friend!'.

Execution Table

Step	Action	Evaluation	Result
1	React calls Greeting function	Greeting() runs	Returns JSX <h1>Hello, friend!</h1>
2	React converts JSX	JSX transformed	Creates DOM element <h1>
3	React inserts DOM element	DOM updated	Browser shows heading with text 'Hello, friend!'
4	User views page	UI visible	User sees 'Hello, friend!' on screen

💡 Component function returns JSX, React renders it, and UI appears; no further steps.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	Final
Greeting	function defined	called	returns JSX	JSX converted	DOM rendered

Key Moments - 2 Insights

Why does the Greeting function return JSX instead of HTML?

JSX looks like HTML but is JavaScript syntax that React understands to create UI elements, as shown in execution_table step 1 and 2.

When does the user actually see the text 'Hello, friend!'?

After React converts JSX to DOM and inserts it into the page (execution_table steps 3 and 4), the user sees the text.

Visual Quiz - 3 Questions

Look at the execution table, what does the Greeting function return at step 1?

A JSX <h1>Hello, friend!</h1>

B Plain text 'Hello, friend!'

C DOM element <h1>

D Nothing

💡 Hint

Check the 'Result' column in step 1 of the execution_table.

At which step does React convert JSX into a DOM element?

A Step 1

B Step 2

C Step 3

D Step 4

💡 Hint

Look at the 'Action' and 'Evaluation' columns in execution_table step 2.

If the Greeting function returned null instead of JSX, what would happen?

A React would render default text

B React would show an error

C React would render nothing on the page

D React would crash

💡 Hint

Think about what React renders when a component returns no JSX, related to execution_table step 1.

Concept Snapshot

React component is a function that returns JSX.
JSX looks like HTML but is JavaScript.
React calls the component to get JSX.
React converts JSX to DOM elements.
DOM elements show UI in the browser.
Components build the UI piece by piece.

Full Transcript

A React component is a function that returns JSX, which looks like HTML but is actually JavaScript code. When React runs the component function, it gets JSX back. React then converts this JSX into real DOM elements that the browser can display. Finally, the user sees the UI created by these elements. This process happens every time React renders the component. Components help build the user interface in small, reusable pieces.

Practice

1. What is a React component?

easy

A. A reusable piece of UI built with a function or class

B. A special type of variable that stores data

C. A tool to style HTML elements

D. A command to run React apps

Solution

1. Step 1: Understand React components

   A React component is a building block of UI that can be reused multiple times.

2. Step 2: Identify the correct definition

   Only A reusable piece of UI built with a function or class describes a reusable UI piece built with a function or class.

3. Final Answer:

   A reusable piece of UI built with a function or class -> Option A

4. Quick Check:

   Component = reusable UI block [OK]

Hint: Components are reusable UI parts made with functions [OK]

Common Mistakes:

• Confusing components with variables
• Thinking components are styling tools
• Believing components are commands

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

easy

A. const MyComponent = 'Hello';

B. function MyComponent() { return Hello; }

C. var MyComponent = Hello;

D. class MyComponent extends React.Component { }

Solution

1. Step 1: Review functional component syntax

   A functional component is a function returning JSX, like function MyComponent() { return
   Hello; }.

2. Step 2: Check each option

   function MyComponent() { return
   Hello
   ; } matches the correct syntax. var MyComponent =
   Hello
   ; assigns JSX directly to a variable, which is not a component. const MyComponent = 'Hello'; assigns a string, not JSX. class MyComponent extends React.Component { } is a class component, not functional.

3. Final Answer:

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

4. Quick Check:

   Functional component = function returning JSX [OK]

Hint: Functional components are functions returning JSX [OK]

Common Mistakes:

• Assigning JSX directly to variables
• Using strings instead of JSX
• Confusing functional and class components

3. What will this React component render?

function Greeting() {
  return <h1>Hello, world!</h1>;
}

medium

A. Nothing, because the function is not called

B. An error because of missing parentheses

C. <h1>Hello, world!</h1> displayed on the page

D. A blank page with no content

Solution

1. Step 1: Understand component return value

   The component returns an <h1> element with text "Hello, world!" which React renders as HTML.

2. Step 2: Confirm rendering behavior

   When used in JSX, this component will display the heading on the page. No syntax errors exist.

3. Final Answer:

   <h1>Hello, world!</h1> displayed on the page -> Option C

4. Quick Check:

   Return JSX renders UI [OK]

Hint: Returned JSX shows on page when component is used [OK]

Common Mistakes:

• Thinking function must be called manually
• Assuming missing parentheses cause error here
• Believing component renders nothing by default

4. Identify the error in this React component:

function Welcome() {
  return <div>Welcome to React</div>
}

medium

A. Missing semicolon after return statement

B. JSX must be wrapped in parentheses if on multiple lines

C. Function name should start with lowercase letter

D. No error, component is correct

Solution

1. Step 1: Check JSX syntax

   The JSX is a single line and correctly returned without parentheses, which is valid.

2. Step 2: Verify naming and semicolon rules

   Function names for components should start uppercase, which is true. Semicolons are optional in JavaScript here.

3. Final Answer:

   No error, component is correct -> Option D

4. Quick Check:

   Valid JSX and naming means no error [OK]

Hint: JSX on one line doesn't need parentheses [OK]

Common Mistakes:

• Thinking semicolons are mandatory after return
• Believing lowercase function names are required
• Assuming JSX always needs parentheses

5. You want to create a reusable button component that shows different text based on a property. Which is the best way to do this?

hard

A. function Button(props) { return {props.text}; }

B. function Button() { return Click me; }

C. const Button = Click me;

D. function Button(text) { return {text}; }

Solution

1. Step 1: Understand passing data to components

   Props are used to pass data to components. Using props.text allows dynamic button text.

2. Step 2: Evaluate each option

   function Button(props) { return {props.text}; } correctly uses props to show different text. function Button() { return Click me; } always shows fixed text. const Button = Click me; is not a function component. function Button(text) { return {text}; } incorrectly uses a parameter instead of props object.

3. Final Answer:

   function Button(props) { return <button>{props.text}</button>; } -> Option A

4. Quick Check:

   Use props for dynamic content [OK]

Hint: Use props to pass dynamic text to components [OK]

Common Mistakes:

• Hardcoding text inside component
• Not using props object for parameters
• Assigning JSX directly to variables