---
source_hash: "53c939bd"
title: "Module 2: Introduction to React"
weight: 350
description: "React was created by Facebook to solve a problem: how to manage complex interfaces that change frequently?"
category: "Training"
type: "training"
---

# Module 2: Introduction to React

> React is a JavaScript library for building user interfaces. This module introduces you to the fundamental concepts.

## Why React?

React was created by Facebook to solve a problem: how to manage complex interfaces that change frequently?

Advantages of React:

- **Reusable components**: split the UI into independent pieces
- **Virtual DOM**: automatically optimized performance
- **Unidirectional data flow**: predictability and easier debugging
- **Rich ecosystem**: huge community and many libraries

## Chapters

| # | Chapter | Content |  |
| --- | --- | --- | --- |
| 1 | [React Philosophy](/training/module2-introduction-react/philosophie) | Components vs templates, Virtual DOM, data flow |
| 2 | [JSX](/training/module2-introduction-react/jsx) | Syntax, expressions, conditions, loops |
| 3 | [Components](/training/module2-introduction-react/composants) | Functional components, props, composition |

## Module Objectives

By the end of this module, you will be able to:

- Understand React's philosophy and architecture
- Write JSX correctly
- Create functional components
- Pass data via props
- Compose components together

## Fundamental Difference with PHP

In PHP, you generate HTML server-side:

```php
<?php foreach ($users as $user): ?>
    <div class="user"><?= $user['name'] ?></div>
<?php endforeach; ?>
```

In React, you describe what the UI **should be** based on data:

```javascript
function UserList({ users }) {
    return (
        <div>
            {users.map(user => (
                <div className="user" key={user.id}>{user.name}</div>
            ))}
        </div>
    );
}
```

React takes care of updating the DOM when data changes.

## Estimated Time

Approximately 2-3 hours to go through this module and complete the exercises.

[Start: React Philosophy ->](/training/module2-introduction-react/philosophie)