Paulo Dutra paulodutra

Desenvolvedor Web. Atualmente trabalhando com as seguintes tecnologias: Docker, Kubernetes, Node.JS, JS, React JS, Laravel, Lumen, MongoDB, Mysql e Postgresql.

11 followers · 33 following

http://paulodutrainfo.com.br/

View GitHub Profile

Recently created

Least recently created

Recently updated

Least recently updated

paulodutra / exports module

Last active August 2, 2024 18:23

Ways of exports and imports modules using CommonJS

	First way, object using module.exports

	module.exports = {
	sum: function(a,b){
	return a + b;
	},
	sub: function(a,b){
	return a - b;
	}

paulodutra / Button.tsx

Created August 23, 2023 13:33

Example using useState with parameter to other component - 2/2

	import React from 'react'

	type ButtonProps = {
	increment: React.Dispatch<React.SetStateAction<number>>
	}
	export const Button = ({increment }: ButtonProps) => {
	return <button onClick={() => increment((number) => number + 1)}>Increment</button>
	}

paulodutra / App.tsx

Created August 23, 2023 13:32

Example using useState with parameter to other component - 1/2

	import React, { useEffect } from 'react';
	import { Button } from './Button';

	function App() {
	const [total, setTotal] = React.useState(0);
	return (
	<div>
	<p>Total: {total}</p>
	<Button increment={setTotal} />
	</div>

paulodutra / App.tsx

Created August 23, 2023 12:44

Example of component that use the input and checkbox component

	import React from 'react';
	import { Button } from './Button';
	import { Input } from './Input';
	import { Checkbox } from './Checkbox';

	function App() {
	const [total, setTotal] = React.useState(0)
	const [data, setData] = React.useState('');

	function increment() {

paulodutra / Checkbox-InlineChangeFunction.tsx

Created August 18, 2023 13:18

An example of checkbox component using the inline onChange function to set value

	import React from 'react'

	export const Checkbox = ({ label} : {label: string}) => {
	const [value, setValue] = React.useState(false);
	return (
	<label style={{
	padding: "1rem",
	border: value ? "2px solid #8D2" : "2px solid #F70"
	}}>
	<input

paulodutra / Checkbox-ChangeEventHandler.tsx

Created August 18, 2023 13:13

An example of checkbox component using the React.ChangeEventHandle to set value

	import React from 'react'

	export const Checkbox = ({ label} : {label: string}) => {
	const [value, setValue] = React.useState(false);
	const handleChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {
	setValue(event.currentTarget.checked)
	}
	return (
	<label style={{
	padding: "1rem",

paulodutra / Button-ComponentProps.tsx

Created August 17, 2023 19:03

Component button using React with typescript and ComponentProps

	import React from 'react'

	type ButtonProps = React.ComponentProps<"button"> & {
	lenghtButton?: string
	}
	export const Button = ({children, lenghtButton, ...props}: ButtonProps) => {
	return (
	<button
	style={{fontSize: lenghtButton}}
	{...props}

paulodutra / Button-PropsWithChildren.tsx

Last active August 17, 2023 19:02

Component button using React with typescript and PropsWithChildren

	import React from 'react'

	type ButtonProps = React.PropsWithChildren<{
	lenghtButton?: string;
	onClick?: () => void
	}>

	export const Button = ({children, lenghtButton, onClick}: ButtonProps) => {
	return (
	<button onClick={onClick} style={{fontSize: lenghtButton}}>

paulodutra / Button-ReactNode.tsx

Created August 17, 2023 18:59

Component button using React with typescript and ReactNode

	import React, { ReactNode } from 'react'

	type ButtonProps = {
	lenghtButton?: string;
	children: ReactNode;
	onClick?: () => void
	};
	export const Button = (props: ButtonProps) => {
	return (
	<button onClick={props.onClick} style={{fontSize: props.lenghtButton}}>

paulodutra / Button.tsx

Last active August 17, 2023 18:52

Three examples of buttons components using type for props without React.PropsWithChildren

	import React, { ReactNode } from 'react'

	type ButtonProps = {
	lenghtButton?: string;
	children: ReactNode;
	onClick?: () => void
	};
	export const Button = (props: ButtonProps) => {
	return (
	<button onClick={props.onClick} style={{fontSize: props.lenghtButton}}>

Newer Older