A tutorial for creating a fun React app.
- Fetching data into components
- Installing React components from npm
- How to build an app using react-router
-
Clone this repo
-
Install dependencies (
npm install
) -
In the components folder you will find:
- an
Album
component that is already written - an
Albums
component that you need to finish
- an
-
In the
Albums
component, fetch an array of albums from https://rawgit.com/rarmatei/f5ae92ac93d9716affab822a3f54f95b/raw/e62641b3f5ddd12c4fe34aa0912488224594e5a7/beyonce-albums.json. -
Using the data returned from the API, render an array of
Album
components, passing in the necessary props.
Things you will need to know:
- Fetch
- Example: http://jsbin.com/qafekejato/edit?js,console
- Tutorial: https://css-tricks.com/using-fetch/
- lifecycle methods
- State
In this challenge we'll split your app into 3 pages.
-
In your app install react-router by running
npm install react-router --save
-
Open https://codesandbox.io/s/p3nww06y00 to see an example of a React app using react-router
In src/components/App/App.js
:
-
Copy the
react-router
imports from the CodeSandbox example over to your app -
Wrap all of the JSX in a
<Router>
component -
Move the content of each of the 3 sections into 3 new components, and then import them as components
-
Add 3
<Route>
components, one for each of the compoents you just created. Each<Route>
should have apath
prop and acomponent
prop. -
Add a navigation bar to your app with links to the routes you've created
React components can be configured with props, which makes them ideal for sharing with others.
There are all sorts of React components that you can install and use in your projects.
In this challenge you'll add a video player to the Album
component.
-
Open the
Album
component -
Using npm, install react-player
-
Following the instructions on the readme add a react-player component into
Album
-
Update your
Albums
component to pass in avideoUrl
to theAlbum
component -
Add
videoUrl
as a prop type to theAlbum
component
- 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/p3nww06y00)
- Enhance the pages using components provided by reactstrap (Bootstrap for React)