Skip to content

Instantly share code, notes, and snippets.

Cory House coryhouse

View GitHub Profile
@coryhouse
coryhouse / package.json
Last active Jul 7, 2020
package.json for Building a JS Development Environment on Pluralsight
View package.json
{
"name": "javascript-development-environment",
"version": "1.0.0",
"description": "JavaScript development environment Pluralsight course by Cory House",
"scripts": {
},
"author": "Cory House",
"license": "MIT",
"dependencies": {
"whatwg-fetch": "1.0.0"
View ReactQueryDemo.jsx
import React from "react";
import { getUsers } from "./services/userService";
import { useQuery } from "react-query";
export default function ReactQueryDemo() {
const { data, isLoading, error } = useQuery("users", getUsers);
if (isLoading) return "Loading...";
if (error) return "Oops!";
return data[0].username;
}
View HookDemo.jsx
import React from "react";
import useFetch from "./useFetch";
export default function HookDemo() {
const { data, loading, error } = useFetch("users");
if (loading) return "Loading...";
if (error) return "Oops!";
return data[0].username;
}
View useFetch.js
import { useState, useEffect, useRef } from "react";
// This custom hook centralizes and streamlines handling of HTTP calls
export default function useFetch(url, init) {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
const prevInit = useRef();
const prevUrl = useRef();
View CentralDemo.jsx
import React, { useState, useEffect } from "react";
import { getUsers } from "./services/userService";
export default function CentralDemo() {
const [users, setUsers] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
getUsers()
.then(json => {
View userService.js
export function getUsers() {
return fetch(`${process.env.REACT_APP_API_BASE_URL}users`).then(response =>
response.json()
);
}
View InlineDemo.jsx
import React, { useState, useEffect } from "react";
export default function InlineDemo() {
const [users, setUsers] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
fetch(`${process.env.REACT_APP_API_BASE_URL}users`)
.then(response => {
@coryhouse
coryhouse / webpack.config.dev.js
Last active Jul 4, 2020
Development Webpack config for "Building a JavaScript Development Environment" on Pluralsight
View webpack.config.dev.js
import path from 'path';
export default {
debug: true,
devtool: 'inline-source-map',
noInfo: false,
entry: [
path.resolve(__dirname, 'src/index')
],
target: 'web',
@coryhouse
coryhouse / mockDataSchema.js
Last active Jun 30, 2020
Mock Data Schema for "Building a JavaScript Development Environment" on Pluralsight
View mockDataSchema.js
export const schema = {
"type": "object",
"properties": {
"users": {
"type": "array",
"minItems": 3,
"maxItems": 5,
"items": {
"type": "object",
"properties": {
@coryhouse
coryhouse / .eslintrc.json
Last active Jun 29, 2020
.eslintrc.json file for "Building a JavaScript Development" Pluralsight course
View .eslintrc.json
{
"root": true,
"extends": [
"eslint:recommended",
"plugin:import/errors",
"plugin:import/warnings"
],
"parserOptions": {
"ecmaVersion": 7,
"sourceType": "module"
You can’t perform that action at this time.