MaximeHeckel

Keybase proof

I hereby claim:

• I am maximeheckel on github.
• I am maximeheckel (https://keybase.io/maximeheckel) on keybase.
• I have a public key whose fingerprint is DEE3 414A B70A 0CBE 6439 93C3 994B 2A42 CCF6 3249

To claim this, I am signing this object:

MaximeHeckel

weave 2015/09/15 10:19:25.527177 ->[146.185.184.37:37684] connection accepted
weave 2015/09/15 10:19:25.528452 ->[146.185.184.37:37684|92:27:c5:47:c9:ce(5cd122c9-maximeheckel.node.tutum.io)]: completed handshake; using protocol version 1
weave 2015/09/15 10:19:25.530319 ->[146.185.184.37:37684|92:27:c5:47:c9:ce(5cd122c9-maximeheckel.node.tutum.io)]: connection added (new peer)
weave 2015/09/15 10:19:25.538672 ->[146.185.184.37:37684|92:27:c5:47:c9:ce(5cd122c9-maximeheckel.node.tutum.io)]: connection shutting down due to error: write tcp4 146.185.184.37:37684: connection reset by peer
weave 2015/09/15 10:19:25.539532 ->[146.185.184.37:37684|92:27:c5:47:c9:ce(5cd122c9-maximeheckel.node.tutum.io)]: connection deleted
weave 2015/09/15 10:19:25.540407 ->[146.185.184.37:37685] connection accepted
weave 2015/09/15 10:19:25.547399 ->[146.185.184.37:37685|92:27:c5:47:c9:ce(5cd122c9-maximeheckel.node.tutum.io)]: completed handshake; using protocol version 1
weave 2015/09/15 10:19:25.547595 ->[146.185.184.37:37685|92:27

MaximeHeckel

class MyArticleView extends React.Component {
  ...
  render() {
    return (
      <div className={css.mainContainer}>
        <div className={css.wrapper}>
          <div className={css.titleContainer}>
            <div className={css.title}>
              <span>{this.renderTitle()}</span>
            </div>

MaximeHeckel

class MyArticleView extends React.Component {
  ...
  render() {
    return (
      <Article>
        <Article.Title>{this.renderTitle()}</Article.Title>
        <Article.Subtitle>{this.renderSubtitle()}</Article.Subtitle>
        <Article.Metadata>
          {this.renderAuthor()}
          {this.renderDate()}

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

<Article>
  <Article.Title>
    My Article Title
  </Article.Title>
</Article>

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';
import { mount } from 'enzyme';
import Article from '../';

// First we declare some mocks
const Content = () => <div>[Mock] Content</div>;
const Subtitle = () => <div>[Mock] Subtitle</div>;
const Comments = () => <div>[Mock] Comments</div>;
const Metadata = () => <div>[Mock] Metadata</div>;
const Title = () => <div>[Mock] Title</div>;

MaximeHeckel

...

const Title = () => null;
Title.displayName = 'Title';

const Subtitle = () => null;
Subtitle.displayName = 'Subtitle';

const Metadata = () => null;
Metadata.displayName = 'Metadata';