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:
I hereby claim:
To claim this, I am signing this object:
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 |
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> |
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()} |
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)) { |
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 |
<Article> | |
<Article.Title> | |
My Article Title | |
</Article.Title> | |
</Article> |
// @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; |
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>; |
... | |
const Title = () => null; | |
Title.displayName = 'Title'; | |
const Subtitle = () => null; | |
Subtitle.displayName = 'Subtitle'; | |
const Metadata = () => null; | |
Metadata.displayName = 'Metadata'; |