Creating first React app - Visual Walkthrough

Concept Flow - Creating first React app

Create React app folder

↓

Add index.html with root div

↓

Write App component (function)

↓

Render App into root div

↓

Browser shows App content

This flow shows how a React app is created step-by-step: folder setup, HTML root, component creation, rendering, and display.

Execution Sample

React

import React from 'react';
import { createRoot } from 'react-dom/client';

function App() {
  return <h1>Hello, React!</h1>;
}

const rootDiv = document.getElementById('root');
const root = createRoot(rootDiv);
root.render(<App />);

This code creates a simple React app that shows a heading 'Hello, React!' on the page.

Execution Table

Step	Action	Evaluation	Result
1	Import React and createRoot	Modules loaded	React and createRoot ready
2	Define App component function	Function created	App returns <h1>Hello, React!</h1>
3	Get root div by ID 'root'	DOM element found	<div id='root'> element selected
4	Create root with createRoot(root div)	Root object created	React root ready to render
5	Render <App /> into root	App function called	DOM updated with <h1>Hello, React!</h1> inside root
6	Browser displays content	Render complete	Page shows heading 'Hello, React!'

💡 Rendering completes and browser shows the React app content

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	After Step 5	Final
App	undefined	function App() {...}	function App() {...}	function App() {...}	function App() {...}	function App() {...}
rootDiv	undefined	undefined	<div id='root'> element	<div id='root'> element	<div id='root'> element	<div id='root'> element
root	undefined	undefined	undefined	Root object	Root object	Root object

Key Moments - 3 Insights

Why do we need a root div in index.html?

The root div is the container where React inserts the app content. Without it, React has no place to render the components (see execution_table step 3).

What does the App function return?

App returns JSX, which looks like HTML but is JavaScript code that React converts to DOM elements (see execution_table step 2 and 5).

Why do we call root.render(<App />)?

Calling root.render tells React to run the App component and put its output inside the root div, updating the page (see execution_table step 5).

Visual Quiz - 3 Questions

Look at the execution table, what is the value of 'rootDiv' after step 3?

A Root object

B undefined

C <div id='root'> element

D App component function

💡 Hint

Check the 'rootDiv' variable in variable_tracker after step 3

At which step does the browser show the heading 'Hello, React!'?

A Step 4

B Step 6

C Step 5

D Step 2

💡 Hint

Look at the 'Result' column in execution_table for when rendering completes

If we remove the root div from index.html, what happens at step 3?

A rootDiv becomes null and rendering fails

B App component still renders normally

C createRoot creates a new div automatically

D Browser shows an error after step 6

💡 Hint

Step 3 depends on finding the root div in the DOM (see execution_table step 3)

Concept Snapshot

Creating first React app:
1. Create an HTML file with a <div id='root'>.
2. Write a functional component returning JSX.
3. Use createRoot to select root div.
4. Call root.render(<App />) to show content.
5. Browser displays the React app inside root div.

Full Transcript

To create your first React app, start by making an HTML file with a div that has id 'root'. This is where React will put your app. Then write a function called App that returns JSX, which looks like HTML but is JavaScript code. Next, use React's createRoot function to get the root div from the page. Finally, call root.render with your App component to display it. The browser will then show your app's content inside the root div. This process connects your React code to the web page so users can see it.

Practice

1. What is the main purpose of the ReactDOM.createRoot method in a React app?

easy

A. It creates a new React component.

B. It tells React where to put the app in the HTML page.

C. It styles the React app automatically.

D. It fetches data from the server.

Solution

1. Step 1: Understand ReactDOM.createRoot usage

   This method is used to select the HTML element where the React app will appear, usually a div with id 'root'.

2. Step 2: Identify its role in rendering

   It creates a root for React to manage the app's UI inside that HTML element.

3. Final Answer:

   It tells React where to put the app in the HTML page. -> Option B

4. Quick Check:

   ReactDOM.createRoot sets the app's HTML container [OK]

Hint: ReactDOM.createRoot links React to HTML element [OK]

Common Mistakes:

• Thinking it creates components
• Confusing it with styling or data fetching
• Assuming it runs app logic

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

easy

A. class App extends React.Component { render() { return 'Hello'; } }

B. const App = Hello;

C. function App() { return Hello; }

D. function App { return Hello; }

Solution

1. Step 1: Check function syntax for React component

   A React functional component is a function that returns JSX, so it needs parentheses after the name.

2. Step 2: Validate JSX return and syntax

   function App() { return
   Hello; } correctly defines a function named App that returns JSX inside a div.

3. Final Answer:

   function App() { return
   Hello
   ; } -> Option C

4. Quick Check:

   Functional component = function with () and JSX return [OK]

Hint: React components are functions returning JSX with () [OK]

Common Mistakes:

• Missing parentheses after function name
• Assigning JSX directly to a variable without function
• Using class syntax incorrectly for functional components

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

import React from 'react';
import ReactDOM from 'react-dom/client';

function App() {
  return 
Welcome to React!
;
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

medium

A. undefined

B. App

C. Nothing, there is an error

D. Welcome to React!

Solution

1. Step 1: Understand what the App component returns

   The App function returns an <h1> element with the text 'Welcome to React!'.

2. Step 2: Check rendering process

   The root renders the App component inside the HTML element with id 'root', so the heading will appear on the page.

3. Final Answer:

   Welcome to React! -> Option D

4. Quick Check:

   App returns <h1>Welcome to React!</h1> [OK]

Hint: Component returns JSX shown on page [OK]

Common Mistakes:

• Thinking component name shows instead of its return
• Assuming error without checking code carefully
• Confusing JSX tags with plain text

4. Identify the error in this React app code:

import React from 'react';
import ReactDOM from 'react-dom/client';

function App() {
  return <h1>Hello World</h1>;
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(App);

medium

A. App should be called as in render, not just App.

B. Missing import of ReactDOM.

C. Function App must return a string, not JSX.

D. document.getElementById('root') is incorrect.

Solution

1. Step 1: Check how render is called

   React expects a JSX element or component instance in render, so is correct, not just App.

2. Step 2: Understand difference between component and element

   App is a function, is JSX that creates an element from that function.

3. Final Answer:

   App should be called as <App /> in render, not just App. -> Option A

4. Quick Check:

   render needs JSX element like <App /> [OK]

Hint: Use to render component, not App alone [OK]

Common Mistakes:

• Passing function name instead of JSX element to render
• Confusing component function with element instance
• Ignoring JSX syntax rules

5. You want to create a React app that shows a greeting message inside a div with a class container. Which code correctly creates and renders this app?

hard

A. function App() { return Hello!; }
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render();

B. function App() { return Hello!; }
ReactDOM.render(, document.getElementById('root'));

C. const App = () => Hello!;
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(App);

D. function App() { return Hello!; }
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(App);

Solution

1. Step 1: Use correct JSX attribute for class

   In React, use className instead of class for CSS classes.

2. Step 2: Render the component as JSX element

   Use root.render(<App />) to render the component, not just the function name.

3. Final Answer:

   function App() { return <div className="container">Hello!</div>; } const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<App />); -> Option A

4. Quick Check:

   Use className and render JSX element [OK]

Hint: Use className and render with [OK]

Common Mistakes:

• Using class instead of className in JSX
• Passing function name instead of JSX element to render
• Using old ReactDOM.render instead of createRoot