Skip to content
This repository was archived by the owner on Sep 1, 2022. It is now read-only.

Commit 98a4a4c

Browse files
brianamariebrianamarie
authored
Merge pull request #53 from githubtraining/briana-edits
Briana edits
2 parents 3dd2728 + a0ca013 commit 98a4a4c

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

50 files changed

+363
-356
lines changed

‎config.yml

+50-31
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,14 @@ template:
88
before:
99
- type: createIssue
1010
title: Welcome to React
11-
body: 00-setup.md
11+
body: 00_setup.md
1212
comments:
13-
- open-pr.md
13+
- 00_open-pr.md
1414
- type: updateBranchProtection
1515

1616
steps:
17+
18+
# Step 1: User opens a pull request after cloning and validating Node is installed
1719
- title: Open a pull request
1820
description: Welcome to React! Let's get started with our project.
1921
event: pull_request.opened
@@ -31,15 +33,14 @@ steps:
3133
- type: closeIssue
3234
issue: Welcome to React
3335
- type: respond
34-
with: 01-congrats.md
35-
issue: Changes
36-
- type: respond
37-
with: 01-components.md
36+
with: 01_components.md
3837
issue: Changes
3938
- type: createPullRequestComment
40-
body: header-component-activity.md
39+
body: 01_header-component-activity.md
4140
file: src/App.jsx
4241
position: 85
42+
43+
# Step 2: User adds a header component
4344
- title: Add a header component
4445
description: Give your app a title by adding a header component
4546
event: push
@@ -62,16 +63,18 @@ steps:
6263
right: '%actions.fileContents%'
6364
else:
6465
- type: respond
65-
with: bad-header.md
66+
with: 02_bad-header.md
6667
issue: Changes
6768
- type: respond
68-
with: 02-props.md
69+
with: 02_props.md
6970
issue: Changes
7071
- type: createPullRequestComment
71-
body: import-child-component-activity.md
72+
body: 02_import-child-component-activity.md
7273
file: src/App.jsx
7374
position: 3
7475
pullRequest: '%actions.metaPR2.data.number%'
76+
77+
# Step 3: User makes changes to import a child component
7578
- title: Import a child component
7679
description: Import a child component into its parent
7780
event: push
@@ -94,13 +97,15 @@ steps:
9497
right: '%actions.fileContents%'
9598
else:
9699
- type: respond
97-
with: bad-import.md
100+
with: 03_bad-import.md
98101
issue: Changes
99102
- type: createPullRequestComment
100-
body: uncomment-assignments-activity.md
103+
body: 03_uncomment-assignments-activity.md
101104
file: src/App.jsx
102105
position: 46
103106
pullRequest: '%actions.metaPR2.data.number%'
107+
108+
# Step 4: Add an assignments section by uncommenting
104109
- title: Uncomment assignments section
105110
description: Add the ability to create assignments
106111
event: push
@@ -123,13 +128,15 @@ steps:
123128
right: '%actions.fileContents%'
124129
else:
125130
- type: respond
126-
with: bad-uncomment.md
131+
with: 04_bad-uncomment.md
127132
issue: Changes
128133
- type: createPullRequestComment
129-
body: replace-title-activity.md
134+
body: 04_replace-title-activity.md
130135
file: src/List.jsx
131136
position: 5
132137
pullRequest: '%actions.metaPR2.data.number%'
138+
139+
# Step 5: Replace the title prop
133140
- title: Replace the title prop
134141
description: Pass a title prop to the List child component
135142
event: push
@@ -152,16 +159,18 @@ steps:
152159
right: '%actions.fileContents%'
153160
else:
154161
- type: respond
155-
with: bad-prop.md
162+
with: 05_bad-prop.md
156163
issue: Changes
157164
- type: respond
158-
with: 03-state.md
165+
with: 05_state.md
159166
issue: Changes
160167
- type: createPullRequestComment
161-
body: add-state-variable-activity.md
168+
body: 05_add-state-variable-activity.md
162169
file: src/App.jsx
163170
position: 12
164171
pullRequest: '%actions.metaPR2.data.number%'
172+
173+
# Step 6: add a state variable
165174
- title: Add a state variable
166175
description: Add a students state variable to keep track of students
167176
event: push
@@ -184,18 +193,20 @@ steps:
184193
right: '%actions.fileContents%'
185194
else:
186195
- type: respond
187-
with: bad-state.md
196+
with: 06_bad-state.md
188197
issue: Changes
189198
- type: createPullRequestComment
190-
body: explaining-this-state-activity.md
199+
body: 06_explaining-this-state-activity.md
191200
file: src/App.jsx
192201
position: 32
193202
pullRequest: '%actions.metaPR2.data.number%'
194203
- type: createPullRequestComment
195-
body: create-addstudent-activity.md
204+
body: 06_create-addstudent-activity.md
196205
file: src/App.jsx
197206
position: 38
198207
pullRequest: '%actions.metaPR2.data.number%'
208+
209+
# Step 7: Create a method
199210
- title: Create a method
200211
description: Create a method to add students to our state
201212
event: push
@@ -218,13 +229,15 @@ steps:
218229
right: '%actions.fileContents%'
219230
else:
220231
- type: respond
221-
with: bad-function.md
232+
with: 07_bad-function.md
222233
issue: Changes
223234
- type: createPullRequestComment
224-
body: bind-function-activity.md
235+
body: 07_bind-function-activity.md
225236
file: src/App.jsx
226237
position: 20
227238
pullRequest: '%actions.metaPR2.data.number%'
239+
240+
# Step 8: Bind a method
228241
- title: Bind a method
229242
description: Bind the addStudents method to our class
230243
event: push
@@ -247,21 +260,23 @@ steps:
247260
right: '%actions.fileContents%'
248261
else:
249262
- type: respond
250-
with: bad-uncomment.md
263+
with: 04_bad-uncomment.md
251264
issue: Changes
252265
- type: respond
253-
with: 04-callbackfunctions.md
266+
with: 08_callbackfunctions.md
254267
issue: Changes
255268
- type: createPullRequestComment
256-
body: passing-functions-activity.md
269+
body: 08_passing-functions-activity.md
257270
file: src/App.jsx
258271
position: 52
259272
pullRequest: '%actions.metaPR2.data.number%'
260273
- type: createPullRequestComment
261-
body: change-props-students-activity.md
274+
body: 08_change-props-students-activity.md
262275
file: src/App.jsx
263276
position: 68
264277
pullRequest: '%actions.metaPR2.data.number%'
278+
279+
# Step 9: Pass functions as props
265280
- title: Pass functions as props
266281
description: Learn how to pass data back to parent components
267282
event: push
@@ -284,13 +299,15 @@ steps:
284299
right: '%actions.fileContents%'
285300
else:
286301
- type: respond
287-
with: bad-replace.md
302+
with: 09_bad-replace.md
288303
issue: Changes
289304
- type: createPullRequestComment
290-
body: uncomment-grades-activity.md
305+
body: 09_uncomment-grades-activity.md
291306
file: src/App.jsx
292307
position: 78
293308
pullRequest: '%actions.metaPR2.data.number%'
309+
310+
# Step 10: Get approval
294311
- title: Get your pull request approved
295312
event: push
296313
description: Let's confirm you made the right changes
@@ -309,18 +326,20 @@ steps:
309326
right: '%actions.fileContents%'
310327
else:
311328
- type: respond
312-
with: bad-uncomment.md
329+
with: 04_bad-uncomment.md
313330
issue: Changes
314331
- type: createReview
315332
event: APPROVE
316-
body: approve.md
333+
body: 10_approve.md
317334
pullRequest: Changes
335+
336+
# Step 11: Merge pull request
318337
- title: Merge your pull request
319338
event: pull_request.closed
320339
description: Congrats on finishing the course!
321340
video: https://www.youtube.com/embed/uJGGBhdivYQ
322341
actions:
323342
- type: respond
324-
with: 05-congrats.md
343+
with: 11_congrats.md
325344
issue: Changes
326345

‎course-details.md

+8-12
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,28 @@
1-
## Welcome to React!
1+
# Welcome to React
22

3-
Congratulations on taking some of your first steps into full stack development!
3+
Congratulations on taking some of your first steps into full stack development.
44

55
So why did you decide to click and join this course? Ideally, you are a learner who:
66

77
- Understands HTML tags
88
- Understands classes and methods in JavaScript
99
- Understands Git and GitHub
1010

11-
If you understand the topics above, you can start learning modern frontend development with React!
11+
If you understand the topics above, you can start learning modern frontend development with React.
1212

1313
So why do we learn React?
1414

15-
React has growing popularity in the tech industry because of its simplicity. With a simple knowledge of HTML and Javascript, picking up React shouldn't be too bad.
15+
React has growing popularity in the tech industry because of its simplicity. With a simple knowledge of HTML and JavaScript, picking up React shouldn't be too bad.
1616

1717
### What we will be building
1818

19-
So what are we going to be building today? We are going to build a gradebook for teachers! Take a look at [our solution](https://githubtraining.github.io/react-solution/). Here's what the finished app looks like.
19+
So what are we going to be building today? We are going to build a gradebook for teachers! Take a look at [our solution](https://githubtraining.github.io/react-solution/) to see how the finished app looks.
2020

21-
You will be able to add assignments
21+
You will be able to add assignments:
2222
![Finished Assignments](https://user-images.githubusercontent.com/25253905/61293228-11f26580-a788-11e9-90ac-9612c2bddf6b.png)
2323

24-
You will be able to add students
24+
You will be able to add students:
2525
![Finished Students](https://user-images.githubusercontent.com/25253905/61293769-46b2ec80-a789-11e9-88b3-c660f436f5bf.png)
2626

27-
28-
You will be able to assign grades to those students for each assignment
27+
You will be able to assign grades to those students for each assignment:
2928
![Finished Grades](https://user-images.githubusercontent.com/25253905/61295315-9810ab00-a78c-11e9-8bcb-f3e3bb87b2be.png)
30-
31-
### Steps
32-
Go ahead and join the course!

‎responses/00-setup.md

-42
This file was deleted.

‎responses/00_open-pr.md

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
### :keyboard: Activity: Open a Pull Request
2+
3+
1. [Create a pull request to base `master` from `changes` branch]({{repoUrl}}/compare/master...changes)
4+
2. Title your pull request `Changes`
5+
6+
I'll respond with next steps in your pull request.

‎responses/00_setup.md

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
# Set up a React Application Locally
2+
3+
Hello and welcome!
4+
5+
Before starting this course, we recommend completing the [Introduction to GitHub Learning Lab](https://lab.github.com/githubtraining/introduction-to-github) first with the option for working locally in the command line.
6+
7+
### What's in our React App
8+
9+
Let's take a look of what our React App looks like right now. We will go through our file structure which is a [standard React setup](https://facebook.github.io/create-react-app/docs/getting-started). You will not be editing any files in this step, but the structure is important for future code references.
10+
11+
![File Structure](https://user-images.githubusercontent.com/25253905/61294641-28e68700-a78b-11e9-9bc1-ff468312ca8b.png)
12+
13+
##### `package.json`
14+
15+
The `package.json` file is our roadmap of the app. It tells us the name of the app, the version, the different dependencies we need to run our app, and more.
16+
17+
##### `public/`
18+
19+
The `public/` directory contains our `index.html` file. The `index.html` file directs us to the rest of the web application that requires additional processing.
20+
21+
##### `src`
22+
23+
This is where most of your code will go. You'll notice we have `App.jsx` along with other `jsx` files. But, what is `jsx`? Think of `jsx` as a mix between `html` and `javascript`. We can write tags, functions, and classes. Take a look at the `App.jsx` file. Some of that contents might look familiar from `html`, like `<div/>` tags.
24+
25+
## Step 1: Set up the project locally
26+
27+
In this repository, we have two branches - `master` and `changes`. We will be working off of the `changes` branch. Let's go ahead and get started.
28+
29+
### :keyboard: Activity: Clone the repository and install Node
30+
31+
1. Open your terminal
32+
- If you're using a Windows operating system, we recommend downloading and using [git bash](https://git-scm.com/downloads) as your terminal
33+
2. Change directories into a location where you want to keep this project
34+
3. Clone this repository: `git clone {{ repoUrl }}`
35+
4. Move into the repository's directory: `cd intro-react`
36+
5. Checkout to the `changes` branch: `git checkout changes`
37+
6. Open the `intro-react` folder in your favorite text editor
38+
7. Check for Node installation: `node -v`
39+
8. [Install Node](https://nodejs.org/en/download/) if it is not installed
40+
9. In your repository folder, install the necessary packages: `npm install`
41+
10. Start the React Application: `npm start`
42+
43+
Your browser should automatically open `http://localhost:3000/`, and you should see our barebones gradebook application.
44+
45+
You'll see that our app can't really do anything! All we have is three buttons! We are going to add all the functionality.

‎responses/01-components.md

-18
This file was deleted.

0 commit comments

Comments
 (0)