Steve Kinney stevekinney

QCon NYC 2019: React and Redux Workshops

Follow-Along Guides

These are notes from the live-coding portions of the workshop. You're welcome to follow along using these as we work through the material. There might be slight deviations as I answer questions or through the very nature of live-coding.

Building Modern Web Applications with React

Abstract

In this workshop, you'll learn how to build real-world applications using React. We'll start from the basics of getting your first React application off the ground before quickly moving into component hierarchies, lifecycle methods, state management, testing, and routing. By the end of the morning, you will have created custom components using JSX to build a working application that works with a server-side API and client-side routing and deployed it to production. You'll acquire strategies for debugging and best practices fro structuring your React applications going forward.

Bio

Steve is a senior principal engineer and front-end architect at Twilio SendGrid (https://sendgrid.com). He is the author of Electron in Action (https://bit.ly/electronjs). Steve is the director emeritus and founder of the front-end engineering program at the Turing School for Software and Design—a non-profit developer training program (https://turing,io). He is an or

Electron and React QCon Workshops

Prerequisites

You'll need a recent version of Node.js installed on your computer with administrative access. Yarn is not required, but Electron Forge uses it, so it would be helpful to install beforehand.

Please make sure you're using a supported platform. This is particularly important if you're running Linux.

Important note: If you're using Windows, make sure you're not using the Windows Subsystem for Linux. This will confuse Electron to thinking you're running on a Linux machine when you're really not.

Frontend Masters: React && Firebase (Version 2)

Contact Information

@stevekinney

Prequisite Setup

A recent version of Node.js
npm install -g create-react-app

Frontend Masters: Electron (Version 2)

You'll need a recent version of Node.js installed on your computer with administrative access. Yarn is not required, but Electron Forge uses it, so it would be helpful to install beforehand.

Please make sure you're using a supported platform. This is particularly important if you're running Linux.

Important note: If you're using Windows, make sure you're not using the Windows Subsystem for Linux. This will confuse Electron to thinking you're running on a Linux machine when you're really not.

We'll be using working through the following repositories over the course of the workshop:

Frontend Masters: AWS for Frontend Engineers

You should have the following completed on your computer before the workshop:

Install the AWS CLI.
Have Node.js installed on your system. (Recommended: Use nvm.)
- Install yarn with brew install yarn.
Create an AWS account. (This will require a valid credit card.)
Create a Travis CI account. (This should be as simple as logging in via GitHub).

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	<html data-editor-version="2" class="sg-campaigns" xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" /><!--[if !mso]><!-->
	<meta http-equiv="X-UA-Compatible" content="IE=Edge" /><!--<![endif]-->
	<!--[if (gte mso 9)\|(IE)]>
	<xml>
	<o:OfficeDocumentSettings>
	<o:AllowPNG/>

	const example = `22 + 23`;

	const isWhitespace = character => /\s/.test(character);
	const isNumber = character => /[0-9]/.test(character);
	const isOperator = character => /[\+\-\*\/]/.test(character);

	const tokenize = (input) => {
	let cursor = 0;
	const tokens = [];

	/**
	* Creates as an iterable queue for use in a breadth-first search.
	*
	* If you iterate over this queue, you will get a breadth-first search for
	* free.
	*
	* @param rootNode - First node to add to the queue.
	* @yields The next AST node in the queue.
	* @returns The complete queue of nodes that were added.
	*

	{
	"version": "0.2.0",
	"configurations": [
	{
	"name": "Debug Main Process",
	"type": "node",
	"request": "launch",
	"cwd": "${workspaceRoot}",
	"runtimeExecutable":
	"${workspaceRoot}/node_modules/.bin/electron",