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

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 foreach ($users as $user): ?>
    <div class="user"><?= $user['name'] ?></div>
<?php endforeach; ?>

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

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 ->