Creating first React app - Mechanics & Internals

Overview - Creating first React app

What is it?

Creating a first React app means building a simple web application using React, a popular tool for making interactive user interfaces. React lets you write small pieces called components that show parts of a webpage. These components can change when users interact with them, making the page feel alive and responsive. Starting with a first app helps you understand how React works and how to build more complex apps later.

Why it matters

Without React, building interactive web pages would require a lot of manual work to update the page when things change, which is slow and error-prone. React solves this by managing updates efficiently and letting developers focus on what the app should do, not how to change the page. Learning to create your first React app opens the door to building modern websites and apps that users enjoy because they respond quickly and smoothly.

Where it fits

Before creating a React app, you should know basic HTML, CSS, and JavaScript, especially how functions and variables work. After this, you can learn about React hooks, state management, routing, and connecting to servers to build full-featured apps.

Mental Model

Core Idea

React apps are built by combining small, reusable components that automatically update the webpage when data changes.

Think of it like...

Think of React components like LEGO blocks that snap together to build a model. When you change one block, the whole model updates smoothly without rebuilding everything.

App
├── Component A
│   ├── Subcomponent A1
│   └── Subcomponent A2
└── Component B
    └── Subcomponent B1

Each component controls its own part and updates only when needed.

Build-Up - 7 Steps

1

Foundation

Understanding React Components

Concept: React apps are made of components, which are like building blocks for the user interface.

A React component is a JavaScript function that returns HTML-like code called JSX. This JSX describes what the UI should look like. For example, a component can show a button or a message. Components can be reused and combined to build complex interfaces.

Result

You can write a simple component that shows a message on the screen.

Understanding components is key because React’s power comes from breaking the UI into small, manageable pieces.

2

Foundation

Setting Up React Environment

Concept: You need a special setup to write and run React code easily on your computer.

Using a tool like Create React App sets up everything for you: it creates files, installs needed packages, and configures the environment. You just run commands in the terminal to start your app and see it in the browser.

Result

You have a ready-to-use React project that runs on your local machine.

Having a ready environment saves time and avoids errors, letting you focus on writing React code.

3

Intermediate

Writing Your First React Component

🤔Before reading on: do you think a React component must be a class or can it be a simple function? Commit to your answer.

Concept: Modern React uses functions to create components, which are simpler and easier to understand.

Create a function that returns JSX. For example: function Welcome() { return

Hello, React!

; } This function is a component that shows a heading. You can use it inside other components or the main app.

Result

The browser shows 'Hello, React!' as a heading on the page.

Knowing that components are just functions helps you write clean and reusable code.

4

Intermediate

Using JSX to Build UI

🤔Before reading on: do you think JSX is a new language or just a way to write HTML inside JavaScript? Commit to your answer.

Concept: JSX looks like HTML but is actually JavaScript that describes UI elements.

JSX lets you write tags like

,

, or

Result

You can create UI that changes based on data or user actions.

Understanding JSX as JavaScript with HTML-like syntax makes it easier to mix logic and UI.

5

Intermediate

Rendering React App to the Browser

Concept: React needs to know where to show your app in the webpage.

In your main file, you use ReactDOM to connect your root component to a real HTML element, usually a

with id 'root'. For example: import ReactDOM from 'react-dom/client'; import App from './App'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); This tells React to show your App component inside that div.

Result

Your React app appears inside the webpage where you want it.

Knowing how React connects to the real page helps you control where your app shows up.

6

Advanced

Understanding React's Component Tree

🤔Before reading on: do you think React updates the whole page or only parts that change? Commit to your answer.

Concept: React builds a tree of components and updates only the parts that need to change when data updates.

React keeps a virtual copy of the UI called the virtual DOM. When something changes, React compares the new virtual DOM with the old one and updates only the real DOM elements that differ. This makes updates fast and efficient.

Result

Your app feels fast because React avoids unnecessary page changes.

Understanding React’s update process explains why it performs well even with complex interfaces.

7

Expert

How Create React App Works Internally

🤔Before reading on: do you think Create React App bundles your code manually or uses automated tools? Commit to your answer.

Concept: Create React App uses tools like Webpack and Babel behind the scenes to prepare your code for the browser.

When you run the app, Webpack bundles all your JavaScript and CSS files into a few files the browser can load quickly. Babel converts JSX and modern JavaScript into code that works in all browsers. This setup is hidden but crucial for smooth development and production builds.

Result

Your app runs correctly in browsers without you managing complex build steps.

Knowing the build tools under Create React App helps you understand how modern web apps are prepared and optimized.

Under the Hood

React creates a virtual version of the webpage called the virtual DOM. When your app’s data changes, React compares the new virtual DOM with the old one to find differences. It then updates only those parts in the real webpage, making changes fast and efficient. Components are functions that return descriptions of UI elements, and React manages their lifecycle and updates automatically.

Why designed this way?

React was designed to solve the problem of slow and complex manual updates to webpages. By using a virtual DOM and components, React makes UI updates predictable and efficient. This approach was chosen over direct DOM manipulation because it reduces bugs and improves performance, especially for large apps.

┌───────────────┐
│  Your Code    │
│ (Components)  │
└──────┬────────┘
       │ returns JSX
       ▼
┌───────────────┐
│ Virtual DOM   │
│ (React's copy)│
└──────┬────────┘
       │ compares old and new
       ▼
┌───────────────┐
│ Real DOM      │
│ (Browser UI)  │
└───────────────┘

Myth Busters - 4 Common Misconceptions

Quick: Do you think React components must be classes to work? Commit to yes or no.

Common Belief: React components have to be classes with special methods.

Reality: Modern React uses function components with hooks; class components are legacy and less common.

Why it matters: Using class components today can lead to more complex code and missed benefits of simpler function components.

Quick: Do you think JSX is a separate language you must learn? Commit to yes or no.

Common Belief: JSX is a new language different from JavaScript.

Reality: JSX is just JavaScript syntax sugar that looks like HTML but compiles to JavaScript function calls.

Why it matters: Misunderstanding JSX can make learning React harder and cause confusion about how code runs.

Quick: Do you think React updates the entire webpage on every change? Commit to yes or no.

Common Belief: React refreshes the whole page whenever data changes.

Reality: React updates only the parts of the page that actually changed using the virtual DOM diffing process.

Why it matters: Thinking React reloads everything can lead to wrong assumptions about performance and app behavior.

Quick: Do you think Create React App is required to build React apps? Commit to yes or no.

Common Belief: You must use Create React App to make any React app.

Reality: Create React App is a helpful tool but you can set up React manually or use other tools like Vite or Next.js.

Why it matters: Believing this limits understanding of React’s flexibility and alternative setups.

Expert Zone

1

React’s reconciliation algorithm optimizes updates by using keys on list items to track changes precisely.

2

Function components with hooks allow sharing stateful logic without changing component hierarchy, unlike classes.

3

Create React App hides complex build configurations, but understanding Webpack and Babel helps customize and optimize apps.

When NOT to use

React is not ideal for simple static pages where plain HTML/CSS is enough, or for apps requiring very high performance with minimal overhead where frameworks like Svelte or vanilla JavaScript might be better.

Production Patterns

In production, React apps often use code splitting to load parts of the app on demand, server-side rendering for faster initial load, and state management libraries like Redux or Zustand for complex data flows.

Connections

Component-Based Architecture

React builds on the idea of breaking software into reusable components, a pattern used in many UI frameworks.

Understanding component-based design helps grasp React’s modular approach and how it improves code reuse and maintenance.

Virtual DOM

React’s virtual DOM is a specific implementation of a general concept used to optimize UI updates.

Knowing virtual DOM principles clarifies why React is fast and how it differs from direct DOM manipulation.

Functional Programming

React’s use of function components and hooks reflects functional programming ideas like pure functions and immutable data.

Recognizing functional programming concepts in React helps write cleaner, more predictable components.

Common Pitfalls

#1 Trying to write HTML inside JavaScript without JSX syntax.

Wrong approach:

function App() {
return Hello;
}
// but saved as .js without JSX support or without proper setup

Correct approach:

function App() {
return Hello;
}
// saved as .jsx or .js with proper React setup that supports JSX

Root cause:

Not understanding that JSX needs to be compiled by tools like Babel before browsers can run it.

#2 Using class components syntax in new React projects.

Wrong approach:

class Welcome extends React.Component {
render() {
return Hello;
}
}

Correct approach:

function Welcome() {
return Hello;
}

Root cause:

Following outdated tutorials or not knowing that function components with hooks are the modern standard.

#3 Not rendering the React app into the correct HTML element.

Wrong approach:

ReactDOM.createRoot(document.getElementById('app')).render(); // but HTML has

Correct approach:

ReactDOM.createRoot(document.getElementById('root')).render();

Root cause:

Mismatch between HTML element id and JavaScript code causes React to fail to mount.

Key Takeaways

React apps are built from small, reusable components that describe parts of the user interface.

JSX lets you write HTML-like code inside JavaScript, which React converts to real webpage elements.

Create React App sets up a ready environment so you can focus on writing React code without manual configuration.

React uses a virtual DOM to update only the parts of the page that change, making apps fast and efficient.

Modern React favors function components with hooks over class components for simpler and cleaner code.