ReactJS Workshop

A 3 day hands-on workshop, learning ReactJS and Redux by building an example single page application (SPA).

Table of Contents

• Introduction
• Getting Started
  • With Docker
  • Without Docker
• Exercises
• License

Introduction

This repo forms part of a hands on workshop (TODO: link to slides) designed to teach ReactJS and its ecosystem. Throughout the 3-day workshop, we will learn by doing: We will build a fake SPA, and will cover key concepts as we progress through the app build.

The workshop starts all the way from the beginner -- with little ReactJS knowledge -- to all the way on the other side of the spectrum, covering advanced ReactJS component patterns; css-in-js using EmotionJS; predictable state management with Redux; and to handling asynchronous side effects via Redux Sagas.

While we won't have enough time to cover testing all of these concepts, the exercises are backed by a test suite which can be used as a reference for those wanting to dig a little deeper.

Getting Started

You'll need to setup your local workspace so that you can either view and play around with the demo app, or if you want to do the exercises.

Depending on what you have installed, you can setup your machine using either Docker or npm. Both produce the same output, so it's up to you.

Regardless of the option you choose, when the sandbox environment is ready, you can access the sandbox at http://localhost:6006.

With Docker

Setup required dependencies:

docker-compose run setup

Run the local sandbox app:

The sandbox app is used for both reviewing and editing the demo app, as well as doing the exercies.

docker-compose up -d app

You should be good to go!

To kill the local sandbox, simply run:

docker-compose down

Without Docker

Docker isn't required to run the sandbox app locally.

Using npm

Install dependencies

npm install # or just, npm i

Run the local sandbox app:

The sandbox app is used for both reviewing and editing the demo app, as well as doing the exercies.

Note: Each of these will consume a terminal window, so you will need more than 1 terminal window!

npm run server

and in a separate terminal,

npm start

To kill the local sandbox, simply Ctrl+C in each terminal window to stop the active process.

Using yarn

Note: At present, this repo uses npm as the package manager, and so if you plan on using yarn, you might have to remove the package-lock.json file, as this typically throws a warning from yarn (and vice-versa). For now, please don't try to commit a yarn.lock file back to this repo.

Install dependencies

yarn install # or just, yarn

Run the local sandbox app:

The sandbox app is used for both reviewing and editing the demo app, as well as doing the exercies.

Note: Each of these will consume a terminal window, so you will need more than 1 terminal window!

yarn server

and in a separate terminal,

yarn start

To kill the local sandbox, simply Ctrl+C in each terminal window to stop the active process.

Exercises

NOTE: When working on the solutions, DO NOT delete any of your work; each exercise builds on the previous solution and so you will need your solutions from prior exercises as you progress.

All exercises are located in the ./exercises folder, and summaries in the Exerciese README file.

License

This material is available for private, non commercial use under the GPL version 3.0 license. If you would like to use this material to run your own workshop then please contact me.