React.js Workshop

This is the code and practical companion to my React.js + Typescript workshop.

Since this is based on a rolling exercise (creating a web-based incident management), each exercise will be stored in its own directory.

Assumptions:

• Development on windows machine (windows 7 SP1 or above)
• The exercises assume the following versions of tools (will be installed as part of exercises)
  • Node.js 6.10.3
  • Typescript 2.3 or above
  • Webpack 2 and above
  • React 15.5 and above
• Basic knowledge in HTML / CSS / JavaScript

Day 1

Exercise 1: Building the environment

In this exercise we create a working development environment - that will serve us for the rest of the workshop. We will:

• Install Node.js
• Initialize project and install required dependencies
• Create and set all the required configuration files
• Create an empty web application
• Use automated tools to build and serve our web application

Go to Exercise 1

Exercise 2: Hello World

By Low and Custom, our first foray into a new framework / language must be an Hello World application. We will create our first react component that will do exactly this and provide the root of our future application.

Go to Exercise 2

Exercise 3: The App Shell

Creating the main layout of the application (application wrapper, header, scrollable content and footer). We will demonstrate React component composition, props and styling

Go to Exercise 3