kentcdodds

// src/count-context.js
import React from 'react'

function countReducer(count, action) {
  const {step = 1} = action
  switch (action.type) {
    case 'INCREMENT': {
      return count + step
    }
    default: {

ryanflorence

import React, { useState, useEffect } from "react";
import "./packages/combobox/styles.css";
import {
  Combobox,
  ComboboxInput,
  ComboboxList,
  ComboboxOption,
  ComboboxPopup
} from "./packages/combobox/index";

plmercereau

version: '3.1'
services:
  reverse-proxy:
    image: traefik # The official Traefik docker image
    command: --api --docker # Enables the web UI and tells Traefik to listen to docker
    ports:
      - "80:80"     # The HTTP port
      - "8080:8080" # The Web UI (enabled by --api)
    volumes:
      - /var/run/docker.sock:/var/run/docker.sock # So that Traefik can listen to the Docker events

ryanflorence

let UserContext = React.createContext();

class App extends React.Component {
  state = {
    user: null,
    setUser: user => {
      this.setState({ user });
    }
  };

getify

"use strict";

[foo,bar] = TNG(foo,bar);
// NOTE: intentionally not TNG(..) wrapping useBaz(), so that it's
// basically like a "custom hook" that can be called only from other
// TNG-wrapped functions

function foo(origX,origY) {
   var [x,setX] = useState(origX);
   var [y,setY] = useState(origY);

aweary

import React from "react";
import useMutableReducer from "./useMutableReducer";

const reducer = (draft, action, state) => {
  switch (action) {
    case "increment":
      draft.count++;
      break;
    case "decrement":
      draft.count--;

lukebyrne

require('dotenv').config()
const cors = require('cors')
const bodyParser = require('body-parser')
const express = require('express')
const expressJwt = require('express-jwt')
const cookieSession = require('cookie-session')
const jwt = require('jsonwebtoken')
const passport = require('passport')
const GoogleStrategy = require('passport-google-oauth20').Strategy
const jwtSecret = Buffer.from('Zn8Q5tyZ/G1MHltc4F/gTkVJMlrbKiZt', 'base64')

a-barbieri

NextJS sitemap generator

Install

The current setup has been tested on Next Js 7.0.0.

You need to install Axios.

$ npm install axios

a9

高效的 GraphQL + Antd

本文原载于我的独立博客 https://lutaonan.com/blog/effective-graphql-and-antd/

在过去的几年，不论是面向内部的系统，还是面向外部的产品，我们都大量地使用了 Ant.Design —— 一个基于 React 的 UI 组件库。

在做内部系统时，Ant.Design 解决了几乎 60% 的问题。剩下的问题在业务逻辑和代码组织的复杂度。我见过很多内部系统因为滥用状态管理而使代码变得复杂，他们之所以使用状态管理库，并不是因为应用的状态复杂，而是因为需要一个状态树来管理网络请求的状态、接口返回的数据等等这些和接口相关的状态。

真的需要状态管理库吗？在之前，我没有信心回答这个问题。但在使用了 GraphQL (Apollo) 后，我确信，在大多数场景，你不再需要状态管理。

bvaughn

React recently introduced an experimental profiler API. This page gives instructions on how to use this API in a production release of your app.

Table of Contents

• Profiling in production
  • Create React App
  • Webpack 4

Profiling in production

React DOM automatically supports profiling in development mode for v16.5+, but since profiling adds some small additional overhead it is opt-in for production mode. This gist explains how to opt-in.