React Intro

Moving from imperative DOM manipulation to declarative UI components.

ReactIntro.jsx1/5

⚛️

Welcome to React! Unlike vanilla JS, React is a library for building user interfaces based on components.

What is React?

React is a JavaScript library created by Facebook for building user interfaces. While JavaScript focuses on **how** to change the page (imperative), React focuses on **what** the page should look like (declarative).

1. The Power of Components

Imagine building a LEGO castle. Instead of molding the entire castle from one piece of plastic, you have blocks: windows, doors, towers. In React, these are **Components**. You write them once and reuse them everywhere.

2. JSX (JavaScript XML)

JSX allows us to write HTML-like structures directly inside our JavaScript. It's not a string; it's a powerful syntax that React transforms into real browser elements.

⚡ Quick Lab: Component Check

Identify the correct way to define a React functional component:

Technical Glossary

Library

A collection of pre-written code that you can use to optimize your development tasks.

JSX

JavaScript XML. A syntax extension for JS that allows you to write HTML structure in the same file as logic.

Virtual DOM

A lightweight copy of the real DOM used by React to calculate changes before updating the screen.

Declarative

Programming style where you describe 'what' you want to achieve, rather than listing every step of 'how'.

Babel

A tool that converts JSX into regular JavaScript that browsers can understand.

SPA

Single Page Application. An app that loads a single HTML page and dynamically updates as the user interacts.

Next Level: JSX Mastery

Now that you know WHAT React is, it's time to learn HOW to write JSX like a pro. Ready to continue?