clucasalcantara

import React, { Component } from 'react'
import CounterWrapper from './CounterWrapper'
import CounterUI from './CounterUI'

class Counter extends Component {
  render() {    
    return (
      <CounterWrapper
        render={
          ({ increment, decrement, count }) => (

clucasalcantara

import React from 'react'

const CounterUI = ({ increment, decrement, count}) => (
  <div>
    <div className="counter-title">
      <h3>Counter example using Render Props</h3>
    </div>
    <div className="counter-ui">
      <input type="text" disabled={true} value={count} />
      <button onClick={() => increment()}>

clucasalcantara

import React, { Component } from 'react'
import PropTypes from 'prop-types'

import './App.css'

class CounterWrapper extends Component {
  state = {
    count: 0,
  }
  

clucasalcantara

if (isDevelopment && module.hot) {
    // Hot module reload for App and its routes.
    module.hot.accept('./pages/buildRoutes', () =>
        renderApp({ routes: buildRoutes() })
    );

    // While HMRE works, react-router does a `console.error()` because its routes prop changed.
    // We monkey-patch `console.error()` to ignore that error.
    // See: https://github.com/gaearon/react-hot-loader/issues/298
    // See: https://github.com/ReactTraining/react-router/issues/2704

clucasalcantara

// What will the code below output to the console and why?

var myObject = {
    foo: "bar",
    func: function() {
        var self = this;
        console.log("outer func:  this.foo = " + this.foo);
        console.log("outer func:  self.foo = " + self.foo);
        (function() {
            console.log("inner func:  this.foo = " + this.foo);

clucasalcantara

/* eslint-disable no-console */
import 'babel-polyfill'
import path from 'path'
import express from 'express'
import compression from 'compression'
import cache from 'cache-control'
import React from 'react'
import serialize from 'serialize-javascript'
import { renderToStaticMarkup } from 'react-dom/server'
import { Provider } from 'react-redux'

clucasalcantara

console.log(true ? "verdadeiro" : "falso");

console.log(if(true) ? "verdadeiro" : "falso"); // BLAME HERE SYNTAX ERROR!!!

clucasalcantara

const greeting = greet => name => `${greet}, ${name}`;
const eae = greeting('Eae');

eae('World'); // Eae, World
eae('Catioríneo'); // Eae, Catioríneo

clucasalcantara

// Thanks Matheus Marciglio: https://github.com/mtmr0x

// This is a regular and not curried function
const sum = function(x, y) => x + y
sum(1, 2) // 3

// With Currying technique we transform that into a curried function
const currySum = (x) => (y) => x + y
currySum(1)(2) // 3

clucasalcantara

const compose = (f, g) => x => f(g(x));

const addHeart = x => `${x.toLowerCase()}, <3`;
const exclaim = x => x + '!';

const inLove = compose(addHeart, exclaim);

inLove('Hey babe'); // hey babe,  <3!