This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Page 0 appear | |
SWIPE | |
Page 1 appear | |
SWIPE | |
Page 2 appear |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from "react"; | |
const Announcements = (props) => { | |
return ( | |
<div aria-live="polite" aria-atomic="true" | |
className="visuallyhidden"> | |
{props.message} | |
</div> | |
); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { ThemeProvider as EmotionThemeProvider } from 'emotion-theming'; | |
import React from 'react'; | |
import themeDark from '../theme_dark'; | |
import themeLight from '../theme_light'; | |
interface InterfaceState { | |
dark: boolean; | |
toggleDark: () => void; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const sequence = ['arg1', 'arg2','arg3'].reduce(async (previousPromise, nextArg) => { | |
await previousPromise; | |
return somePromise(nextArg) | |
}, Promise.resolve()); | |
sequence | |
.then(() => console.log('Done')) | |
.catch((e) => console.error(`An error occured: ${e}`)); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// reducer.js | |
export const initialState = { | |
data: null | |
}; | |
const reducer = (state, action) => { | |
const reduced = { ...state }; | |
switch (action.type) { | |
case "FETCH_DATA": | |
return { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, { useState, useContext, useEffect, createContext } from "react"; | |
import logo from "./logo.svg"; | |
import "./App.css"; | |
const CounterContext = createContext(0); | |
const Hello = () => { | |
// This avoids render props and the use of Context.Consumer | |
// way easier! | |
const count = useContext(CounterContext); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, { Suspense, Fragment } from "react"; | |
import { createCache, createResource } from "simple-cache-provider"; | |
const cache = createCache(); | |
const createFetcher = callback => { | |
const resource = createResource(callback); | |
return () => resource.read(cache); | |
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// @flow | |
import * as React from 'react' | |
// This creates the "Article Context" i.e. an object containing a Provider and a Consumer component | |
// $FlowFixMe | |
const ArticleContext = React.createContext(); | |
// We use classes here instead of functional components for our sub-components | |
// so we can define a type for each one of them |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<Article> | |
<Article.Title /> | |
{/* | |
This will render if we use the sub-component pattern described in part 2, | |
but will be skipped with the one described in part 1 (the findByType util | |
mentioned in the post will simply not render "<div></div>" as it's not | |
a known sub-components of <Article/>. | |
*/} | |
<div>Hello World</div> | |
<Article.Metadata /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, { Component } from "react"; | |
import Article from "./Article"; | |
const text = ` | |
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. | |
`; | |
class App extends Component { | |
constructor() { | |
this.state = { |
NewerOlder