You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on Sep 1, 2022. It is now read-only.
Copy file name to clipboardExpand all lines: responses/01-components.md
+3-3Lines changed: 3 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,13 +1,13 @@
1
1
# Building Blocks of ~~Life~~ Apps - Components
2
2
3
-
React apps are made up of components. Think of components as different parts of the app. Each button is a component, each text is a component etc. From html, you might recognize some of the built in components like `<div />` and `<li />`, but in React, we can create our own components! How cool is that?
3
+
**Components**are the **building blocks of React apps**. Think of components as different parts of the app. Each button is a component, each text is a component etc. From html, you might recognize some of the built in components like `<div />` and `<li />`, but in React, we can create our own components! How cool is that?
In our [solution](https://githubtraining.github.io/react-solution/), our assignments page looks like the above. The overall webpage is a component that we call `App` and inside `App` there's are other components like buttons, titles, and even other custom components that we can create (like the Assginments List).
9
9
10
-
Take a look at the following line in `App.jsx`.
10
+
Take a look at the following line in `src/App.jsx`.
Copy file name to clipboardExpand all lines: responses/02-props.md
+2-2Lines changed: 2 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,10 +1,10 @@
1
1
## How to Talk to your Child - Props
2
2
3
-
Alright, so we established that components are awesome, but what about reusable components with different properties?
3
+
Now, let's discuss how we can reuse the same component with different properties.
4
4
5
5
That might sound a little confusing, but let's take a look. Go to our final [solution](https://githubtraining.github.io/react-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!
6
6
7
-
Hmmm, but how do we pass different values to a component? We do so by passing properties to the component, otherwise known as props.
7
+
However, how do we pass different values to a component? We do so by passing **properties to the component**, otherwise known as **props**.
So now, we learned how to pass data to components, but let's talk about the data itself.
@@ -8,7 +6,7 @@ There are two types of data: **static data** and **dynamic data**.
8
6
9
7
Static data doesn't change, hence the name static. Things like a title on a page or the name of a button would be static data.
10
8
11
-
Dynamic data, on the other hand, is data that does change because we can change it by adding an item to the list. Our list of assignments would be considered dynamic data. But how do we deal with dyanmic data in React? We can't just dump it in a component, because how will we tell the data to change?
9
+
Dynamic data, on the other hand, is data that does change because we can change it by adding an item to the list. Our list of assignments would be considered dynamic data. But how do we deal with dynamic data in React? We can't just dump it in a component, because how will we tell the data to change?
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?
6
4
7
-
With callback functions, we are able to do just that. Basically, we pass a function as a prop, and then the child component can call the function that was defined in the parent. Yeah, that's confusing. Let's look at an example.
5
+
With **callback functions**, we are able to do just that. Basically, we **pass a function as a prop**, and then the child component can call the function that was defined in the parent. Yeah, that's confusing. Let's look at an example.
Copy file name to clipboardExpand all lines: responses/05-congrats.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -5,4 +5,4 @@ Congratulations on finishing Introduction to React. You can go ahead and pull fr
5
5
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:
6
6
7
7
-[Create your own React App](https://facebook.github.io/create-react-app/docs/getting-started)
8
-
-[Depolying a React App to GitHub Pages](https://codeburst.io/deploy-react-to-github-pages-to-create-an-amazing-website-42d8b09cd4d)
8
+
-[Deploying a React App to GitHub Pages](https://codeburst.io/deploy-react-to-github-pages-to-create-an-amazing-website-42d8b09cd4d)
In React, we store dynamic data in **state variables**. Let's take a look at how we store state variables. In `App.jsx`, take a look at the constructor. You'll see that we declare our state variables using `this.state = {.....}`.
3
+
In React, we store dynamic data in **state variables**. Let's take a look at how we store state variables. In `src/App.jsx`, take a look at the constructor. You'll see that we declare our state variables using `this.state = {.....}`.
4
4
5
5
6
6
Currently, in `App`, we have three state variables:
7
7
-`buttonClicked` - This stores which button was clicked. It is a state variable because the button that is clicked has the ability to change.
8
8
-`assignments` - This stores the list of assignments. It is a state variable because the list changes every time a new assignment is added.
9
9
-`grades` - This should store the grade for each student. However, we have no way to store students, so let's fix that!
10
10
11
-
### :keyboard: Activity: Add a state variable to `App.jsx`
11
+
### :keyboard: Activity: Add a state variable to `src/App.jsx`
12
12
13
-
1. Add a state variable to `App` and name it `students`. Set it equal to an empty array. Make sure to add the comma!
14
-
2. Run your code with `npm start` to make sure there are no errors.
15
-
3. Commit and push your code to the `changes` branch:
13
+
1. On line 11, add a state variable named `students`
14
+
2. Set `students` equal to an empty array
15
+
3. Add a comma: `students: [],`
16
+
4. Save your code
17
+
5. To run your code, move inside your repo folder in your terminal and run `npm start`
18
+
6. Exit the process in your terminal using `Ctrl + C`
19
+
7. Commit and push your code to the `changes` branch:
16
20
```
17
21
git add src/App.jsx
18
-
git commit -m "import list component"
19
-
git push origin changes
22
+
git commit -m "add a state variable for students"
23
+
git push
20
24
```
21
25
22
-
I'll respond after you push.
26
+
<hr>
27
+
<h3 align="center">Watch below this comment for my response</h3>
Also, since we created a method that changes the a state variable, we have to bind it to our class, so that when we call it, we know what method to reference.
4
4
5
5
Go ahead and uncomment the line to bind `addStudent` to `App`.
6
6
7
7
### :keyboard: Activity: Bind `addStudent` to `App`
8
8
9
-
1. Uncomment the line to bind `addStudent` to `App`.
10
-
2. Run your code with `npm start` to make sure there are no errors.
9
+
1. On line 19, uncomment the line to bind `addStudent` to `App`
10
+
2. Save your code
11
+
3. To run your code, move inside your repo folder in your terminal and run `npm start`
12
+
4. Exit the process in your terminal using `Ctrl + C`
11
13
3. Commit and push your code to the `changes` branch:
12
14
```
13
15
git add src/App.jsx
14
-
git commit -m "import list component"
15
-
git push origin changes
16
+
git commit -m "bind addStudent to App"
17
+
git push
16
18
```
17
19
18
-
I'll respond after you push.
20
+
<hr>
21
+
<h3 align="center">Watch below this comment for my response</h3>
0 commit comments