This tutorial will contain a little CSS, or rather PostCSS. For this reason a basic understanding of CSS styling will be assumed, although you should still be able to follow along even without much experience.
Since it seems everyone loves A Game of Thrones, we will be building "A Map of Thrones". This project is an interactive map of Westeros with pointers on the map that we can click to view additional information. We can even add places to our favourites list.
The application is fairly simple to build but it has enough complexity to it that we need various Webpack loaders, we will have a few different React components, and also have a simple use case to try out Redux.
You will need to install node.js, Yarn, and have an editor ready, such as Visual Studio Code, WebStorm, etc.
brew install node
brew install yarn
When you are ready to begin clone the following repository:
git clone email@example.com:BlakeSimpson/learning-react-and-redux-tutorial.git
Every step of the tutorial has an associated git tag, so to have the starting
point for step 9, you could simply checkout the git tag
step-9. In that sense,
if you want to see the completed code for step 9, checkout the next tag
To follow along with the tutorial, checkout
step-1 from the git history:
git checkout step-1
You will probably want to work on your own branch, instead of the master of this
tutorial, so that you can build your own version of the app. I would suggest
creating a branch from tag
step-1 and continuing from there, i.e.:
git checkout step-1 git checkout -b your-name
If you ever find that your code is not working, or your code looks a lot
different from the tutorial, sync your local branch to a tutorial step to
restore the original tutorial onto your branch, for example to reset to
(all local changes are lost):
git clean -f git reset --hard step-4
If you have everything set up, you can move on to Step 1 of the tutorial.