diego-miranda-ng’s gists

diego-miranda-ng / App.js

Created September 17, 2020 01:35

Exemplos de código para o artigo "React Hooks — Um 'Breve' Resumo"

	// App.js
	import React, { useState, useEffect } from "react";
	import useWindowWidth from "./useWindowWidth";

	export default App = (props) => {
	const [isMobile, setIsMobile] = useState(false);
	const width = useWindowWidth();

	useEffect(() => {
	setIsMobile(width <= 500);

diego-miranda-ng / App.js

Created August 22, 2020 02:37

Exemplo da utilização de um hook personalizado para obter a largura da janela.

	// App.js
	import React, { useState, useEffect } from "react";
	import useWindowWidth from "./useWindowWidth";

	export default App = (props) => {
	const [isMobile, setIsMobile] = useState(false);
	const width = useWindowWidth();

	useEffect(() => {
	setIsMobile(width <= 500);

diego-miranda-ng / useWindowWidth.js

Created August 22, 2020 02:33

Exemplo de um hook personalizado para obter a largura da janela.

	//useWindowWidth.js
	import { useLayoutEffect, useState } from "react";

	export default function useWindowSize() {
	const [width, setWidth] = useState(0);

	useLayoutEffect(() => {
	const updateWidth = () => setWidth(window.innerWidth);

	window.addEventListener("resize", updateWidth);

diego-miranda-ng / ClassComponentLifeCycleExample.js

Created August 22, 2020 02:22

Exemplo da utilização do ciclo de vida em componentes de classe.

	import React from "react";

	export default class App extends React.Component {
	constructor(props) {
	super(props);
	this.state = {
	count: 0,
	person: "TheAlfadur"
	};
	}

diego-miranda-ng / UseEffectExemple2.js

Last active August 22, 2020 02:16

Exemplo de utilização do useEffect para implementação do ciclo de vida do componente, executando os logs somente quando o estado referente a eles são atualizados.

	import React, { useState, useEffect } from "react";

	export default App = (props) => {
	const [person, setPerson] = useState("TheAlfadur");
	const [count, setCount] = useState(0);

	useEffect(() => {
	console.log(count);
	}, [count]);

diego-miranda-ng / UseEffectExemple.js

Last active August 22, 2020 02:10

Exemplo de utilização do useEffect para implementação do ciclo de vida do componente.

	import React, { useState, useEffect } from "react";

	export default App = (props) => {
	const [count, setCount] = useState(0);

	useEffect(() => {
	console.log(count);
	return () => {
	console.log(`Componente desmontado. ${count}`);
	};

diego-miranda-ng / UseStateExampleWithObject.js

Last active August 22, 2020 02:22

Exemplo da utilização do hook useState para lidar com um estado armazenando um objeto em um componente de função.

	import React, { useState } from "react";

	export default App = (props) => {
	const p = { name: "Nome da pessoa", age: 24 };
	const [person, setPerson] = useState(p);
	return <span>{`${person.name} - ${person.age}`}</span>;
	};

diego-miranda-ng / ClassComponentStateExample.js

Last active August 22, 2020 02:22

Exemplo do uso de estados em componentes de classe.

	import React from "react";

	export default class App extends React.Component {
	constructor(props) {
	super(props);
	this.state = {
	count: 0
	};
	}

diego-miranda-ng / UseStateExample.js

Last active August 21, 2020 01:22

Exemplo da utilização do hook useState para lidar com estados em um componente de função.

	import React, { useState } from "react";

	export default App = (props) => {
	const [count, setCount] = useState(0);
	return <button onClick={() => setCount(count + 1)}>{count}</button>;
	};

diego-miranda-ng / ProcessVideo480PJob.php

Last active November 22, 2019 18:32

PHP-FFMPeg exemple in Laravel

	<?php
	namespace App\Jobs;

	require_once __DIR__ . '/../../vendor/autoload.php';

	use Illuminate\Support\Facades\Log;
	use App\Interfaces\ModelInterface;
	use Illuminate\Bus\Queueable;
	use Illuminate\Support\Facades\File;
	use Illuminate\Queue\SerializesModels;

Diego Miranda Neves Gomes diego-miranda-ng