Ch 3
Basic web server
Returning data
routes/root.js
const random = require("./data");
:root { | |
--checkbox-border-color: #8b8c89; | |
--checkbox-checked-color: #274c77; | |
--checkbox-hover-color: #a3cef1; | |
--checkbox-disabled-bg-color: #d9d9d9; | |
} | |
input[type="checkbox"] { | |
box-sizing: border-box; | |
width: 20px; |
:root { | |
--radio-border-color: #8b8c89; | |
--radio-checked-color: #274c77; | |
--radio-hover-color: #a3cef1; | |
--radio-disabled-bg-color: #d9d9d9; | |
} | |
input[type="radio"] { | |
box-sizing: border-box; | |
width: 20px; |
import React, { useState, useEffect, useRef } from 'react'; | |
import { makeStyles } from '@material-ui/core/styles'; | |
import clsx from 'clsx'; | |
import useOnMobile from '../../../lib/hooks/useOnMobile'; | |
import { colors, mediaQueries as mq } from '../../../lib/styles'; | |
const useStyles = makeStyles(() => ({ | |
RangeSlider: { | |
[mq.smOnly]: { | |
display: 'flex', |
Basic web server
routes/root.js
const random = require("./data");
import { useState, useLayoutEffect } from 'react'; | |
const useOnMobile = () => { | |
const [isMobile, setIsMobile] = useState(true); | |
const resizeCallback = () => { | |
if (window.innerWidth < 768) { | |
setIsMobile(true); | |
} else { | |
setIsMobile(false); |
import { useState, useEffect, useReducer, Dispatch, SetStateAction } from 'react'; | |
import axios, { AxiosResponse, AxiosInstance } from 'axios'; | |
type dataFetchReducerState<R = any> = { | |
isLoading: boolean; | |
hasError: boolean; | |
results?: R; | |
}; | |
type dataFetchReducerAction = { |
{ | |
// Place your snippets for typescriptreact here. Each snippet is defined under a snippet name and has a prefix, body and | |
// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are: | |
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the | |
// same ids are connected. | |
// Example: | |
// "Print to console": { | |
// "prefix": "log", | |
// "body": [ | |
// "console.log('$1');", |
module.exports = { | |
/** | |
* Print Width | |
* https://prettier.io/docs/en/options.html#print-width | |
* | |
* Specify the line length that the printer will wrap on. | |
* | |
* printWidth: <int> | |
* default: 80 | |
*/ |