Skip to content

Instantly share code, notes, and snippets.

Avatar

Bruno Nardini megatroom

View GitHub Profile
@megatroom
megatroom / LastConversions.js
Created Jan 24, 2022
Example used in a Medium post
View LastConversions.js
export default function LastConversions({ env }) {
const [conversions, setConversions] = useState([])
const listSize = conversions.length
// ... business logic
return (
<Fade in>
<Section>
<Heading>{t('LastConversions.header')}</Heading>
@megatroom
megatroom / Dashboard.js
Created Jan 24, 2022
Example used in a Medium post
View Dashboard.js
export default function Dashboard() {
return (
<GridContainer>
<Funnel />
<LastConversions />
<TwoColumnSection>
<LastLandingPages />
<LastEmailCampaign />
</TwoColumnSection>
<MostViewedPages />
@megatroom
megatroom / Counter.js
Created Feb 13, 2020
React Counter with nested function as side effect dependency [solution 2]
View Counter.js
import React, { useState, useEffect, useCallback } from "react";
const Logger = ({ index, getCounter }) => {
const [text, setText] = useState("");
useEffect(() => {
const newText = `Contador ${index}: ${getCounter()}`;
setText(newText);
console.log(newText);
}, [index, getCounter]);
@megatroom
megatroom / Counter.js
Created Feb 13, 2020
React Counter with nested function as side effect dependency [solution 1]
View Counter.js
const Logger = ({ index, getCounter }) => {
const [text, setText] = useState("");
// Executa a função para obter o contador
const counter = getCounter();
useEffect(() => {
// usa o contador dentro do callback
const newText = `Contador ${index}: ${counter}`;
setText(newText);
@megatroom
megatroom / Counter.js
Created Feb 13, 2020
React Counter with nested function as side effect dependency [problem]
View Counter.js
import React, { useState, useEffect } from "react";
const Logger = ({ index, getCounter }) => {
const [text, setText] = useState("");
useEffect(() => {
const newText = `Contador ${index}: ${getCounter()}`;
setText(newText);
console.log(newText);
}, [index, getCounter]);
@megatroom
megatroom / reactNestedFunctions.js
Created Feb 13, 2020
React component nested functions
View reactNestedFunctions.js
const FunctionComponent = () => {
// Função aninhada
const myNestedFunction = () => {};
return <h1>Estou sendo renderizado</h1>;
};
class ClassComponent extends React.Component {
render() {
// Função aninhada
@megatroom
megatroom / functions.js
Last active Feb 13, 2020
JavaScript Functions equality comparisons and sameness
View functions.js
const functionA = () => {};
const functionB = () => {};
const copyFromB = functionB;
functionA === functionA // true
functionB === functionB // true
functionB === copyFromB // true
functionB == copyFromB // true
Object.is(functionB, copyFromB) // true
@megatroom
megatroom / optionalCatchBinding.js
Created Jan 17, 2020
Optional Catch Binding for JavaScript
View optionalCatchBinding.js
// Try-catch com a declaração obrigatória do erro
function tryToParseJSON(jsonString)
try {
return JSON.parse(jsonString);
} catch (unused) {
return false;
}
}
// Proposta com a declaração opcional do erro
@megatroom
megatroom / optionalChaining.js
Created Jan 17, 2020
Optional Chaining for JavaScript
View optionalChaining.js
// message, body e user devem estar definidos para que este código não quebre
const name = message.body.user.firstName;
// atualmente precisamos fazer desta forma para nos proteger:
const name = message
&& message.body
&& message.body.user
&& mesage.body.user.firstName;
// ou com um valor padrão alternativo:
@megatroom
megatroom / HomePage.js
Created Jun 22, 2019
Exemplo de código para o artigo: Refatorando código legado em projetos React - Parte IV
View HomePage.js
import React from "react";
import { connect } from "react-redux";
import CourseList from "../../components/CourseList";
import Heading from "../../components/Heading";
import LeadMessage from "../../components/LeadMessage";
import { onGetCourses, onGetLectures } from "../../store/actions";
export class HomePage extends React.Component {