Add lesson outline

react/lesson3.md

@@ -1,36 +1,59 @@
 # 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.
+- Open [TODO]. You'll find a simple React app with an `Album` component already written for you.
 
-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).
+- Fetch an array of albums from https://gist.githubusercontent.com/djgrant/d465b89610f7047c759bdfed087bb4c4/raw/bee48fc79be3df912908d59bcde538f3d1b00edf/beyonce-albums.json.
 
-[Exercise: Use React Router](https://github.com/reactjs/react-router-tutorial/tree/master/lessons/01-setting-up)
+- Using the date returned from the API, render a list of `Album` components, passing in the necessary props.
 
-# More testing
+Things you will need to know:
+- Fetch
+  - Example: http://jsbin.com/qafekejato/edit?js,console)
+  - Tutorial: https://css-tricks.com/using-fetch/
+- State
+  - Example: https://codesandbox.io/s/q83vz50yl9
+  - Tutorial: https://reactjs.org/docs/state-and-lifecycle.html)
 
-# HomeWork
 
-Continue building last week's app. As we get familiar with retrieving data and displaying it, we take our project into the next step.
+## Challenge 2: add routes to your app
 
-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.
+In this challenge we'll split your app into 3 pages.
+[TODO: Starting point should include content for the 3 pages in `<section>` elements]
 
-The App will consist of three pages:
+- In your the app install react-router by running `npm install react-router`
 
-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})
+- Open https://codesandbox.io/s/r0wXp0Njw to see a basic example of a React app using react-router.
 
+- Copy the `react-router` imports over to your app
 
-In order to implement this behaviour, we will use [React-Router](https://github.com/ReactTraining/react-router) library.
+- Wrap your app in a `<Router />` component
 
-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!
+- Move the 3 sections in your app into `<Route>`s
+
+- Move the content of each Route into individual files, and import them in `index.js`
+
+
+## Challenge 3: install components to style your app
+
+React components can be configured with props, which makes them ideal for sharing with others.
+
+You can install [all sorts of React components](https://github.com/brillout/awesome-react-components#ui-components)
+
+- Install a React UI library
+
+- TODO
+
+## Homework
+
+- Add another route with content to your App
+- Using react-router, show the About route content in tabs
+- Add a form to the [TODO] page that posts to an API [TODO]
+- (Advanced) Abstract the tabs functionality into a component that you could share with other developers