hiro08gh

import React, {Suspense} from 'react';
import {Switch, Route} from 'react-router-dom';
import paths from '../constants/path';

const App = React.lazy(() => import('../pages/App'));

const Root: React.FC = () => (
  <>
    <Suspense fallback={null}>
      <Switch>

hiro08gh

Development enviroment

• macOS
• ubuntu 18.04

Editor & terminal

• neovim
• iterm2

Web apps

• GitHub – code repositories

hiro08gh

import React from 'react';
import useInputValue from './hooks/useInputValue';

const App: React.FC = () => {
  const {value, onChange} = useInputValue('');
  return (
    <div className="App">
      Test
      <input {...value} onChange={onChange}/>
      {value}

hiro08gh

import { NextFunctionComponent, NextContext } from 'next'

// Define what an individual item looks like
interface IDataObject {
  id: number,
  name: string
}

// Define the props that getInitialProps will inject into the component
interface IListComponentProps {

hiro08gh

import React from 'react';
import App, {Container} from 'next/app';

function MyApp({Component, pageProps}) {
  return (
    <Component {...pageProps} />
  );
}

MyApp.getInitialProps = async ({Component, ctx}) => {

hiro08gh

import styledNormalize from 'styled-normalize';
import { createGlobalStyle } from 'styled-components';

export default createGlobalStyle`
  ${styledNormalize}

  @font-face {
    font-family: 'Lato';
    src: url('/fonts/LatoLatin-Semibold.woff') format('woff');
  }

hiro08gh

JavaScriptの勉強になるリンクをあつめたものです。

author hiro08

MDN

https://developer.mozilla.org/ja/docs/Web/JavaScript

clean code

https://github.com/mitsuruog/clean-code-javascript/

hiro08gh

import React from "react";
import ButtonBase from "./Base";

function Button(props) {
  switch (props.Type) {
    case "largeFull":
      return (
        <ButtonBase fullWidth buttonHeightPc={48} fontSizePc={16} {...props}>
          {props.children}
        </ButtonBase>

hiro08gh

/// <reference types="react-scripts" />

declare namespace NodeJS {
	interface ProcessEnv {
		readonly NODE_ENV: 'development' | 'production' | 'test';
		readonly GOOGLE_ANALITYCS: string;
	}
}

hiro08gh

import React, {useEffect, useRef} from 'react';

function Canvas() {
  const canvasRef = useRef(null);

  const getContext = (): CanvasRenderingContext2D => {
    const canvas: any = canvasRef.current;

    return canvas.getContext('2d');
  };