This repository contains a step-by-step React tutorial.
See branch tutorial for the actual steps.
First (steps 1.x), we build a vanilla React app which allows us to search for music tracks from Last.fm. You need to create a Last.fm/AudioScrobbler account and save the API key. The app contains a search bar, a search history of previous searches, and a list of search results with artist name, picture, and track name.
In the second part of the tutorial (steps 2.x), we refactor the app to use Redux for state management.
In the third part (steps 3.x), we split the app into routes. The main route displays our initial page with search results. The subroute displays related tracks when we select one of the search results.
In the fourth part (step 4.1), we add the test framework with Mocha, Chai, and Enzyme.
- Node and npm for JavaScript package management.
- Git for Windows for version control and running
diffs during the tutorial. - Chrome Web browser and React Dev Tools plugin for React debugging.
- Download this repo (either the zip or with
git clone), executenpm install, andnpm start. Visit localhost:8080 with your Chrome, confirm you see "I love React!", open React Dev Tools, and look under the hood.
- Babel is a Javascript transpiler. Check out Learn ES2015 for overview of ES6 features, and the REPL for playing around with JSX and ES6 syntax.
- MDN JavaScript is the go-to-place for all things JavaScript. Keep the JavaScript language reference under your pillow.
- React documentation is quite decent.
- The official Redux docs may be a little hard to approach.
The steps of the tutorial are tagged.
You can follow the tutorial one step at a time, and run git diff to see how to get to the next step.
For example, you may want to start by running git diff -w HEAD 1.1-app-component
See below for short description of each step.
Add a functional component for the React app.
Add search bar to the page.
Add state to search bar by changing it into a managed component.
Change App into a class-based component. Manage app state in App. Pass a callback function to SearchBar to allow updates to state.
Add component to show search history by rendering a list. Use ES5 map function of Array instance.
Fetch search results from AudioScrobbler API. Show results in Bootstrap panels.
Add Redux to project. Handle search with Redux action. Update search result list from Redux store.
Remove global application state from App component. Add support for action creators with multiple actions.
Allow click on history item to redo search.
Add React Router to the project.
Refactor SearchResultList into a reusable functional component.
Add subroute for displaying related tracks.
Change route when performing search. Use an action creator.
Add Mocha, Chai and Enzyme for running tests. Define simple test for App rendering.