nilshartmann

Libraries and Tools for React

If you're developing an application based on React it can be helpful if you don't need to develop all the basic UI components yourself. Here you can find a list with various components, component libraries and complete design systems developed with and for React.

As the list got longer and longer I thought it would be better to have a "real" site for it.

👉 Please find the (new) list here: https://react-libs.nilshartmann.net/

nilshartmann

function getEventTarget(nativeEvent) {
  var target = nativeEvent.target || nativeEvent.srcElement || window;

    // If encapsulated in a Web Component
    // use the Event path
    if(nativeEvent.path && nativeEvent.path[0]) {
        return nativeEvent.path[0];
    }

  // Normalize SVG <use> element events #4963

nilshartmann

export default undefined;
type Container<T> = {
  consume: (arg: T) => void;
};

// string ist super-type von "hello" 😳
// Entspricht in C# sowas hier:
// public class Event { } // => string
// public class MouseEvent : Event { } // => "hello"
type StringType = string;

nilshartmann

package nh.publy.backend.util;

import graphql.ExecutionResult;
import graphql.ExecutionResultImpl;
import graphql.execution.instrumentation.InstrumentationContext;
import graphql.execution.instrumentation.InstrumentationState;
import graphql.execution.instrumentation.SimpleInstrumentation;
import graphql.execution.instrumentation.parameters.InstrumentationExecutionParameters;
import graphql.execution.instrumentation.parameters.InstrumentationFieldFetchParameters;
import graphql.schema.GraphQLFieldDefinition;

nilshartmann

Versuche einen Query auszuführen, der die ersten zehn Stories zurückliefert, und folgende Felder abfragt:

Id, Titel, Excerpt, Veröffentlichungsdatum, Wer hat die Story geschrieben und die jeweils ersten zehn Kommentare

query {
  stories(first: 10) {
    nodes {
      id
      title

nilshartmann

abstract class BaseError {
  private final String message;
  
  public BaseError(String message) { this.message = message; }
  
  public String getMessage() { return this.message; }
}

nilshartmann

#! /bin/zsh

#xcode-select --install

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

nilshartmann

Routing after handling an action in Redux

Note: this are simplified example, concept only, not correct syntax etc.!

Approach one: use history object in thunk action creator

// my-app-history

nilshartmann

I recently (october 2020) evaluated MobX for a project as alternative to Redux (Redux Toolkit).

You can find my very subjective impressions below.

Redux DevTools better than MobX (for me they were more helpful when finding bugs)

Redux is more widely used than MobX

Change/Dependency tracking in MobX is powerful but not always obvious how it works (both behind the scene and in my application). If values didn't update where I expected it, finding the bug sometimes was hard

nilshartmann

How to deal with forest/tree structures in a normalized Redux store?

A Redux-based application holds a forest-like data structure, like Folders and Documents in a file system, but with many root Folders, like this:

Example Use-Case

In a React Component, DocumentList we display all Documents (all leafs of all trees) and when clicking on one Document, we need access to the Document's root (Folder) object (to read some information from it)