Skip to content

Instantly share code, notes, and snippets.

Cory House coryhouse

Block or report user

Report or block coryhouse

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@coryhouse
coryhouse / logic-less-jsx.jsx
Last active Aug 23, 2019
Note that the vars at the top keep the JSX simple. Other options here: https://verekia.com/react/logic-less-jsx/
View logic-less-jsx.jsx
// Logic-less JSX via vars above
const Animal = ({ id, name, legCount, isFriendly }) => {
const url = `url/animal/${id}`
const legCountStr = toString(legCount) || '?'
const friendliness = { true: 'Friendly', false: 'Unfriendly' }[isFriendly]
const hasNotEnoughData = legCount === undefined && isFriendly === undefined
return (
<li>
<a href={url}>{name}</a> - {legCountStr} legs
View Conditionals.jsx
str // strings
<Cmp /> // components
<Cmp {...{ a, b, }} /> // instead of a={a} b={b}. yes, it's less performant
foo && <Cmp /> // shows if truthy
foo === somevalue && <Cmp /> // shows if foo is somevalue
!foo && <Cmp /> // shows if falsy
foo !== somevalue && <Cmp /> // shows if foo is not somevalue
@coryhouse
coryhouse / customRenderPerComponent.js
Created Mar 29, 2019
Custom render wrapper for each component with getters for each input for react-testing-library
View customRenderPerComponent.js
import { render as r } from '../test-utils'
function render(ui, options) {
const utils = r(ui, options)
return {
...utils,
username: utils.getByLabelText(/username/i),
password: utils.getByLabelText(/password/i),
login: utils.getByText(/login/i),
successModal: () => utils.getByTestId('login-success')
}
@coryhouse
coryhouse / centralizedRender.js
Created Mar 29, 2019
Custom centralized render for react-testing-library
View centralizedRender.js
import { render as r } from 'react-testing-library'
import { createStore } from 'redux'
import { Provider as ReduxProvider } from 'react-redux'
import { LocationProvider, createHistory } from "@reach/router"
import { AuthenicationProvider, createAuth } from '../auth'
import { reducer } from '../state'
export function reducer(ui, {
initialState = {},
store = createStore(reducer, initialState),
history = createHistory(),
@coryhouse
coryhouse / updates.md
Last active Sep 30, 2019
Building Apps with React Redux on Pluralsight - 2019 Course Updates
View updates.md

Enhancements and changes

  1. Upgraded to React 16.8, React Router 5, Babel 7, Webpack 4
  2. Hooks
  3. Optimistic delete example
  4. Middleware coverage
  5. Async/await coverage
  6. Using json-server instead of homemade mock API
  7. Centralized API proxy and utils
  8. Immer coverage
  9. Webpack-bundle-analyzer
View mockdata.json
{
"newCourse": {
"id": "",
"watchHref": "",
"title": "",
"authorId": "",
"length": "",
"category": ""
},
"courses": [
@coryhouse
coryhouse / index.js
Last active Nov 17, 2018
Example React entry point
View index.js
import React, { Suspense } from "react";
import ReactDOM from "react-dom";
import ErrorBoundary from "./ErrorBoundary";
import "./index.css";
import App from "./App";
import registerServiceWorker from "./registerServiceWorker";
import { BrowserRouter as Router } from "react-router-dom";
import CssBaseline from "@material-ui/core/CssBaseline";
import MuiPickersUtilsProvider from "material-ui-pickers/utils/MuiPickersUtilsProvider";
import DateFnsUtils from "material-ui-pickers/utils/date-fns-utils";
@coryhouse
coryhouse / install.sh
Last active Aug 18, 2019
Dependencies for React Auth0 on Pluralsight - Last Updated 11/30/2018
View install.sh
npm install auth0-js@9.8.0 auth0-lock@11.10.0 express@4.16.3 express-jwt@5.3.1 express-jwt-authz@1.0.0 jwks-rsa@1.3.0 npm-run-all@4.1.3 react-router-dom@4.3.1
View App.js
$ = jQuery = require('jquery');
var React = require('react');
var Home = require('./components/homePage');
var About = require('./components/about/aboutPage');
var App = React.createClass({
render: function() {
var Child;
switch (this.props.route) {
@coryhouse
coryhouse / funtionaljavascript.js
Last active Oct 12, 2018
Functional JS examples
View funtionaljavascript.js
// 1. Use reduce to avoid multiple iterations
const todoList = ['clean', 'cook', 'workout', 'nap', 'relax'];
// Remove any item that starts with the 'c'
todoList.filter(todo => todo[0] !== 'c');
// Capitalize every item in the todoList
todoList.map(todo => todo[0].toUpperCase() + todo.substr(1));
// Accomplish the above with reduce
You can’t perform that action at this time.