React Training

GitHub icon

Lab One - Setup and install dependencies


Atlassian has a great tutorial for installing git in various environments. Below are the quick and easy ways.


Install GitBash using the installer or for more full fledged solution, git for Windows comes with a GUI and Windows Explorer integration.


It’s probably already installed.

$ git --version
git version 2.9.1


Check if you have node installed. $ node --version



  • You can download an installer OR
  • Install via Homebrew

    • Check for existing install. $ brew --version
    • Install Hombrew as needed
    • Install Node w/ Homebrew. $ brew install node


  • Check if you have yarn installed. $ yarn --version
  • If Yarn isn’t installed, then add it as a global NPM module: $ npm install -g yarn

Checkout the Github repository

Fork project from Github:

Fork repo

then clone the new fork!

$ git clone

You should get output similar to below:

Cloning into 'react-redux-timesheet'...
remote: Counting objects: 3003, done.
remote: Compressing objects: 100% (1458/1458), done.
remote: Total 3003 (delta 1413), reused 2684 (delta 1256)
Receiving objects: 100% (3003/3003), 1.44 MiB | 1.15 MiB/s, done.
Resolving deltas: 100% (1413/1413), done.
Checking connectivity... done.

Change directories to the lab main directory.

cd react-redux-timesheet

Next we need to make sure our dependencies are installed:

$ yarn

The final directory represents the finished state of the application (what we’ll have once we’ve done all of the labs). For each lab, you’ll switch to the corresponding directory which will give you a view of the application at the start of that lab. Go ahead and navigate to the lab-01 directory:

$ cd lab-01

Note: these labs technically don’t require yarn - if you would prefer to use NPM you absolutely can, just replace any references to yarn or yarn install with npm install. You’ll need to install dependencies for each lab individually.

If yarn is not installed...
cd lab-01

npm install

Start the local development server

Run the start script

$ yarn start

yarn start

  • This kicks off a Node server and serves up our index.html page.

  • This is a long running only ends on an error—or killing of the server with Ctrl + C

  • Open your browser and navigate to http://localhost:3000

  • Verify that you see the welcome page.



Port Conflicts

The labs assume that you don’t already have apps running on ports 3000 and 3001. If you do we can override the ports in the following way:


$ PORT=4000 yarn start

react-redux-api (used in later labs)

$ PORT=4001 yarn start

Then update the timesheet app to point to that new port and re-launch:

"proxy": "http://localhost:4001",

The CLI apps won’t stop with Ctrl-C

Some Windows systems (esp. Windows 10) don’t properly pass Ctrl-C to the command line. Some people report that CTRL-fn-b works in these situations.

Your First React Component