(by @andrestaltz)
If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.
/** | |
* Deep diff between two object, using lodash | |
* @param {Object} object Object compared | |
* @param {Object} base Object to compare with | |
* @return {Object} Return a new object who represent the diff | |
*/ | |
function difference(object, base) { | |
function changes(object, base) { | |
return _.transform(object, function(result, value, key) { | |
if (!_.isEqual(value, base[key])) { |
import React from 'react'; | |
import ReactDOM from 'react-dom'; | |
class App extends React.Component { | |
constructor(props) { | |
super(props); | |
this.state = { | |
posts: [], | |
isLoading: false, | |
offset: 0, |
import React, { Component } from 'react'; | |
import reactLogger from './reactLogger'; | |
const cars = [ | |
{ id: 1, brand: 'Maruti Suzuki', model: 'Alto', year: '2017' }, | |
{ id: 2, brand: 'Honda', model: 'City', year: '2018' }, | |
{ id: 3, brand: 'Tata', model: 'Bolt', year: '2015' }, | |
{ id: 4, brand: 'Ford', model: 'Classic', year: '2013' }, | |
{ id: 5, brand: 'BMW', model: '5 Series', year: '2018' }, | |
]; |
export default ( | |
label, | |
componentName, | |
prevProps, | |
nextProps, | |
prevState, | |
nextState | |
) => { | |
const groupLabel = | |
(componentName && `[${label || "react-logger"} - <${componentName} />]`) || |
(by @andrestaltz)
If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.
'use strict'; | |
function bind(fn, thisArg) { | |
return function wrap() { | |
var args = new Array(arguments.length); | |
for (var i = 0; i < args.length; i++) { | |
args[i] = arguments[i]; | |
} | |
return fn.apply(thisArg, args); | |
}; |
import React from 'react'; | |
import EnzymeConfig from './../../../enzyme'; | |
import { shallow } from 'enzyme'; | |
import Alert from './Alert'; | |
EnzymeConfig(); | |
describe('Alert component testing', () => { | |
// 1. alert-primary |
class App extends Component { | |
render() { | |
return ( | |
<React.Fragment> | |
<h1>Currency Converter</h1> | |
<Amount | |
render={data => { | |
return ( | |
<React.Fragment> | |
<Euro amount={data.amount} /> |
class App extends Component { | |
static propTypes = { | |
title: propTypes.string, | |
}; | |
static defaultProps = { | |
title: 'app works from default props', | |
} | |
render() { |