Introduction to React and its Philosophy • React is a JavaScript library for building user interfaces efficiently. • It focuses on declarative programming for predictable UI updates. • React uses a virtual DOM to optimize rendering performance significantly. • Component-based architecture makes UIs modular and reusable. • Declarative approach means you describe *what* UI should look like. • React handles the *how* to update the DOM efficiently for you. • This simplifies complex UI development and debugging processes. • Start by building small, reusable UI pieces called components.

Key points: - React builds UIs with JavaScript. - Declarative approach simplifies UI logic. - Virtual DOM boosts performance. - Component-based design for reusability. - Focus on *what* the UI should be.

Example: Imagine building a complex dashboard. React lets you think of it as a collection of smaller, independent widgets like charts, tables, and buttons.

Understanding JSX Syntax and Rules • JSX is a syntax extension for JavaScript, resembling HTML. • It allows you to write UI structures directly within your JavaScript code. • JSX elements are compiled into regular JavaScript function calls. • It's used for describing the UI structure and content easily. • All JSX elements must be closed, like HTML tags. • Attribute names are camelCased, e.g., className instead of class. • JavaScript expressions are embedded using curly braces {}. • Remember to close self-closing tags like <br />.

Key points: - JSX looks like HTML but is JavaScript. - Easier to visualize UI structure. - Elements must be closed. - Use camelCase for attributes. - Embed JS with {}.

Example: const greeting = <h1>Hello, {'World'}!</h1>;

Functional Components • Functional components are simple JavaScript functions returning JSX. • They are the modern and preferred way to write React components. • They receive data via props and return UI elements. • Use them for presentational components or simple logic. • Keep functions pure: same input always yields same output. • Avoid side effects directly inside the component return. • They are concise and easier to read/understand. • Start with functional components unless state is complex.

Key points: - JavaScript functions returning JSX. - Modern and recommended approach. - Receive data through props. - Ideal for stateless UI. - Keep them pure and concise.

Example: function Welcome(props) { return <h1>Hello, {props.name}!</h1>; }

Class Components (Optional but good to know) • Class components are ES6 classes extending React.Component. • They were the primary way to handle state and lifecycle methods. • They have a render method that returns JSX. • Use them when you need lifecycle methods or complex state. • State is managed using this.state and updated with this.setState(). • Lifecycle methods like componentDidMount are available. • Functional components with Hooks often replace their use cases. • Understand them for legacy code or specific advanced patterns.

Key points: - ES6 classes extending React.Component. - Manage state and lifecycle methods. - Render method returns JSX. - this.state and this.setState() for state. - Less common now with Hooks.

Example: class Counter extends React.Component { constructor(props) { super(props); this.state = { count: 0 }; } render() { return <h1>Count: {this.state.count}</h1>; } }

Props: Passing Data Down • Props (short for properties) are how components communicate. • They allow parent components to pass data to child components. • Props are read-only; child components cannot modify them. • This ensures data flow is predictable and unidirectional. • Pass data as attributes when rendering a child component. • Access props within a functional component using the props argument. • Use props to customize child component behavior and appearance. • Always consider default props for optional data.

Key points: - Props pass data from parent to child. - Data is read-only in children. - Enables unidirectional data flow. - Attributes on child component tags. - Customize child components effectively.

Example: function Greeting(props) { return <p>Hello, {props.name}!</p>; }

function App() { return <Greeting name="Alice" />; }

Rendering Lists with Keys • Rendering lists involves mapping an array to JSX elements. • Keys are special string attributes that uniquely identify list items. • They help React efficiently update lists when items change. • Keys are crucial for performance and correct behavior. • Use stable and unique IDs from your data as keys. • Avoid using array indices as keys if list can be reordered. • This allows React to track additions, deletions, and updates. • Ensure every item in a rendered list has a unique key.

Key points: - Map arrays to render lists of elements. - Keys uniquely identify list items. - Keys optimize list updates and performance. - Use stable, unique identifiers. - Avoid array indices as keys if possible.

Example: const items = ['Apple', 'Banana', 'Cherry'];

<ul> {items.map((item, index) => ( <li key={index}>{item}</li> ))} </ul>

Quick quiz: 1. Which of the following best describes React's core philosophy? 2. Consider the following JSX snippet. What is a potential issue with it? 3. What is the primary way to pass data from a parent component to a child component in React? 4. You are rendering a list of items in React. What is the most crucial attribute to add to each list item when using map() to avoid warnings and ensure efficient updates? 5. Consider a functional component named UserProfile that receives a name prop. How would you correctly display the user's name within the component?