Skip to content

Instantly share code, notes, and snippets.

View marg51's full-sized avatar
🎯
Focusing

Laurent M marg51

🎯
Focusing
View GitHub Profile
@marg51
marg51 / View.jsx
Created April 20, 2017 09:10
React — Decorators and how to easily manage loading states
import React, {Component} from 'react';
import {promiseable, renderWhenLoaded} from "./promise"
export default class View extends Component {
constructor() {
super()
this.state = {
data: {a: 1}
}
@marg51
marg51 / .vscode⁄settings.json
Created February 5, 2017 17:57
create-react-app with vscode & typescript
// Place your settings in this file to overwrite default and user settings.
{
"files.exclude": {
"**/.git": true,
"**/.svn": true,
"**/.hg": true,
"**/.DS_Store": true,
"src/**/*.jsx": true
}
}
@marg51
marg51 / App.jsx
Last active February 4, 2017 13:14
ng-repeat with inferno / react
import Inferno from 'inferno';
import Component from 'inferno-component';
import './App.css';
import Repeater from "./Repeater"
import DisplayProps from "./DisplayProps"
class App extends Component {
constructor(props) {
super(props)
@marg51
marg51 / log.js
Created January 26, 2017 12:25
Logger
require("colors")
exports.createLogger = (type) => ({
log: (...args) => console.log(`[${type}]`.gray, ...args),
warn: (...args) => console.log(`[${type}]`.cyan, ...args),
error: (...args) => console.log(`[${type}]`.red, ...args),
success: (...args) => console.log(`[${type}]`.green, ...args)
})
function compose(composeFn, param) {
if(typeof composeFn != "function")
return {}
return composeFn(param)
}
function connectProps(store, mapStateToProps, mapDispatchToProps) {
return {
...compose(mapStateToProps, store.getState()),
import TodoList from "./todo-list"
function connect(mapStateToProps, mapDispatchToProps) {
return (Target) => {
class Connected extends Component {
render() {
// we pass the props down
return (<Target {...this.props} />)
}
@marg51
marg51 / connect-step2.js
Created January 22, 2017 16:58
medium — connect
function connect(mapStateToProps, mapDispatchToProps) {
return (Target) => {
// we need to return a class
class Connected extends Component {
render() {
return <Target />
}
}
@marg51
marg51 / connect-step1.js
Created January 22, 2017 13:36
medium — react-redux
function connect(mapStateToProps, mapDispatchToProps) {
// Target is a component, TodoList in our example
return Target => {
// do something with it
}
}
@marg51
marg51 / react-redux-without-decorators.js
Last active January 22, 2017 13:35
Medium — Decorators
// example from http://redux.js.org/docs/basics/UsageWithReact.html
// annotated and simplified for this Medium story
import { connect } from 'react-redux'
import TodoList from "./todo-list"
const mapStateToProps = (state) => {
return {
todos: state.todos // bound to `this.props.todos`
}
class App extends Component {
componentDidMount() {
this.refs.nav.navigator.navigationContext.addListener("willfocus", () => {
// do something smart, ie. close all modals, update your redux state, whatever
})
}
render() {
return (
<View style={styles.container}>
<NavigatorIOS