diff --git a/react/lesson3.md b/react/lesson3.md index cef97849..a506eb5a 100644 --- a/react/lesson3.md +++ b/react/lesson3.md @@ -8,29 +8,32 @@ ## Challenge 1: render a list of albums -- Open [TODO]. You'll find a simple React app with an `Album` component already written for you. +- Go to https://github.com/djgrant/beyonce-app and follow the instructions to clone and install the app. + +- You'll find in the components folder an `Album` component already written for you to use. - Fetch an array of albums from https://gist.githubusercontent.com/djgrant/d465b89610f7047c759bdfed087bb4c4/raw/bee48fc79be3df912908d59bcde538f3d1b00edf/beyonce-albums.json. -- Using the date returned from the API, render a list of `Album` components, passing in the necessary props. +- Using the data returned from the API, render a list of `Album` components, passing in the necessary props. Things you will need to know: - Fetch - - Example: http://jsbin.com/qafekejato/edit?js,console) + - 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) + - Tutorial: https://reactjs.org/docs/state-and-lifecycle.html ## Challenge 2: add routes to your app In this challenge we'll split your app into 3 pages. -[TODO: Starting point should include content for the 3 pages in `
` elements] -- In your the app install react-router by running `npm install react-router` +- In your app install react-router by running `npm install react-router --save` -- Open https://codesandbox.io/s/r0wXp0Njw to see a basic example of a React app using react-router. +- Open https://codesandbox.io/s/pj6v9x94x0 to see a basic example of a React app using react-router. - Copy the `react-router` imports over to your app @@ -38,7 +41,9 @@ In this challenge we'll split your app into 3 pages. - Move the 3 sections in your app into ``s -- Move the content of each Route into individual files, and import them in `index.js` +- 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 @@ -53,7 +58,8 @@ You can install [all sorts of React components](https://github.com/brillout/awes ## 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] +- Proptypes +- 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) + - (Advanced) Abstract the tabs functionality into a component that you could share with other developers