thulioph

import React from 'react';
import { branch } from 'recompose';

const MyComponent = () => <h2>Hello!</h2>;

const IsLessThanZero = BaseComponent => props => (
  <div>
    <BaseComponent {...props} />
    <h1>Less or equal than zero!</h1>
  </div>

thulioph

import React from 'react';
import { withState } from 'recompose';

const MyComponent = ({ counter, setCounter }) => (
  <div>
    <h1>{counter}</h1>
    <button onClick={() => setCounter(counter + 1)}>Add</button>
    <button onClick={() => setCounter(counter - 1)}>Remove</button>
  </div>
);

thulioph

import React from 'react';
import { lifecycle } from 'recompose';

const MyComponent = ({ data }) => (
  <div>{data}</div>
);

const MyComponentModified = lifecycle({
  componentDidMount() {
    doSomething().then(data => {

thulioph

Slides

• https://speakerdeck.com/thulioph/styled-components

Code

• Exemplo 01 - Header
• Exemplo 02 - Button
• Exemplo 03 - Card
• Exemplo 04 - App

thulioph

$ brew install -v libxmlsec1
==> Installing dependencies for libxmlsec1: libunistring, p11-kit
rm /usr/local/include/unicase.h
rm /usr/local/include/uniconv.h
rm /usr/local/include/unictype.h
rm /usr/local/include/unigbrk.h
rm /usr/local/include/unilbrk.h
rm /usr/local/include/uniname.h
rm /usr/local/include/uninorm.h
rm /usr/local/include/unistdio.h

thulioph

version: 2
jobs:
  build:
    docker:
      - image: circleci/node:8.2.1
    steps:
      - checkout
      - run: echo "My first job is build."
  test:
    steps:

thulioph

version: 2
jobs:
  build:
    docker:
      - image: circleci/node:8.2.1
    steps:
      - checkout
      - run: echo "My first job is build."
  test:
    steps:

thulioph

version: 2
jobs:
  build:
    docker:
      - image: circleci/node:8.2.1
    steps:
      - checkout
      - run: echo "My first job is build."
  test:
    steps:

thulioph

version: 2
jobs:
  build:
    docker:
      - image: circleci/ruby:2.4.1
    steps:
      - checkout
      - run: echo "A first hello"

thulioph

React Ecosystem Links

Some articles, videos, and code to guide your study with React.

React

• https://egghead.io/courses/build-a-react-app-with-redux
• https://reactjs.org/tutorial/tutorial.html
• https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0
• https://reactjs.org/docs/higher-order-components.html