pekkis / round-robinizer

Round Robinizer for Sami

Hardcore React Training

Introduction

Welcome to my two-day hardcore React Workshop. It is very important that you read and follow these instructions before the actual two training days.

Installation

Start by forking / cloning this repository.

If you don't know how to use git, you should spend an hour to learn the basics!

If you really don't want to use / learn git, just download the repo.

training is the default branch that contains the starting point for our course. The master branch contains a fuller example application that might be up to date or not, depending on the phases of the moon and the planets.

There are other branches too. They contain all the stuff from all the previous trainings. Interesting stuff, at least if you're me!

Human Requirements

• You are a developer, devsigner or such.
• You have working professional knowledge on JavaScript, HTML and CSS. You don't have to be a guru, but the course is not suitable for beginners.

Computer Requirements

• MacOS and Linux are grade A citizens. Should work in Windows too, but I don't always test because I'm not a Windows man myself.
• If it doesn't work, just use a Unix virtual machine.
• The current version of node.js (8 and 10 should both work). Might work on older / newer / other ones, but no guarantees!
• The Yarn package manager.
• An editor / IDE that supports the good stuff. I use VSCode myself nowadays, and it's really good. Atom is OK too.
  • Some alternatives: Nuclide, WebStorm, Eclipse, Sublime Text, whatever. Just make sure you get all the syntax and code helps etc.
• Chrome browser. Or some other good dev browser.

Browser extensions

Install these Chrome extensions, or similar ones for your browser of choice.

• React dev tools
• Redux dev tools

VSCode packages

If you use VSCode, you must install at least the following extensions.

• ESLint
• Prettier - Code formatter
• EditorConfig for VS Code
• PostCSS syntax
• vscode-styled-components

Check this screenshot!

Atom packages

If you use Atom, you must install at least the following packages.

• linter
• linter-eslint
• language-babel
• language-postcss
• prettier-atom

Howto

The software is divided into two subfolders. client has the client side code (our main dish). server contains a simple Express app to act as a backend for our training session.

Commands are always run in either of these folders. Not in the common root folder.

While preparing for the training session, you must follow the development mode path until you reach the situation in this screenshot.

Development mode

client

• cd client
• yarn
• cp .env.example .env
• yarn run start
  • open browser and go to http://localhost:8888

server

• cd server
• yarn
• cp .env.example .env
• yarn run start

Build

client

The app builds to dist/ (client code) and dist-server (server side rendering) folder.

• yarn run build

server side rendering

• cd client
• yarn run build
• node dist-server/index.js

Food for thought

This repository uses my own broilerplate to kickstart a React project with sane defaults, necessary tooling and reusable, copy-paste-preventing stuff. It's exactly the same kit I build my own stuff on.

I recommend, though, to also check out the create-react-app boilerplate instead of my broilerplate. If it suits you, you might want to use it. Personally, I think it's inadequate, and do not agree with it's philosophy. You basically always have to eject, and then you're on your own as here.

With Broilerplate, I aim to get all the advantages and none of the disadvantages. Only future will tell whether this is sane.

react-app-rewired tries to do the same. You might want to check it too.

Licensing

Use as you wish. Read the license from LICENSE.

round-robinizer