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.