CST438 Software Engineering Module II

CST438 Module Two
React and BDD
What I learned this week:
this weeks lab consisted of building a front-end that could interact
and make API calls to our Java-based REST API server. We learned about
basic framework patterns when building with React. We learned that
props are te standard way to pass data from parent
component to it’s children. ### Example of Props

// Parent Component (Parent.jsx)
function ParentComponent() {
  const name = "Alice";
  const age = 30;

  return (
    <div>
      <ChildComponent name={name} age={age} />
    </div>
  );
}

export default ParentComponent;

// Child Component (ChildComponent.jsx)
function ChildComponent(props) {
  return (
    <div>
      <p>Name: {props.name}</p>
      <p>Age: {props.age}</p>
    </div>
  );
}

export default ChildComponent;

We also learned about State and how it is used in order
to modify data in it’s child component. passing the state as props is
how we did this.

/ Parent Component (Parent.jsx)
import React, { useState } from 'react';

function ParentComponent() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <ChildComponent count={count} />
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default ParentComponent;

// Child Component (ChildComponent.jsx)
import React, { useState } from 'react';

function ChildComponent(props) {
  const [internalCount, setInternalCount] = useState(props.count);

  return (
    <div>
      <p>Internal Count: {internalCount}</p>
      <button onClick={() => setInternalCount(internalCount + 1)}>Increment (Child)</button>
    </div>
  );
}

export default ChildComponent;

We also learned the value of Hooks as they allow you to add state to
functional components.

import React, { useState } from 'react';

function MyComponent() {
  // Declare a state variable called 'count' and initialize it to 0
  const [count, setCount] = useState(0);

  // Function to update the state
  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default MyComponent;