Briana edits

config.yml

@@ -8,12 +8,14 @@ template:
 before:
   - type: createIssue
     title: Welcome to React
-    body: 00-setup.md
+    body: 00_setup.md
     comments:
-      - open-pr.md
+      - 00_open-pr.md
   - type: updateBranchProtection
 
 steps:
+
+  # Step 1: User opens a pull request after cloning and validating Node is installed
   - title: Open a pull request
     description: Welcome to React! Let's get started with our project.
     event: pull_request.opened
@@ -31,15 +33,14 @@ steps:
       - type: closeIssue
         issue: Welcome to React
       - type: respond
-        with: 01-congrats.md
-        issue: Changes
-      - type: respond
-        with: 01-components.md
+        with: 01_components.md
         issue: Changes
       - type: createPullRequestComment
-        body: header-component-activity.md
+        body: 01_header-component-activity.md
         file: src/App.jsx
         position: 85
+
+  # Step 2: User adds a header component
   - title: Add a header component
     description: Give your app a title by adding a header component
     event: push
@@ -62,16 +63,18 @@ steps:
         right: '%actions.fileContents%'
         else:
           - type: respond
-            with: bad-header.md
+            with: 02_bad-header.md
             issue: Changes
       - type: respond
-        with: 02-props.md
+        with: 02_props.md
         issue: Changes
       - type: createPullRequestComment
-        body: import-child-component-activity.md
+        body: 02_import-child-component-activity.md
         file: src/App.jsx
         position: 3
         pullRequest: '%actions.metaPR2.data.number%'
+
+  # Step 3: User makes changes to import a child component
   - title: Import a child component
     description: Import a child component into its parent
     event: push
@@ -94,13 +97,15 @@ steps:
         right: '%actions.fileContents%'
         else:
           - type: respond
-            with: bad-import.md
+            with: 03_bad-import.md
             issue: Changes
       - type: createPullRequestComment
-        body: uncomment-assignments-activity.md
+        body: 03_uncomment-assignments-activity.md
         file: src/App.jsx
         position: 46
         pullRequest: '%actions.metaPR2.data.number%'
+
+  # Step 4: Add an assignments section by uncommenting
   - title: Uncomment assignments section
     description: Add the ability to create assignments
     event: push
@@ -123,13 +128,15 @@ steps:
         right: '%actions.fileContents%'
         else:
           - type: respond
-            with: bad-uncomment.md
+            with: 04_bad-uncomment.md
             issue: Changes
       - type: createPullRequestComment
-        body: replace-title-activity.md
+        body: 04_replace-title-activity.md
         file: src/List.jsx
         position: 5
         pullRequest: '%actions.metaPR2.data.number%'
+
+  # Step 5: Replace the title prop
   - title: Replace the title prop
     description: Pass a title prop to the List child component
     event: push
@@ -152,16 +159,18 @@ steps:
         right: '%actions.fileContents%'
         else:
           - type: respond
-            with: bad-prop.md
+            with: 05_bad-prop.md
             issue: Changes
       - type: respond
-        with: 03-state.md
+        with: 05_state.md
         issue: Changes
       - type: createPullRequestComment
-        body: add-state-variable-activity.md
+        body: 05_add-state-variable-activity.md
         file: src/App.jsx
         position: 12
         pullRequest: '%actions.metaPR2.data.number%'
+
+  # Step 6: add a state variable
   - title: Add a state variable
     description: Add a students state variable to keep track of students
     event: push
@@ -184,18 +193,20 @@ steps:
         right: '%actions.fileContents%'
         else:
           - type: respond
-            with: bad-state.md
+            with: 06_bad-state.md
             issue: Changes
       - type: createPullRequestComment
-        body: explaining-this-state-activity.md
+        body: 06_explaining-this-state-activity.md
         file: src/App.jsx
         position: 32
         pullRequest: '%actions.metaPR2.data.number%'
       - type: createPullRequestComment
-        body: create-addstudent-activity.md
+        body: 06_create-addstudent-activity.md
         file: src/App.jsx
         position: 38
         pullRequest: '%actions.metaPR2.data.number%'
+
+  # Step 7: Create a method
   - title: Create a method
     description: Create a method to add students to our state
     event: push
@@ -218,13 +229,15 @@ steps:
         right: '%actions.fileContents%'
         else:
           - type: respond
-            with: bad-function.md
+            with: 07_bad-function.md
             issue: Changes
       - type: createPullRequestComment
-        body: bind-function-activity.md
+        body: 07_bind-function-activity.md
         file: src/App.jsx
         position: 20
         pullRequest: '%actions.metaPR2.data.number%'
+
+  # Step 8: Bind a method
   - title: Bind a method
     description: Bind the addStudents method to our class
     event: push
@@ -247,21 +260,23 @@ steps:
         right: '%actions.fileContents%'
         else:
           - type: respond
-            with: bad-uncomment.md
+            with: 04_bad-uncomment.md
             issue: Changes
       - type: respond
-        with: 04-callbackfunctions.md
+        with: 08_callbackfunctions.md
         issue: Changes
       - type: createPullRequestComment
-        body: passing-functions-activity.md
+        body: 08_passing-functions-activity.md
         file: src/App.jsx
         position: 52
         pullRequest: '%actions.metaPR2.data.number%'
       - type: createPullRequestComment
-        body: change-props-students-activity.md
+        body: 08_change-props-students-activity.md
         file: src/App.jsx
         position: 68
         pullRequest: '%actions.metaPR2.data.number%'
+
+  # Step 9: Pass functions as props
   - title: Pass functions as props
     description: Learn how to pass data back to parent components
     event: push
@@ -284,13 +299,15 @@ steps:
         right: '%actions.fileContents%'
         else:
           - type: respond
-            with: bad-replace.md
+            with: 09_bad-replace.md
             issue: Changes
       - type: createPullRequestComment
-        body: uncomment-grades-activity.md
+        body: 09_uncomment-grades-activity.md
         file: src/App.jsx
         position: 78
         pullRequest: '%actions.metaPR2.data.number%'
+
+  # Step 10: Get approval
   - title: Get your pull request approved
     event: push
     description: Let's confirm you made the right changes
@@ -309,18 +326,20 @@ steps:
         right: '%actions.fileContents%'
         else:
           - type: respond
-            with: bad-uncomment.md
+            with: 04_bad-uncomment.md
             issue: Changes
       - type: createReview
         event: APPROVE
-        body: approve.md
+        body: 10_approve.md
         pullRequest: Changes
+
+  # Step 11: Merge pull request
   - title: Merge your pull request
     event: pull_request.closed
     description: Congrats on finishing the course!
     video: https://www.youtube.com/embed/uJGGBhdivYQ
     actions:
       - type: respond
-        with: 05-congrats.md
+        with: 11_congrats.md
         issue: Changes
 

course-details.md

@@ -1,32 +1,28 @@
-## Welcome to React!
+# Welcome to React
 
-Congratulations on taking some of your first steps into full stack development! 
+Congratulations on taking some of your first steps into full stack development.
 
 So why did you decide to click and join this course? Ideally, you are a learner who:
 
 - Understands HTML tags
 - Understands classes and methods in JavaScript
 - Understands Git and GitHub
 
-If you understand the topics above, you can start learning modern frontend development with React!
+If you understand the topics above, you can start learning modern frontend development with React.
 
 So why do we learn React?
 
-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.
+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.
 
 ### What we will be building
 
-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.
+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.
 
-You will be able to add assignments
+You will be able to add assignments:
 ![Finished Assignments](https://user-images.githubusercontent.com/25253905/61293228-11f26580-a788-11e9-90ac-9612c2bddf6b.png)
 
-You will be able to add students
+You will be able to add students:
 ![Finished Students](https://user-images.githubusercontent.com/25253905/61293769-46b2ec80-a789-11e9-88b3-c660f436f5bf.png)
 
-
-You will be able to assign grades to those students for each assignment
+You will be able to assign grades to those students for each assignment:
 ![Finished Grades](https://user-images.githubusercontent.com/25253905/61295315-9810ab00-a78c-11e9-8bcb-f3e3bb87b2be.png)
-
-### Steps
-Go ahead and join the course!

responses/00_open-pr.md

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

responses/00_setup.md

@@ -0,0 +1,45 @@
+# Set up a React Application Locally
+
+Hello and welcome!
+
+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.
+
+### What's in our React App
+
+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.
+
+![File Structure](https://user-images.githubusercontent.com/25253905/61294641-28e68700-a78b-11e9-9bc1-ff468312ca8b.png)
+
+##### `package.json`
+
+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.
+
+##### `public/`
+
+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.
+
+##### `src`
+
+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.
+
+## Step 1: Set up the project locally
+
+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.
+
+### :keyboard: Activity: Clone the repository and install Node
+
+1. Open your terminal
+    - If you're using a Windows operating system, we recommend downloading and using [git bash](https://git-scm.com/downloads) as your terminal
+2. Change directories into a location where you want to keep this project
+3. Clone this repository: `git clone {{ repoUrl }}`
+4. Move into the repository's directory: `cd intro-react`
+5. Checkout to the `changes` branch: `git checkout changes`
+6. Open the `intro-react` folder in your favorite text editor
+7. Check for Node installation: `node -v`
+8. [Install Node](https://nodejs.org/en/download/) if it is not installed
+9. In your repository folder, install the necessary packages: `npm install`
+10. Start the React Application: `npm start`
+
+Your browser should automatically open `http://localhost:3000/`, and you should see our barebones gradebook application.
+
+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.