Trey Huffine treyhuffine

Full stack engineer, passionate for open source technology.

treyhuffine / class-component.jsx

Last active July 3, 2018 15:22

A TypeScript class component

treyhuffine / cra-with-typescript.jsx

Last active July 3, 2018 15:21

The App.tsx file of create-react-app with new TypeScript component children

	import * as React from 'react';
	import './App.css';
	import Description from './Description';
	import Header from './Header';
	import logo from './logo.svg';

	class App extends React.Component {
	public render() {
	return (
	<div className="App">

treyhuffine / redux.js

Last active February 25, 2018 19:17

The core Redux createStore library

	const createStore = (reducer, initialState) => {
	const store = {};
	store.state = initialState;
	store.listeners = [];

	store.getState = () => store.state;

	store.subscribe = (listener) => {
	store.listeners.push(listener);
	};

treyhuffine / todo-reducer.js

Last active January 3, 2019 12:50

A Redux reducer to manage a to-do list

	// This will be fed into the reducer when the app loads to initialize the state
	const getInitialState = () => ({
	todoList: [],
	});

	const reducer = (prevState = getInitialState(), action) => {
	switch (action.type) {
	case 'ADD_TODO':
	const nextState = {
	todoList: [

treyhuffine / redux-example.html

Last active January 10, 2020 08:26

An end-to-end Redux example using our own Redux library

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title></title>
	</head>
	<body>
	<div>Random Count: <span id="count"></span></div>
	<script>
	const counterNode = document.getElementById('count');

treyhuffine / redux-time-travel.js

Created February 26, 2018 00:44

An educational time travel implementation for Redux

	const timeline = [];
	let activeItem = 0;

	const saveTimeline = () => {
	timeline.push(store.getState());
	timelineNode.innerHTML = timeline
	.map(item => JSON.stringify(item))
	.join('<br/>');
	activeItem = timeline.length - 1;
	};

treyhuffine / redux-time-travel-app.html

Created February 26, 2018 01:03

A simple application to show an implementation of time travel debugging in Redux

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title></title>
	</head>
	<body>
	<div>My background color is <span id="background"></span></div>
	<div id="debugger">
	<div>

treyhuffine / redux-time-travel-app.html

Created February 26, 2018 01:03

A simple application to show an implementation of time travel debugging in Redux

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title></title>
	</head>
	<body>
	<div>My background color is <span id="background"></span></div>
	<div id="debugger">
	<div>

treyhuffine / simple-hoc-form.js

Last active February 26, 2018 14:07

A simple example of HOC

	import React from 'react';

	const higherOrderComponent = (WrappedComponent) => {
	class HOC extends React.Component {
	render() {
	return <WrappedComponent />;
	}
	}

	return HOC;

treyhuffine / hoc-with-props.js

Created February 26, 2018 14:14

A simple HOC that passes props to the wrapped component

	import React from 'react';

	const higherOrderComponent = (WrappedComponent) => {
	class HOC extends React.Component {
	render() {
	return (
	<WrappedComponent
	secretToLife={42}
	{...this.props}
	/>);