gaearon

import React, { Component } from 'react'
import Subapp from './subapp/Root'

class BigApp extends Component {
  render() {
    return (
      <div>
        <Subapp />
        <Subapp />
        <Subapp />

markerikson

// Option 1: a thunk action creator using redux-thunk middleware
function myThunkActionCreator(someValue) {
    return (dispatch, getState) => {
        dispatch({type : "REQUEST_STARTED"});

        myAjaxLib.post("/someEndpoint", {data : someValue})
            .then(
                // Use the (resolve, reject) form of .then() instead of .catch(),
                // so that we don't accidentally dispatch REQUEST_FAILED on a reducer error
                response => dispatch({type : "REQUEST_SUCCEEDED", payload : response}),

threepointone

A series of posts on css-in-js

0. styles as objects

First, an exercise. Can we represent all of css with plain data? Let's try.

let redText = { color: 'red' };

timhwang21

Handling conditional field visibility in dynamic forms

This post explores several common ways of handling visibility of conditional fields. Our sample form will have the following schema:

• foo: always present
• bar: dependent on form state (value of foo)
• baz: dependent on other application state (e.g. user permissions)

Below is our form, prior to implementing visibility logic:

rbalicki2

How we incorporate next and cloudfront (2018-04-21)

Feel free to contact me at [email protected] or tweet at me @statisticsftw

This is a rough outline of how we utilize next.js and S3/Cloudfront. Hope it helps!

It assumes some knowledge of AWS.

Goals

sebmarkbage

The Rules of React

All libraries have subtle rules that you have to follow for them to work well. Often these are implied and undocumented rules that you have to learn as you go. This is an attempt to document the rules of React renders. Ideally a type system could enforce it.

What Functions Are "Pure"?

A number of methods in React are assumed to be "pure".

On classes that's the constructor, getDerivedStateFromProps, shouldComponentUpdate and render.

ArcanisCz

/*
* Usage: 
* const AppProvider = createProvider(rootReducer, rootSaga);
* ...
* <AppProvider>
*   <AppComponent>
* </AppProvider>
*/
const createProvider = (reducer, saga) => {
  const sagaMiddleware = createSagaMiddleware();

swyxio

// create context with no upfront defaultValue
// without having to do undefined check all the time
function createCtx<A>() {
  const ctx = React.createContext<A | undefined>(undefined)
  function useCtx() {
    const c = React.useContext(ctx)
    if (!c) throw new Error("useCtx must be inside a Provider with a value")
    return c
  }
  return [useCtx, ctx.Provider] as const

EliCDavis

package main

import (
	"fmt"
	"log"
	"syscall"
	"unsafe"
)

var (

gaearon

Next.js client-only SPA example

Made this example to show how to use Next.js router for a 100% SPA (no JS server) app.

You use Next.js router like normally, but don't define getStaticProps and such. Instead you do client-only fetching with swr, react-query, or similar methods.

You can generate HTML fallback for the page if there's something meaningful to show before you "know" the params. (Remember, HTML is static, so it can't respond to dynamic query. But it can be different per route.)

Don't like Next? Here's how to do the same in Gatsby.