0 - Intro to Node

Why React? The Power of Components!

Before React, building complex web UIs was often a tangled mess of jQuery, raw DOM manipulation, and spaghetti code. Imagine trying to update a small part of a dynamic webpage without affecting everything else – it was a nightmare!

Enter Components! React’s core idea is to break down your UI into small, independent, reusable pieces called components. Think of them like LEGO bricks for your website.

How Components Changed Development:

1. Modularity: Instead of one giant HTML file, you have many small, focused components. This makes your code easier to read, understand, and manage.

   • Example: Imagine building an e-commerce site. Instead of one huge page, you’d have components like ProductCard, ShoppingCart, Navbar, UserAvatar, etc.

2. Reusability: Once you build a component, you can use it anywhere else in your application, or even in other projects! This saves a ton of development time.

   • Motivation: Build a Button component once, and then use it for “Add to Cart,” “Submit,” “Learn More,” etc., ensuring consistent styling and behavior across your site.

3. Maintainability: If there’s a bug in a specific part of your UI, you know exactly which component to look at. Updates and changes become much less risky.

   • Motivation: If your ProductCard needs a new “Sale” badge, you only modify that one component, not every place a product is displayed.

4. Declarative UI: You describe what you want your UI to look like, not how to achieve it. React efficiently updates the DOM to match your description.

   • Contrast:
     • Imperative (old way): “Find the element with ID ‘myDiv’, remove its ‘hidden’ class, then change its text to ‘Hello!‘” (You’re telling the browser how to do it step-by-step).
     • Declarative (React): render() { return showMessage ? <p>Hello!</p> : null; } (You’re telling React what the UI should be based on a condition).

Different Abilities of Components:

Components aren’t just about structure; they also manage their own data and behavior.

1. Props (Properties): Think of props as arguments you pass to a component. They allow you to customize a component’s appearance or behavior from its parent. Props are read-only (immutable).

   // MyButton.jsx
   function MyButton(props) {
     return <button onClick={props.onClick}>{props.text}</button>;
   }
    
   // App.jsx
   function App() {
     return (
       <div>
         <MyButton text="Click Me!" onClick={() => alert('Button Clicked!')} />
         <MyButton text="Learn More" onClick={() => console.log('Learning more...')} />
       </div>
     );
   }

   • Motivation: Notice how MyButton is reusable but its text and what happens when clicked are determined by the props passed to it.

2. State: Unlike props, state is internal to a component and can change over time. It’s how components manage their own data and trigger re-renders when that data changes.

   import React, { useState } from 'react';
    
   function Counter() {
     const [count, setCount] = useState(0); // 'count' is the state variable, 'setCount' is the function to update it
    
     return (
       <div>
         <p>You clicked {count} times</p>
         <button onClick={() => setCount(count + 1)}>
           Increment
         </button>
         <button onClick={() => setCount(0)}>
           Reset
         </button>
       </div>
     );
   }
    
   // App.jsx
   function App() {
     return <Counter />;
   }

   • Motivation: The Counter component keeps track of its own count. When the Increment button is clicked, the setCount function updates the count state, and React automatically re-renders the component to show the new value. This is powerful for dynamic UIs!

3. Lifecycle Methods (or Hooks): Components have a “lifecycle” – they are born (mounted), grow (update), and die (unmounted). You can tap into these stages to perform actions. With Hooks (like useState and useEffect), this is even more streamlined.

   import React, { useState, useEffect } from 'react';
    
   function Timer() {
     const [seconds, setSeconds] = useState(0);
    
     useEffect(() => {
       // This runs after every render (initially and on updates)
       const intervalId = setInterval(() => {
         setSeconds(prevSeconds => prevSeconds + 1);
       }, 1000);
    
       // This function runs when the component unmounts (cleanup)
       return () => clearInterval(intervalId);
     }, []); // The empty array means this effect runs only once after the initial render
    
     return <p>Timer: {seconds} seconds</p>;
   }
    
   // App.jsx
   function App() {
     const [showTimer, setShowTimer] = useState(true);
    
     return (
       <div>
         <button onClick={() => setShowTimer(!showTimer)}>
           Toggle Timer
         </button>
         {showTimer && <Timer />}
       </div>
     );
   }

   • Motivation: The useEffect Hook in Timer allows us to set up an interval when the component first appears (mounts) and clean it up when it disappears (unmounts), preventing memory leaks. This is crucial for managing side effects like data fetching, subscriptions, or manual DOM manipulation.

---

This is just the tip of the iceberg, but these core concepts of components, props, state, and effects are what make React so powerful and enjoyable to work with. Dive in and start building! Move to crash intro to node for basics.