delilahrois · December 7, 2021 15:53 · Dec 7, 2021 · Dec 7, 2021 · Dec 7, 2021 · Dec 7, 2021
diff --git a/React_Router_prework.md b/React_Router_prework.md
@@ -61,6 +61,7 @@ Any code that uses a React-Router-provided component must be wrapped in a _route
 4. What does the `<Outlet />` component do?
 
 
+  Outlet is used for nesting routes and making sure that the parent route knows about the children.
 
 #### Route Changers
 5. What does the `<Link />` component do? How does a user interact with it?

diff --git a/React_Router_prework.md b/React_Router_prework.md
@@ -35,20 +35,40 @@ Any code that uses a React-Router-provided component must be wrapped in a _route
 
 
  The Route component renders something based on the url in the address bar. For example, it will render "App" or "Home" if the url matches the given ("/").
+
+ Route has 3 props that can be used to determine what will be rendered: component, render, and children.
+
+ For component: 
+ `<Route>
+    exact path="/cheese"
+    component={Cheese}
+ </Route>`
+ Cheese will be rendered when the url matches "/cheese"
+
+ Render can be used for inline rendering and passing in extra props:
+ `<Route>
+    exact path="/cheese"
+    render={() => (<div>List of Items</div>)} 
+ </Route>`
+
+
 
 3. What does the `<Routes />` component do?
 
 
-  The Routes component is a wrapper for the Route components. 
+  The Routes component is a wrapper for the Route components?
 
 4. What does the `<Outlet />` component do?
 
 
+
 #### Route Changers
 5. What does the `<Link />` component do? How does a user interact with it?
 
 
-  The Link component holds links that the user can click on to navigate to the given address. It renders an <a> tag with an href behind the scenes, making it fully accessible for people using screen readers. 
+  The Link component holds links that the user can click on (or select using the keyboard) to navigate to the given address. It renders an <a> tag with an href behind the scenes, making it fully accessible for people using screen readers. 
 
 6. What does the `<NavLink />` component do? How does a user interact with it?
 
+
+  NavLink is a special version of the Link component that adds styling to the rendered element when the url matches the given address. 
diff --git a/React_Router_prework.md b/React_Router_prework.md
@@ -27,21 +27,28 @@ Any code that uses a React-Router-provided component must be wrapped in a _route
 
 1. What is a `<BrowserRouter />`?
 
+
   BrowserRouter uses the history API object generated by {} to keep the user interface in sync with the URL currently in the address bar. 
 
 #### Route Matchers
 2. What does the `<Route />` component do? 
-  The Route component renders something based on the url in the address bar. For example, it will render "App" or "Home" if the url matches the given ("/").
+
+
+ The Route component renders something based on the url in the address bar. For example, it will render "App" or "Home" if the url matches the given ("/").
 
 3. What does the `<Routes />` component do?
+
+
   The Routes component is a wrapper for the Route components. 
 
 4. What does the `<Outlet />` component do?
 
 
 #### Route Changers
 5. What does the `<Link />` component do? How does a user interact with it?
-   The Link component holds links that the user can click on to navigate to the given address. It renders an <a> tag with an href behind the scenes, making it fully accessible for people using screen readers. 
+
+
+  The Link component holds links that the user can click on to navigate to the given address. It renders an <a> tag with an href behind the scenes, making it fully accessible for people using screen readers. 
 
 6. What does the `<NavLink />` component do? How does a user interact with it?
 
diff --git a/React_Router_prework.md b/React_Router_prework.md
@@ -27,11 +27,21 @@ Any code that uses a React-Router-provided component must be wrapped in a _route
 
 1. What is a `<BrowserRouter />`?
 
+  BrowserRouter uses the history API object generated by {} to keep the user interface in sync with the URL currently in the address bar. 
+
 #### Route Matchers
 2. What does the `<Route />` component do? 
+  The Route component renders something based on the url in the address bar. For example, it will render "App" or "Home" if the url matches the given ("/").
+
 3. What does the `<Routes />` component do?
-4. What does the `<Outlet />` component do?
+  The Routes component is a wrapper for the Route components. 
 
+4. What does the `<Outlet />` component do?
+
+
 #### Route Changers
-9. What does the `<Link />` component do? How does a user interact with it?
-10. What does the `<NavLink />` component do? How does a user interact with it?
+5. What does the `<Link />` component do? How does a user interact with it?
+   The Link component holds links that the user can click on to navigate to the given address. It renders an <a> tag with an href behind the scenes, making it fully accessible for people using screen readers. 
+
+6. What does the `<NavLink />` component do? How does a user interact with it?
+
diff --git a/React_Router_prework.md b/React_Router_prework.md
@@ -14,7 +14,7 @@ You will not be turning this in; it's for your own understanding/learning/benefi
 React Router is a library that allows us to make our single page React applications mimic the behavior of multipage apps.
 It provides the ability to use browser history, allowing users to navigate with forward / back buttons and bookmark links to specific views of the app. Most modern sites use some form of routing. React Router exposes this functionality through a series of components. Let's start by looking at the overall structure of an app using router:
 
-**Read through [this guide](https://reactrouter.com/docs/en/v6/getting-started/tutorial).** Don't worry about completing the tutorial -- You can just read through it. We'll be going through a hands on example in class together tomorrow!
+**Read through [this guide](https://reactrouter.com/docs/en/v6/getting-started/overview).** 
 
 #### Router Components
 React Router provides a series of helpful components that allow our apps to use routing. These can be split into roughly 3 categories:  

diff --git a/React_Router_prework.md b/React_Router_prework.md
@@ -16,22 +16,22 @@ It provides the ability to use browser history, allowing users to navigate with
 
 **Read through [this guide](https://reactrouter.com/docs/en/v6/getting-started/tutorial).** Don't worry about completing the tutorial -- You can just read through it. We'll be going through a hands on example in class together tomorrow!
 
+#### Router Components
+React Router provides a series of helpful components that allow our apps to use routing. These can be split into roughly 3 categories:  
+- Routers
+- Route Matcher
+- Route Changers
+
 #### Routers
 Any code that uses a React-Router-provided component must be wrapped in a _router component_. There are lots of router components we can use, but we'll focus on one in particular. Let's look into the docs to learn more.
 
-3. What is a `<BrowserRouter />`?
-
-4. Why would we use `<BrowserRouter />` in our apps?
+1. What is a `<BrowserRouter />`?
 
 #### Route Matchers
-5. What does the `<Route />` component do? 
-6. How does the `<Route />` component check whether it should render something?
-
-7. What does the `<Switch />` component do?
-8. How does it decide what to render?
+2. What does the `<Route />` component do? 
+3. What does the `<Routes />` component do?
+4. What does the `<Outlet />` component do?
 
 #### Route Changers
 9. What does the `<Link />` component do? How does a user interact with it?
-10. What does the `<NavLink />` component do? How does a user interact with it?
-
-11. What does the `<Navigation />` component do?
+10. What does the `<NavLink />` component do? How does a user interact with it?
diff --git a/React_Router_prework.md b/React_Router_prework.md
@@ -14,7 +14,7 @@ You will not be turning this in; it's for your own understanding/learning/benefi
 React Router is a library that allows us to make our single page React applications mimic the behavior of multipage apps.
 It provides the ability to use browser history, allowing users to navigate with forward / back buttons and bookmark links to specific views of the app. Most modern sites use some form of routing. React Router exposes this functionality through a series of components. Let's start by looking at the overall structure of an app using router:
 
-**Read through [this guide and tutorial](https://reactrouter.com/docs/en/v6/getting-started/tutorial).** You may choose to complete the tutorial, but it's not necessary. You can just read through it. We'll be going through a hands on example in class together tomorrow!
+**Read through [this guide](https://reactrouter.com/docs/en/v6/getting-started/tutorial).** Don't worry about completing the tutorial -- You can just read through it. We'll be going through a hands on example in class together tomorrow!
 
 #### Routers
 Any code that uses a React-Router-provided component must be wrapped in a _router component_. There are lots of router components we can use, but we'll focus on one in particular. Let's look into the docs to learn more.

diff --git a/React_Router_prework.md b/React_Router_prework.md
@@ -1,5 +1,5 @@
 # React Router Prework
-This gist contains a short assignment I'd like everyone to complete before our formal lesson. 
+This gist contains a short assignment we'd like everyone to complete before our formal lesson. 
 The prework involves reading some of the React Router documentation, and will allow us to keep the lesson more hands on. 
 
 ## Instructions
@@ -12,18 +12,9 @@ You will not be turning this in; it's for your own understanding/learning/benefi
 
 ### Router Overview
 React Router is a library that allows us to make our single page React applications mimic the behavior of multipage apps.
-It provides the ability to use browser history, allowing users to navigate with forward / back buttons and bookmark links to specific views of the app. Most modern sites use some form of routing.
-React Router exposes this functionality through a series of components. Let's start by looking at the overall structure of an app using router:
+It provides the ability to use browser history, allowing users to navigate with forward / back buttons and bookmark links to specific views of the app. Most modern sites use some form of routing. React Router exposes this functionality through a series of components. Let's start by looking at the overall structure of an app using router:
 
-1. Take a look at the <a href="https://reacttraining.com/react-router/web/guides/quick-start" target="_blank">quick start</a> page of the React Router docs. Take note of the syntax and organization of the page. No worries if this looks unclear right now! (nothing to answer here)
-
-2. What package do we need to install to use React Router? 
-
-### Router Components
-React Router provides a series of helpful components that allow our apps to use routing. These can be split into roughly 3 categories:
-- Routers
-- Route Matcher
-- Route Changers
+**Read through [this guide and tutorial](https://reactrouter.com/docs/en/v6/getting-started/tutorial).** You may choose to complete the tutorial, but it's not necessary. You can just read through it. We'll be going through a hands on example in class together tomorrow!
 
 #### Routers
 Any code that uses a React-Router-provided component must be wrapped in a _router component_. There are lots of router components we can use, but we'll focus on one in particular. Let's look into the docs to learn more.
@@ -43,4 +34,4 @@ Any code that uses a React-Router-provided component must be wrapped in a _route
 9. What does the `<Link />` component do? How does a user interact with it?
 10. What does the `<NavLink />` component do? How does a user interact with it?
 
-11. What does the `<Redirect />` component do?
+11. What does the `<Navigation />` component do?
diff --git a/React_Router_prework.md b/React_Router_prework.md
@@ -0,0 +1,46 @@
+# React Router Prework
+This gist contains a short assignment I'd like everyone to complete before our formal lesson. 
+The prework involves reading some of the React Router documentation, and will allow us to keep the lesson more hands on. 
+
+## Instructions
+1. Fork this gist
+2. On your own copy, go through the listed readings and answer associated questions
+
+You will not be turning this in; it's for your own understanding/learning/benefit 😁
+
+## Questions / Readings
+
+### Router Overview
+React Router is a library that allows us to make our single page React applications mimic the behavior of multipage apps.
+It provides the ability to use browser history, allowing users to navigate with forward / back buttons and bookmark links to specific views of the app. Most modern sites use some form of routing.
+React Router exposes this functionality through a series of components. Let's start by looking at the overall structure of an app using router:
+
+1. Take a look at the <a href="https://reacttraining.com/react-router/web/guides/quick-start" target="_blank">quick start</a> page of the React Router docs. Take note of the syntax and organization of the page. No worries if this looks unclear right now! (nothing to answer here)
+
+2. What package do we need to install to use React Router? 
+
+### Router Components
+React Router provides a series of helpful components that allow our apps to use routing. These can be split into roughly 3 categories:
+- Routers
+- Route Matcher
+- Route Changers
+
+#### Routers
+Any code that uses a React-Router-provided component must be wrapped in a _router component_. There are lots of router components we can use, but we'll focus on one in particular. Let's look into the docs to learn more.
+
+3. What is a `<BrowserRouter />`?
+
+4. Why would we use `<BrowserRouter />` in our apps?
+
+#### Route Matchers
+5. What does the `<Route />` component do? 
+6. How does the `<Route />` component check whether it should render something?
+
+7. What does the `<Switch />` component do?
+8. How does it decide what to render?
+
+#### Route Changers
+9. What does the `<Link />` component do? How does a user interact with it?
+10. What does the `<NavLink />` component do? How does a user interact with it?
+
+11. What does the `<Redirect />` component do?
No results found