Adding lab

react-components-as-routes-lab-onl01-seng-pt-041320/.babelrc

@@ -0,0 +1,3 @@
+ {
+   "presets": ["airbnb", "react", "env", "stage-1"]
+ }

react-components-as-routes-lab-onl01-seng-pt-041320/.editorconfig

@@ -0,0 +1,13 @@
+root = true
+
+[*]
+end_of_line = lf
+indent_style = space
+insert_final_newline = true
+
+[*{.java,.py}]
+indent_size = 2
+
+[*.{js,json,rb}]
+charset = utf-8
+indent_size = 2

react-components-as-routes-lab-onl01-seng-pt-041320/.gitignore

@@ -0,0 +1,16 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+node_modules
+
+# testing
+coverage
+
+# production
+build
+
+# misc
+.DS_Store
+.env
+npm-debug.log
+*yarn.lock

react-components-as-routes-lab-onl01-seng-pt-041320/.learn

@@ -0,0 +1,8 @@
+tags:
+  - javascript
+  - react
+  - redux
+languages:
+  - javascript
+resources:
+  - 1

react-components-as-routes-lab-onl01-seng-pt-041320/CONTRIBUTING.md

@@ -0,0 +1,37 @@
+# Contributing to Learn.co Curriculum
+
+We're really excited that you're about to contribute to the [open curriculum](https://learn.co/content-license) on [Learn.co](https://learn.co). If this is your first time contributing, please continue reading to learn how to make the most meaningful and useful impact possible.
+
+## Raising an Issue to Encourage a Contribution
+
+If you notice a problem with the curriculum that you believe needs improvement
+but you're unable to make the change yourself, you should raise a Github issue
+containing a clear description of the problem. Include relevant snippets of
+the content and/or screenshots if applicable. Curriculum owners regularly review
+issue lists and your issue will be prioritized and addressed as appropriate.
+
+## Submitting a Pull Request to Suggest an Improvement
+
+If you see an opportunity for improvement and can make the change yourself go
+ahead and use a typical git workflow to make it happen:
+
+* Fork this curriculum repository
+* Make the change on your fork, with descriptive commits in the standard format
+* Open a Pull Request against this repo
+
+A curriculum owner will review your change and approve or comment on it in due
+course.
+
+# Why Contribute?
+
+Curriculum on Learn is publicly and freely available under Learn's
+[Educational Content License](https://learn.co/content-license). By
+embracing an open-source contribution model, our goal is for the curriculum
+on Learn to become, in time, the best educational content the world has
+ever seen.
+
+We need help from the community of Learners to maintain and improve the
+educational content. Everything from fixing typos, to correcting
+out-dated information, to improving exposition, to adding better examples,
+to fixing tests—all contributions to making the curriculum more effective are
+welcome.

react-components-as-routes-lab-onl01-seng-pt-041320/LICENSE.md

@@ -0,0 +1,7 @@
+#Learn.co Educational Content License
+
+Copyright (c) 2016 Flatiron School, Inc
+
+The Flatiron School, Inc. owns this Educational Content. However, the Flatiron School supports the development and availability of educational materials in the public domain. Therefore, the Flatiron School grants Users of the Flatiron Educational Content set forth in this repository certain rights to reuse, build upon and share such Educational Content subject to the terms of the Educational Content License set forth [here](http://learn.co/content-license) (http://learn.co/content-license). You must read carefully the terms and conditions contained in the Educational Content License as such terms govern access to and use of the Educational Content.
+
+Flatiron School is willing to allow you access to and use of the Educational Content only on the condition that you accept all of the terms and conditions contained in the Educational Content License set forth [here](http://learn.co/content-license) (http://learn.co/content-license).  By accessing and/or using the Educational Content, you are agreeing to all of the terms and conditions contained in the Educational Content License.  If you do not agree to any or all of the terms of the Educational Content License, you are prohibited from accessing, reviewing or using in any way the Educational Content.

react-components-as-routes-lab-onl01-seng-pt-041320/README.md

@@ -0,0 +1,104 @@
+# React Components as Routes Lab
+
+## Overview
+
+In this lab, you will create a simple Client-Side routing application with
+__React Router__.
+
+## Objectives
+
+* Practice building an application with __React Router__
+* Access routes using a Navbar with matched routes
+* Visit different "views" in the application by accessing different routes
+
+## React Router App
+
+In this lab we are going to build out an application that has routes for a Home
+Page, Actors Page, Movies Page and Directors Page. Our goal is to provide routes
+and links for these 4 pages.
+
+This is what our app should look like when we are done with this lab:
+
+* [Home Page](https://s3.amazonaws.com/learn-verified/react-router-lab-home-page.png)
+* [Movies Page](https://s3.amazonaws.com/learn-verified/react-router-lab-movies-page.png)
+* [Directors Page](https://s3.amazonaws.com/learn-verified/react-router-lab-directors-page.png)
+* [Actors Page](https://s3.amazonaws.com/learn-verified/react-router-lab-actors-page.png)
+
+Let's work through this one component at a time
+
+### Components
+
+Our `src` folder contains the following:
+
+```text
+src/
+├── data.js
+├── index.js
+|-- containers/
+|   |-- App.js
+└── components/
+    ├── Actors.js
+    ├── Directors.js
+    ├── Home.js
+    ├── Movies.js
+    └── NavBar.js
+```
+
+All of the file and module imports are done for you, so you just need to focus
+on the JSX for these components.
+
+#### `Index.js`
+
+Our `index.js` file is completed for us. It loads App as the top level component.
+
+#### `data.js`
+
+This file contains seed data for __Actors, Movies & Directors__
+
+## Component Info
+
+#### `App`
+
+This component already contains a `Router` wrapper where we'll include our
+particular routes. Inside this element, we'll need to render our `Navbar` and 4
+__React Router__ `Route` components with paths to __/, /movies, /directors &
+/actors__ and rendering the respective components. When a user visits the root
+URL, they should see the `Home` component.
+
+**Note**: Since a `Router` wrapper can only wrap one child element, use a `div` to
+wrap the `Navbar` and `Route`s. This allows us to apply a CSS class at the App
+component level.
+
+#### `Navbar`
+
+This component needs to render 4 `<NavLink>` components. They will be for __/,
+/movies, /directors, /actors__ <-- in this order(test checks for this).
+
+#### `Home`
+
+This component should render the text `Home Page` in an `<h1>`.
+
+#### `Movies`
+
+This component should render the text `Movies Page` in an `<h1>`, and make a new `<div>` for
+each movie. The `<div>` should contain the movie's title, time and a `<ul>` with a list of its
+genres.
+
+#### `Directors`
+
+This component should render the text `Directors Page` in an `<h1>`, and make a new `<div>`
+for each director. The `<div>` should contain the director's name and a `<ul>` with a list
+of their movies.
+
+#### `Actors`
+
+This component should render the text `Actors Page` in an `<h1>`, and make a new `<div>` for
+each actor. The `<div>` should contain the actor's name and a `<ul>` with a list of their
+movies. 
+
+> Note: The tests will count how many `<div>`s are nested inside your `Movies`, `Directors`, and `Actors` components. So to get tests to pass, you must create _exactly one_ `<div>` for each movie, director, or actor, and no additional nested `<div>`s in those components. 
+
+## Resources
+
+* [React Router](https://github.com/ReactTraining/react-router)
+* [React Router Tutorial](https://reacttraining.com/react-router/web/guides/quick-start)

react-components-as-routes-lab-onl01-seng-pt-041320/bin/debug-ide

@@ -0,0 +1,7 @@
+#!/bin/sh
+
+trap "trap - SIGTERM && kill -- -$$" SIGINT SIGTERM EXIT
+
+../node_modules/.bin/node-inspector --hidden node_modules/ --hidden test/ --web-host $(/sbin/ifconfig eth0 | grep "inet addr" | awk -F: '{print $2}' | awk '{print $1}') --web-port $UID & ../node_modules/.bin/mocha --debug-brk --watch
+
+trap - SIGINT SIGTERM EXIT

react-components-as-routes-lab-onl01-seng-pt-041320/index.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Components as Routes Lab</title>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, minimum-scale=1.0">
+    <meta name="author" content="Mark Thomas">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
+  </head>
+  <body>
+    <div id="root">
+      <h1>
+        Loading!
+      </h1>
+    </div>
+    <script src='http://localhost:7700/dist/app.js'></script>
+  </body>
+</html>