diff --git a/react/lesson3.md b/react/lesson3.md index 9e475a4f..cab0c58a 100644 --- a/react/lesson3.md +++ b/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! \ No newline at end of file +- Wrap your app in a `` component + +- Move the 3 sections in your app into ``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 `` `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) + +- 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