Steve Kinney stevekinney

Resources: React && TypeScript

Slack channel: #tmp-react-typescript

The Basics

Okay, we're going to warm up by implementing a reducer in order to get everything up and running again.

We're going to implement the basic functionality.

const reducer = (state = [], action) => {
  return state;
};

An engineering manager that I have the privilege of working with just asked me for three expectations of a principal engineer for a project that he is working on to mentor senior engineers at Twilio. Here is the list that I came up with.

Skate to where the puck is going: Are you waiting to be told what to do or are you getting a sense for our product vision and making concrete suggestions for what technical work needs to be done to get us in a good place when it becomes time to execute?
Act like an owner: Are you complaining about what's broken or offering solutions and/or alternative ways of thinking that makes it clear to engineers close to the problem that they can play an important role in solving those problems? Do you accept the world as it is or are you willing to provide a compelling vision for how it could be?
Teach and lead: You're not getting more hours in the day. Taking on all of the hard work not only makes you a single point of failure, it robs your colleagues of the ability

Building Modern Web Applications with React and Redux

Abstract

In this workshop, you'll learn how to build real-world applications using React and Redux. We'll start from the basics of getting your first React application off the ground before quickly moving into testing, state management, 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.

Managing application state in a way that is both performant and maintainable is no small task. Redux offers a battle-tested solution for managing state in large, production-scale applications. That said, it can be overwhelming to wrap your head around when you're beginning and even trickier when you're learning it in the context of a React application. We'll start by looking at Redux in its simplest form—outside of React. We'll explore best practices for structuring your data and binding your application state

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';

// …

	{
	"printWidth": 80,
	"tabWidth": 2,
	"useTabs": false,
	"semi": true,
	"singleQuote": true,
	"trailingComma": "all",
	"bracketSpacing": true,
	"jsxBracketSameLine": false,
	"fluid": false

	const logEnhancer = (createStore) => (reducer, initialState, enhancer) => {
	// Do stuff like wrap the reducer in a higher-order function.
	const reducerWithConsoleLogs = (previousState, action) => {
	const nextState = reducer(previousState, action);
	console.log({ action, previousState, nextState });
	return nextState;
	};

	return createStore(reducerWithConsoleLogs, initialState, enhancer);
	};

	/* HSL */
	$teal: hsla(180%, 78%, 62%, 1);
	$black: hsla(96%, 20%, 5%, 1);
	$pink: hsla(339%, 100%, 56%, 1);
	$yellow: hsla(61%, 100%, 54%, 1);
	$white: hsla(0%, 0%, 100%, 1);

	/* RGB */
	$teal: rgba(81, 234, 234, 1);
	$black: rgba(12, 15, 10, 1);