Skip to content

Instantly share code, notes, and snippets.

Chris Pearce chrisui

Block or report user

Report or block chrisui

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@chrisui
chrisui / owner.js
Last active Sep 7, 2017
Who is the OWNER of the <A /> instance here?
View owner.js
const A = () => <div />;
const B = ({children}) => children();
const C = () => <B>{() => <A />}</B>;
@chrisui
chrisui / 1. testComponent.js
Created Mar 31, 2017
Component test utility
View 1. testComponent.js
export const testComponent = (
Component: RC,
defaultProps?
: () => Object
= () => ({}),
) => {
return (otherProps: Object, hoc?: (RC) => RC) => {
// our final props for the component merged from default
// and per-test
View jsxstyle-composition.js
function Text(props) {
return <Span color="black" {...props} />
}
const BlueText = withProps({
color: 'blue'
})(Text)
View report.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>Webpack Bundle Analyzer</title>
<!-- viewer.js -->
<script>
@chrisui
chrisui / resources.md
Last active Oct 7, 2016
Lystable Frontend Learning Resources
View resources.md
  • "React" - Needs no introduction...
  • "React Patterns" - A nice learning resource for all the patterns you'll see used across the React ecosystem
  • “Real World Redux” - Talk I gave back in feb on our experience with Redux (there’s a recording linked on that page)
  • “Recompose” - Is a react utility library we use extensively which is allowing us to move towards writing dumber components with localised containers (ie. removing api redux as a first class api)
@chrisui
chrisui / 1. component.js
Last active Sep 21, 2016
Perhaps full reducer/actions are overkill for 90% of our component state needs?
View 1. component.js
export function Component({state, increment}) {
return (
<div>
{state.count} hits!
<button onClick={increment}>Hit me!</button>
</div>
);
}
View recon-stats.txt
These stats were made available from https://github.com/lystable/recon
Num modules parsed
How many modules did we explore?
1243
---
Num components
@chrisui
chrisui / stats.stdout
Last active Aug 25, 2016
Recon Stats Output
View stats.stdout
Num modules:
1123
Num components:
647
Most depended on components:
[ { name: 'Text', usages: 568 },
{ name: 'Button', usages: 160 },
{ name: 'Icon', usages: 127 },
@chrisui
chrisui / button__index.js
Last active Nov 15, 2016
example component
View button__index.js
// all of our components are in their own directories with local css
// so we use index.js (node resolution paradigm) so we can write:
// `import Button from 'components/button'`
// rather than:
// `import Button from 'components/button/button'`
//
// eg. dir structure
// /components/button
// /components/button/index.js
// /components/button/button.js
@chrisui
chrisui / example.jsx
Created May 19, 2016
Clone `children` to pass extra props
View example.jsx
// container component
class HandlerA {
handleSubmit(event) {
// do stuff
}
render() {
const {
children // react-router passes your child in here
You can’t perform that action at this time.