Nils Hartmann nilshartmann

Preparations for React Training

During the workshop, we will complete exercises. To participate, you need to install some necessary tools (if you haven't already).

You can use this guide to check, if your setup works before the workshop. This ensures you have time to resolve any issues, especially if your computer has security restrictions or you lack full administrative access.

Requirements

For Your Laptop/PC

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

Try to run a query that returns the first ten stories and requests the following fields:
- ID, title, excerpt, publication date, who wrote the story, and the first ten comments for each story

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

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

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

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)

	async function loadArticle(articleId) { /* ... */ }
	async function loadComments(articleId) { /* ... */ }

	async function Page( {articleId} ) {

	// Beide Requests starten parallel
	const articlePromise = loadArticle(articleId);
	const commentsPromise = loadComments(articleId);

	return <React.Suspense fallback={<h1>Please wait, data is loading</h1>}>

	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;

	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;

	#! /bin/zsh

	#xcode-select --install

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