MaximeHeckel

import React, { Component } from "react";
import Article from "./Article";

class App extends Component {
  constructor() {
    this.state = {
      value: {
        title: <h1>React sub-components with</h1>,
        subtitle: (
          <div>Lets make simpler and more flexible React components</div>

MaximeHeckel

      <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 />

MaximeHeckel

// @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

MaximeHeckel

import React from "react";

// This creates the "Article Context" i.e. an object containing a Provider and a Consumer component
const ArticleContext = React.createContext();

// This is the Title sub-component, which is a consumer of the Article Context
const Title = () => {
  return (
    <ArticleContext.Consumer>
      {({ title, subtitle }) => (

MaximeHeckel

import React, { Component } from "react";
import Article, { Title } from "./Article";

class App extends Component {
  constructor() {
    this.state = {
      value: {
        title: <h1>React sub-components with</h1>,
        subtitle: (
          <div>Lets make simpler and more flexible React components</div>

MaximeHeckel

// @flow
import React, { Component } from 'react';
import type { Node } from 'react';
import findByType from './findByType';
import css from './styles.css';

const Title = () => null;
const Subtitle = () => null;
const Metadata = () => null;
const Content = () => null;

MaximeHeckel

import React from 'react';
const findByType = (children, component) => {
  const result = [];
  /* This is the array of result since Article can have multiple times the same sub-component */
  const type = [component.displayName] || [component.name];
  /* We can store the actual name of the component through the displayName or name property of our sub-component */
  React.Children.forEach(children, child => {
    const childType =
      child && child.type && (child.type.displayName || child.type.name);
    if (type.includes(childType)) {

MaximeHeckel

import React, { Component } from 'react';
import findByType from './findByType';
import css from './somestyle.css';
// We instantiate the Title sub-component
const Title = () => null;
class Article extends Component {
  // This is the function that will take care of rendering our Title sub-component
  renderTitle() {
    const { children } = this.props;
    // First we try to find the Title sub-component among the children of Article

MaximeHeckel

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);
};

MaximeHeckel

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);