Understanding React Fundamentals

# CHAPTER 4

Understanding React Fundamentals #

1. Introduction #

2. Learning Objectives #

• Explain the concept of a Declarative UI.

• Understand the syntax and rules of JSX.

• Define what a Component is and how to build one.

• Understand how to pass data down the tree using Props.

• Understand the concept of State and how it triggers UI re-renders.

3. Imperative vs Declarative UI #

• Imperative (The Old Way - Vanilla JS/jQuery): You give step-by-step instructions. *"Find the button with ID 'submit'. Add an event listener. When clicked, change the background color of the div with ID 'box' to red."* This results in spaghetti code.

• Declarative (The React Way): You declare the rules. *"If the state 'isClicked' is true, the box is red. If false, it is blue."* When the button is clicked, you just change isClicked to true. React automatically figures out how to redraw the box.

4. Components (The Building Blocks) #

In modern React, a Component is simply a JavaScript function that returns UI!

// A simple React Native Component
function WelcomeMessage() {
  // It must return UI elements!
  return <Text>Welcome to my App!</Text>; 
}

5. JSX (JavaScript XML) #

Rules of JSX:

1. 1. You can inject JavaScript variables directly into the UI using curly braces {}.

1. 2. A component must return a single parent element. (You cannot return two sibling Text tags without wrapping them in a parent <View>).

function UserProfile() {
  const userName = "Alice"; // JavaScript logic
  
  return (
    <View> {/* The single parent wrapper */}
      <Text>Profile Page</Text>
      <Text>Name: {userName}</Text> {/* Injecting JS into UI! */}
    </View>
  );
}

6. Props (Properties) #

// The CHILD component (Receives props)
function GreetingCard(props) {
  return <Text>Hello, {props.name}!</Text>;
}

// The PARENT component (Passes props)
function App() {
  return (
    <View>
      <GreetingCard name="Alice" /> {/* Passing 'Alice' */}
      <GreetingCard name="Bob" />   {/* Reusing the component! */}
    </View>
  );
}

7. State (Dynamic Data) #

8. Visual Learning: The Component Tree #

                      [ App Component ] (State: isLoggedIn = true)
                             |
         +-------------------+-------------------+
         |                                       |
[ Header Component ]                   [ Profile Component ]
(Receives prop: title="Home")          (Receives prop: userName="Alice")

9. Common Mistakes #

• Modifying Props: Beginners often try to do props.name = "Steve"; inside a child component. This will crash the app. Props flow strictly downward and are immutable (read-only). If a child needs to change data, it must use State, or the Parent must pass down a function via props that the child can trigger!

10. Best Practices #

• Component Naming: In React, custom components MUST start with a Capital Letter (e.g., <MyCustomButton />). If you start it with a lowercase letter (e.g., <myCustomButton />), React will assume you are trying to use a built-in native tag and it will fail to render.

11. Practice Exercises #

1. 1. What magical syntax allows you to write HTML-like tags directly inside JavaScript functions?

1. 2. If Component A is nested inside Component B, what mechanism should Component B use to send a string of text down to Component A?

12. MCQs with Answers #

13. Interview Questions #

• Q: Explain the concept of JSX. How does the Babel compiler transform JSX code behind the scenes before it runs on a device?

• Q: Contrast Declarative UI (React) with Imperative UI (Vanilla DOM manipulation or classic Android XML/Java). Provide an example of how each handles updating a text label on a button click.

• Q: What is the "Unidirectional Data Flow" (One-Way Data Flow) principle in React regarding parent and child components?

14. FAQs #

15. Summary #

16. Next Chapter Recommendation #