Creating the Initial Project

We’re going to set up the project using the official Create-React-App tool. It abstracts the process of creating a project with a good build configuration. That way, you can focus on writing your application code, instead of trying to set up Webpack and Babel. I’m also going to be using the new Yarn package manager, because it has a couple specific features that NPM does not have.

I’m writing all this on Windows, but the commands that we’ll use should work on any platform. I don’t intend to show every last command I’ve typed or bit of code I’ve written as we go on - the real focus is intended to be on using Redux itself, not using Git or an editor.

The project is available on Github, at https://github.com/markerikson/project-minimek-educative. If you look at the repo, you’ll be able to see the final result of the sample app built in this course. I’ve created a separate pull request for each part of the course, so you can see the changes as the course progresses. I’ll also link to each commit as we go, and whenever I show a code snippet, I’ll link to that file/version in the repo.

Finally, thanks to Educative’s interactive course technology, I’ve included runnable versions of the app throughout the course, allowing you to play around with it and inspect the source from within the course pages.

Now, with all those pre-requisites out of the way: let’s do this!

Creating the Project

Now that we’ve got an idea what we’re going to build, we can actually create the project and get started on the code.

First, follow the instructions for installing the create-react-app and yarn tools on your system. (At the time of writing, the current versions are create-react-app and react-scripts 1.0.11, and yarn 0.27.5.)

Once that’s done, we can create our project:

create-react-app project-minimek-course

This is a good time to initialize a Git repo for the initial sample files and project config files:

cd project-minimek-course
git init
git add .
git commit -m "Initial project contents via create-react-app"

Commit 1ff11a1: Initial project contents via create-react-app

If you have a preferred editor or IDE, now would be a good time to set up your new project in that editor, and commit any project files it needs. In my case, I’m using WebStorm, so I’ve committed its project files to Git.

Commit ae37341: Add Webstorm project files and gitignore settings

After the project is created, we want to set up a Yarn lockfile to nail down the specific dependency versions we’re using. create-react-app already installed everything it needs (using NPM by default), but we need to run yarn to make sure we’re ready for adding more dependencies:

yarn

You’ll see Yarn do a lot of processing to figure out exactly what packages you need and what you already have, and then it should announce that it has successfully saved its yarn.lock lockfile.

If you run yarn start, you should see the Create-React-App dev server telling you:

Compiled successfully!

You can now view project-minimek-course in the browser.

  Local:            http://localhost:3000/
  On Your Network:  http://192.168.1.1:3000/

Note that the development build is not optimized.
To create a production build, use yarn build.

A new browser tab should open up, and you should see the basic CRA app template site appear, including the spinning React logo.