Skip to content
UW Front-end Tech Community of Practice

Chapter 3

Oct. 18

Chapter 3 Summary

03_01 Creating a React component

  • Components in React are building blocks of the user interface, representing specific parts of an application.
  • A component is defined as a JavaScript function that returns JSX, like a header function that renders text inside an h1 element.
function Header() {
  return (
     <header>
       <h1>Eve's Kitchen</h1>
     </header>
   );          
}
  • Components are rendered using the ReactDOM.render function, and they should start with a capital letter and be implemented as functions.
  • Multiple components cannot be rendered directly side by side; they must be wrapped in an enclosing tag, such as a div.
  • Alternatively, a higher-level “App” component can be created to render both the “Header” and “Main” components, providing a structured approach to composing the UI.
function App() {
     return (
          <div>
               <Header/>
               <Main/>
          </div>
     );
}

03_02 Adding component properties

    • Props, short for properties, pass data to components.
    • The “props” object is added as an argument to the “header” function to receive data.
function Header(props) { // make sure to use a capital letter
     return(
          <header>
                <h1>{props.name}'s Kitchen</h1>
          </header>
     )
}
  • To provide data to a component, properties are added when rendering the component. For instance, “name” is added as a property with the value “Cindy.”
<Header name="Cindy"/>
  • The value within the “props” object is accessed using dot notation, like {props.name}.
  • Dynamic properties can include numbers or functions, like {new Date().getFullYear()} to display the current year.
  • The “props” object is a container for passing information to components, and components reference these properties within the “props” object using dot notation.

03_03 Working with lists

  • Various data types can be passed as properties into React components, such as strings {"amazing"}, functions to generate data {new Date().getFullYear()} , numbers {42}, or boolean values {true}.
  • More complex data types, like arrays, can also be passed as properties.
const dishes = [
  "Black bean soup",
  "Macaroni and Cheese",
  "Salmon and potatoes"
]
  • To display this list inside a component, the map function is used to iterate over the array elements and create list items.
function Main(props){
  return(
    <section>
      <ul>
        {dishes.map(dish => (
          <li>{dish}</li>
        ))}
      </ul>
    </section>
  )
}
  • Use props to pass the array of dishes from a parent component to the child component. Make sure to add prop. to the map function in Main function above:
{dishes.map(dish => ( <li>{dish}</li> ))} // in function Main()
<Main dishes={dishes}/> // in function App()

 

03_04 Adding keys to list items

  • The need for a key property arises to ensure synchronization during rendering, especially when items are added or modified within the list.
  • There are two approaches to adding keys: using an index (not recommended for potential rendering issues) and performing data transformation to create an array of objects with unique IDs.
  • Create new array using the map method to transform the original array into objects with unique IDs and titles.
     const dishObjects = dishes.map(
          (dish, i) => ({
            id: i,
            title: dish
         })
      );
  • In the function, updated the map function, using dot.notation to assign key and title:
function Main(props) {
  return (
    <section>
      <ul>
        {props.dishes.map((dish) => (
          <li key={dish.id}>
            {dish.title}
          </li>
        ))}
      </ul>
    </section>
  );
}
  • Use the array in the component:
<Main dishes={dishObjects}/>

03_05 Displaying images with React

  • In your React component, use an <img> tag.
  • Set the src attribute of the <img> tag to the image URL
    • Ensure accessibility by adding an alt attribute to describe the image’s content.

03_06 Using fragments

  • Wrapping sibling components is crucial in React to prevent the error related to adjacent JSX elements requiring an enclosing tag.
  • Using a div for wrapping sibling components can lead to a cluttered HTML structure.
  • A cleaner approach is to use a React Fragment (React.Fragment) to group sibling components together.
  • React Fragment doesn’t add extra elements to the DOM, resulting in cleaner and more organized code.
  • A shorthand syntax for React Fragment exists in specific React versions, which simplifies the process further.
Skip to toolbar