Steve Kinney stevekinney

5 React Architecture Best Practices
A plugin system is born... · React Static
Applying microservices design patterns to scale react app development • Soluto Engineering Blog
Architecting your React application.
Best architecture for the React project - Mad Devs
Build a Super-Modular Todo App with React and Bit Components
[Building an Enterprise React Application, Part 1 | Lullabot](https://www.lullabot.com/articles/building-an-enterprise-react-ap

Tweet Stream (Redux Thunk)

Let's start by pulling in the middleware and the actual thunk library.

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';

Now, we can pop that middleware right in there.

Star Wars Autocomplete

Okay, so we have a basic application, but it doesn't do much.

Let's get cooking. We'll start by getting things wired up with Redux Thunk.

import thunk from 'redux-thunk';

// …

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:

	<!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 = [];