jaysoo

// apps/my-app/src/environments/environment.ts
export const environment = {
  production: false,
  giphy: {
    apiKey: 'dc6zaTOxFJmzC'
  }
};

jaysoo

// apps/my-app/src/app/app.tsx
import * as React from 'react';
import { BrowserRouter, Route, Link } from 'react-router-dom';
import { Home } from '@my-app/home';
import { Gifs } from '@my-app/gifs';
import { environment } from '../environments/environment';

import './app.scss';

export const App = () => (

jaysoo

// libs/gifs/src/lib/gifs.scss
.gif-search-input {
  width: 500px;
  display: block;
  font-size: 24px;
  margin: 10px 0;
}

.gif-list {
  display: grid;

jaysoo

// libs/gifs/src/lib/gifs.tsx
import * as React from 'react';
import { useCallback, useEffect } from 'react';
import axios from 'axios';
import './gifs.scss';

interface GifsProps {
  apiKey: string;
}

jaysoo

// apps/my-app/src/app/app.scss
.app {
  font-family: 'Helvetica Neue', Helvetica, sans-serif;
  display: flex;

  h1 {
    font-weight: 100;
    margin: 0;
  }
}

jaysoo

// apps/my-app/src/app/app.tsx
import * as React from 'react';
import { BrowserRouter, Route, Link } from 'react-router-dom';
import { Home } from '@my-app/home';
import './app.scss';

export const App = () => (
  <BrowserRouter>
    <div className="app">
      <nav className="app-nav">

jaysoo

// libs/home/src/lib/home/home.tsx
import * as React from 'react';

export const Home = () => (
  <React.Fragment>
    <h1>Home</h1>
    <p>Welcome to the React Example app!</p>
    <p>Please see the sidenav for available features.</p>
  </React.Fragment>
);

jaysoo

Hub
  Sign-In Page
    forgot password -> Reset Password Email
    email sign-in link -> Sign-In Email
    success -> Post Page
    failure -> Sign-In Page
  Reset Password Page
    set password -> Post Page
  Post Page
    sign out -> Sign-In Page

jaysoo

/*
 * This is just a scratch of ideas I've been thinking about when it comes
 * to lazy-loaded components/modules, and how that can work with rendering a react
 * application in a single pass.
 *
 * Note: Don't take any of these ideas too seriously. I have implemented some of them in experiments,
 * but much more thinking is needed.
 */

/*

jaysoo

Keybase proof

I hereby claim:

• I am jaysoo on github.
• I am jaysoo (https://keybase.io/jaysoo) on keybase.
• I have a public key whose fingerprint is 5DF3 8AF9 604C A874 3B60 D102 941A B9CF 0D48 BB88

To claim this, I am signing this object: