Merge pull request #34 from githubtraining/fix-responses

fixed response formats

Author: Parth Shah

responses/00-setup.md

@@ -1,53 +1,42 @@
-### Activity - Clone the repository and Install Node
-
-Let's go ahead and get started.
-
-First, clone this repository.
-
-In your terminal, in a folder where you would like to keep this project, clone the repository, and do the following:
-
-```
-cd intro-react
-git checkout changes
-```
-
-Next, open the folder in your favorite text editor. We reccommend VSCode.
-
-Great, now if you don't have Node installed on your computer, go ahead and [install it](https://nodejs.org/en/download/)!
-
-Awesome!
-
-### Current Functionality 
-
-Now, inside your repository folder, run the following:
-
-```
-npm install
-npm start
-```
-
-Your browser should open `http://localhost:3000/`
-
-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.
 
+# Set up a React Application Locally
 
 ### So what's in our React App
-Let's take a look of what our React App looks like right now.
+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
-
-![package](https://user-images.githubusercontent.com/25253905/61294748-5e8b7000-a78b-11e9-9475-163d8c7bc6b3.png)
 
+##### package.json
 This 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
 
-This directory contains our `index.html` which directs us to the rest of the web application that requires additional processing.
+This directory contains our `index.html`. That file directs us to the rest of the web application that requires additional processing.
 
 ##### src
 
-This is where pretty much ALL 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 as well as functions and classes. Take a look at `App.jsx`. Some of that stuff might look familiar from `html`, like thos `<div/>` tags. Don't worry, we will get to that stuff in a bit.
+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 as well as functions and classes. Take a look at `App.jsx`. Some of that stuff might look familiar from `html`, like those `<div/>` tags. Don't worry, we will get to that stuff in a bit.
+
+## Step 1: Set up 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
+2. Move into a location where you want to keep this project
+3. Clone this repository
+4. Move into the repository: `cd intro-react`
+5. Checkout to the `changes` branch: `git checkout changes`
+6. Open the `intro-react` folder in your favorite text editor 
+   - We recommend VSCode
+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.
 

responses/01-components.md

@@ -1,12 +1,11 @@
-# Content
-
-## Building Blocks of ~~Life~~ Apps -  Components
+# Building Blocks of ~~Life~~ Apps -  Components
 
 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?
 
+### Components in `App.jsx`
 ![Assignments Solution](https://user-images.githubusercontent.com/25253905/61293228-11f26580-a788-11e9-90ac-9612c2bddf6b.png)
 
-In our [solution](https://githubtraining.github.io/react-solution/), our assignments pages 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).
+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).
 
 Take a look at the following line in `App.jsx`. 
 

responses/02-props.md

@@ -1,5 +1,3 @@
-# Content
-
 ## How to Talk to your Child - Props
 
 Alright, so we established that components are awesome, but what about reusable components with different properties? 
@@ -10,6 +8,7 @@ Hmmm, but how do we pass different values to a component? We do so by passing pr
 
 We will get a little deeper into that in a bit. 
 
+### Props used for Assignments and Students Pages
 ![Finished Assignments Page](https://user-images.githubusercontent.com/25253905/61293228-11f26580-a788-11e9-90ac-9612c2bddf6b.png)
 
 ![Finished Students Page](https://user-images.githubusercontent.com/25253905/61293769-46b2ec80-a789-11e9-88b3-c660f436f5bf.png)

responses/add-state-variable-activity.md

@@ -1,6 +1,4 @@
-# Activity
-
-### Add a state variable
+### Step 6 - Add a state variable
 
 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 = {.....}`.
 
@@ -10,19 +8,15 @@ Currently, in `App`, we have three state variables:
 - `assignments` - This stores the list of assignments. It is a state variable because the list changes every time a new assignment is added.
 - `grades` - This should store the grade for each student. However, we have no way to store students, so let's fix that!
 
-Add a state variable to `App` and name it `students`. Set it equal to an empty array. Make sure to add the comma! 
-
-### Run your code
-Run your code with `npm start` to make sure there are no errors.
-
-
-### Push your code
-
-```
-git add src/App.jsx
-git commit -m "using students state variable and setting state"
-git push origin changes
+### :keyboard: Activity: Add a state variable to `App.jsx`
 
-```
+1. Add a state variable to `App` and name it `students`. Set it equal to an empty array. Make sure to add the comma! 
+2. Run your code with `npm start` to make sure there are no errors.
+3. Commit and push your code to the `changes` branch:
+    ```
+    git add src/App.jsx
+    git commit -m "import list component"
+    git push origin changes
+    ```
 
-I'll respond after you push.
+    I'll respond after you push.

responses/bind-function-activity.md

@@ -1,22 +1,18 @@
-# Activity
-
-### Bind the function
+### Step 8 - Binding a function
 
 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.
 
-Go ahead and uncomment this line.
-
-### Run your code
-Run your code with `npm start` to make sure there are no errors.
-
-
-### Push your code
+Go ahead and uncomment the line to bind `addStudent` to `App`.
 
-```
-git add src/App.jsx
-git commit -m "using students state variable and setting state"
-git push origin changes
+### :keyboard: Activity: Bind `addStudent` to `App`
 
-```
+1. Uncomment the line to bind `addStudent` to `App`.
+2. Run your code with `npm start` to make sure there are no errors.
+3. Commit and push your code to the `changes` branch:
+    ```
+    git add src/App.jsx
+    git commit -m "import list component"
+    git push origin changes
+    ```
 
-I'll respond after you push.
+    I'll respond after you push.

responses/create-addstudent-activity.md

@@ -1,24 +1,16 @@
-# Activity
+## Step 7 -  Create an `addStudent` method
 
-### Create `addStudent` Function
+Now that we see how it works with assignments, let's try it with students! We will create an `addStudent` method to add students the same way we add assignments.
 
-Now that we see how it works with assignments, let's try it with students! 
+### :keyboard: Activity: Import a List component to `App.jsx`
 
-create a method called `addStudent` below the comment
+1. Create a method called `addStudent` below the comment. `addStudent` should take `studentName` as a parameter and then concat that `studentName` to the end of `students` list that we created earlier. 
+2. Run your code with `npm start` to make sure there are no errors.
+3. Commit and push your code to the `changes` branch:
+    ```
+    git add src/App.jsx
+    git commit -m "import list component"
+    git push origin changes
+    ```
 
-`addStudent` should take `studentName` as a parameter and then concat that `studentName` to the end of `students` list that we created earlier. 
-
-### Run your code
-Run your code with `npm start` to make sure there are no errors.
-
-
-### Push your code
-
-```
-git add src/App.jsx
-git commit -m "using students state variable and setting state"
-git push origin changes
-
-```
-
-I'll respond after you push.
+    I'll respond after you push.

responses/header-component-activity.md

@@ -1,31 +1,23 @@
-# Activity
+## Step 2: Adding components
 
-### Add a header component
-Let's add a couple of child components and give our app a header.
+Let's add a child component and give our app a header. At the end of the step, your app should like the following:
 
-On line 92 in `App.jsx`, replace the line where it says to replace with this header component:
-
-```jsx
-<h3 className="Box-title d-flex flex-justify-center">GradeBook</h3>
-```
-
-### Run your code
-To run your code, inside your repo folder in your termainal run `npm start`.
-
-### What your code should look like
-
-Your app should look like this!
 ![App with header](https://user-images.githubusercontent.com/25253905/61294086-eb352e80-a789-11e9-96ab-8b6cb09b3791.png)
 
-### Push your code
-Let's push your code to GitHub
+### :keyboard: Activity: Add an `h3` component to `App.jsx`
+
+1. On line 92 in `App.jsx`, replace the line where it says to replace with this header component:
 
-Run the following lines inside your repo folder in your terminal.
+    ```jsx
+    <h3 className="Box-title d-flex flex-justify-center">GradeBook</h3>
+    ```
+2. Inside your repository folder in the terminal, run your code: `npm start`.
+3. Commit and push your code to the `changes` branch:
+    ```
+    git add src/App.jsx
+    git commit -m "added a header"
+    git push origin changes
+    ```
 
-```
-git add src/App.jsx
-git commit -m "added a header"
-git push origin changes
-```
+    I'll respond after you push.
 
-I'll respond after you push.

responses/import-child-component-activity.md

@@ -1,28 +1,21 @@
-# Activity
-
-### Import a Child Component
+## Step 3 -  Import a Child Component
 
 Navigate to `List.jsx`. You'll see that we made our own component, `List`. 
 
 Let's go ahead and import that component.
 
-At the top of `App.jsx`, replace the line with
-
-```js
-import List from "./List";
-```
-
-Scroll down for the next step.
-
-### Push your code
-Let's push your code to GitHub
+### :keyboard: Activity: Import a List component to `App.jsx`
 
-Run the following lines inside your repo folder in your terminal.
+1. At the top of `App.jsx`, replace the line with
 
-```
-git add src/App.jsx
-git commit -m "import list component"
-git push origin changes
-```
+    ```js
+    import List from "./List";
+    ```
+2. Commit and push your code to the `changes` branch:
+    ```
+    git add src/App.jsx
+    git commit -m "import list component"
+    git push origin changes
+    ```
 
-I'll respond after you push.
+    I'll respond after you push.

responses/replace-title-activity.md

@@ -1,26 +1,20 @@
-# Activity
-
-### Replace the title prop in `List.jsx`
+## Step 5 - Adding a prop
 
 But what does the `List` component do with this information? Let's take a look. 
 
 Go to `List.jsx`. In the `render` method, in our input tag, you see that we set our `placeholder` to `this.props.placeholder`, and then at the bottom of our `render` method, we loop through out `this.props.currList`, to show each item in the list that we pass. Adding `this.props` tells the component to look for that property that was passed to it.
 
-Let's go ahead and replace that title with a prop. In our `render` method in `List.jsx`, on line 31, where it says to replace the title with a prop, replace that with `{this.props.title}`.
-
-### Run your code
-
-To run your code, move inside your repo folder in your terminal and run `npm start`
-
-### Push your code
-Awesome! We are using props! You already learned so much! 
+Let's go ahead and replace that title with a prop. 
 
-To push your code to Github, run the following lines inside the repo folder in your terminal.
+### :keyboard: Activity: Replace the title prop in `List.jsx`
 
-```
-git add src/List.jsx
-git commit -m "using props for List component"
-git push origin changes
-```
+1. In our `render` method in `List.jsx`, on line 31, where it says to replace the title with a prop, replace that with `{this.props.title}`
+2. To run your code, move inside your repo folder in your terminal and run `npm start`
+3. Commit and push your code to the `changes` branch:
+    ```
+    git add src/App.jsx
+    git commit -m "import list component"
+    git push origin changes
+    ```
 
-I'll respond after you push.
+    I'll respond after you push.