React lesson 3 (#142)

* Add lesson outline

* Add resources

* Use updated API

* Add tasks to challenge #3

react/lesson3.md

@@ -1,36 +1,73 @@
 # React 3
 
-**What we will learn today?**
-- React Router
-- More testing
+### What we will learn today?
 
-# Routing
+- Fetching data into components
+- Installing React components from [npm](https://www.npmjs.com/search?q=react)
+- How to build an app using [react-router](https://www.npmjs.com/package/react-router)
 
-React can be used as a `Single Page Application`, i.e. providing full experience of an application with many views within one page with several components.
+## Challenge 1: render a list of albums
 
-However it is still possible to support `routing` by associating and displaying different components for different URLs.
+- Go to https://github.com/djgrant/beyonce-app and follow the instructions to clone and install the app.
 
-Routing is usually achieved in React with a library such as `React Router`. You can find more information about this library with examples [here](https://github.com/ReactTraining/react-router).
+- You'll find in the components folder an `Album` component already written for you to use, and an `Albums` component that you need to complete
 
-[Exercise: Use React Router](https://github.com/reactjs/react-router-tutorial/tree/master/lessons/01-setting-up)
+- In the `Albums` component fetch an array of albums from https://gist.githubusercontent.com/rarmatei/f5ae92ac93d9716affab822a3f54f95b/raw/dc014926ed07a10404934d25bfcea382daf53a7f/beyonce-albums.json.
 
-# More testing
+- Using the data returned from the API, render an array of `Album` components, passing in the necessary props.
 
-# HomeWork
+Things you will need to know:
+- Fetch
+  - Example: http://jsbin.com/qafekejato/edit?js,console  
+  - Tutorial: https://css-tricks.com/using-fetch/
+- lifecycle methods
+  - Tutorial/Exmaple: https://github.com/CodeYourFuture/syllabus/blob/scotland/react/lesson2.md#talking-to-an-api
+- State
+  - Example: https://codesandbox.io/s/q83vz50yl9
+  - Tutorial: https://reactjs.org/docs/state-and-lifecycle.html
 
-Continue building last week's app. As we get familiar with retrieving data and displaying it, we take our project into the next step.
 
-We want to break the app into different pages which the users can navigate around (with the Back/Forward button or typing a url) without losing context.
+## Challenge 2: add routes to your app
 
-The App will consist of three pages:
+In this challenge we'll split your app into 3 pages.
 
-1. Home: displays a list of all areas (url: / )
-2. Area: shows the organisations in a specific area (url: /area/{areaName} )
-3. Organisation View: shows once specific organisation information (url: /organisations/{organisationName})
+- In your app install react-router by running `npm install react-router --save`
 
+- Open https://codesandbox.io/s/pj6v9x94x0 to see a basic example of a React app using react-router.
 
-In order to implement this behaviour, we will use [React-Router](https://github.com/ReactTraining/react-router) library.
+- Copy the `react-router` imports over to your app
 
-Bonus:
-* Implement a fuzzy search functionality in the Area page where users can search by name or website etc..
-* Use a library called underscore, find it online, read its documentation and npm install it. And use it!
+- Wrap your app in a `<Router />` component
+
+- Move the 3 sections in your app into `<Route>`s
+
+- Add a navigation bar to your app with links to the routes you've created
+
+- Move the content of each Route into individual files, and import them in `index.js` using the  `<Route>` `component` prop.
+
+
+## Challenge 3: install components to style your app
+
+React components can be configured with props, which makes them ideal for sharing with others.
+
+There are [all sorts of React components](https://github.com/brillout/awesome-react-components#ui-components) that you can install and use in your projects.
+
+In the challenge you'll add a video player to the `Album` component.
+
+- Open the `Album` component
+
+- Using npm, install [react-player](https://www.npmjs.com/package/react-player)
+
+- Following the instructions on the [readme](https://www.npmjs.com/package/react-player) add a react-player component into `Album`
+
+- Update your `Albums` component to pass in a `videoUrl` to the `Album` component
+
+- Add `videoUrl` as a prop type to the `Album` component
+
+## Homework
+
+- Find some more content and add another route to your App
+- Using react-router, show the About route content in tabs (see the how this is achieved in https://codesandbox.io/s/pj6v9x94x0)
+<!-- - Add a form to the [TODO] page that posts to an API [TODO] -->
+- Enhance the albums page using components provided by [Material UI](http://www.material-ui.com/#/components/grid-list)
+- (Advanced) Abstract the tabs functionality into a component that you could share with other developers