Changes

[github-learning-lab[bot]]

Building Blocks of Life Apps - Components

Awesome! You successfully opened a pull request!

In this Pull Request you will:

• Add components
• Pass data to child components
• Create and use state variables
• Use callback functions to communicate data

First, we'll learn about components.

Components

Components are the building blocks of React apps. Think of components as different parts of the app. Each button is a component, each paragraph of text is a component, and so on. From html, you might recognize some of the built in components like <div /> and <li />. In React, we can create our own components! How cool is that?

Components in src/App.jsx

In our solution, our assignments page looks like the above. The overall webpage is a component called App. Inside App there are other components like buttons, titles, and custom components that we can create (like the Assginments List).

Take a look at the following line in src/App.jsx.

class App extends React.Component

This line takes a component's properties to create a component named "App". In the render method of App, there are other components like <button/>. These components are child components because they are all a part of its parent, App.

Scroll down to add a header component.

[github-learning-lab[bot]]

Interacting with child components with props

Now, let's discuss how we can reuse the same component with different properties.

That might sound a little confusing, but let's take a look. Go to our final solution and add some assignments along with students. You might start to notice that both lists look the same, but with different values. In fact, both lists are the same component!

How do we pass different values to a component? We pass properties to the component, otherwise known as props.

Props are the input to components. Props allow us to reuse a component (like a list) in multiple places within our app.

Props used for Assignments and Students Pages

Take a look at our final solution for our assignments and students page above. You'll see that they look similar. The lists used in the assignments and students pages use the same component, but with different values (props). Next, we'll learn to pass different values to the same components.

[github-learning-lab[bot]]

State Variables

So now, we learned how to pass data to components, but let's talk about the data itself.

There are two types of data: static data and dynamic data.

Static data doesn't change. Things like a title on a page or the name of a button would be static data.

Dynamic data, on the other hand, is data that does change. In our example, we can change it by adding an item to the list. Our list of assignments would also be considered dynamic data. But, how do we deal with dynamic data in React?

Scroll below to take a look in the code!

[github-learning-lab[bot]]

Callback Functions

The last thing you need to know before you can call yourself a React Developer is callback functions. We said that we can pass data to the child with props, but what about passing data from the child to the parent?

With callback functions, we are able to do just that. We pass a function as a prop, and then the child component can call the function that was defined in the parent. Let's look at an example below.

[github-learning-lab[bot]]

Congratulations!

Congratulations on finishing Introduction to React. To update your local course, use git checkout master and git pull.

Although this course certainly doesn't mean you are a React expert, we hope you have the tools to explore further content on your own. Here are some cool resources for further learning:

• Create your own React App
• Deploying a React App to GitHub Pages