[
{
"path": ".github/ISSUE_TEMPLATE/discussion.md",
"content": "---\nname: Issue de discussão\nabout: Sugestões, alterações, correções, etc.\ntitle: ''\nlabels: ''\nassignees: ''\n\n---\n\n## O que?\n\n\n\n(Escreva aqui.)\n\n## Por quê?\n\n\n\n(Escreva aqui.)\n\n## Referências\n\n\n\n(Escreva aqui.)\n"
},
{
"path": ".github/pull_request_template.md",
"content": "## Descrição\n\n\n\n(Escreva aqui.)\n\n## O que foi feito nesse PR?\n\n- [x] Tarefa já realizada\n- [ ] Tarefa à ser feita\n\n## Dependência de outras Issues\n\n> Exemplo: #1\n> \n"
},
{
"path": ".gitignore",
"content": "./node_modules\nnode_modules\nnode_modules/*\n./.next\n.next"
},
{
"path": "README.md",
"content": "# guiareact.org \nSite em Português com tradução do Original reactpatterns.com de Michael Chan - [@chantastic](https://github.com/chantastic)\n\nhttps://guiareact.org\n\n\n## CONTRIBUA\n\n - Clone o projeto em sua máquina\n - Edite ou Crie os arquivos MD na pasta **documentation**\n - Abra uma [Issue](https://github.com/rubenmarcus/guiareact.org/issues/new).\n - Crie um [P/R](https://github.com/rubenmarcus/guiareact.org/compare) e adicione o link na sua issue.\n\n\n## ROADMAP\n\n- TROCAR TODOS EXEMPLOS DE CLASSE PARA EXEMPLOS COM COMPONENTES FUNCIONAIS\n- ADICIONAR GUIA DE HOOKS\n- ADICIONAR MAIS EXEMPLOS\n- ADICIONAR GUIA DE NEXT.JS\n- ADICIONAR GUIA DE CSS IN JS\n- ADICIONAR GUIA DE REDUX\n- ADICIONAR GUIA DE CONTEXT API"
},
{
"path": "components/header.js",
"content": "export default function AppHeader(props){\n\n return(\n \n
{props.title}
\n \n \n )\n}"
},
{
"path": "components/mdcontainer.js",
"content": "import ReactMarkdown from \"react-markdown\";\nimport remarkSlug from \"remark-slug\";\nimport remarkLinks from \"remark-external-links\";\nimport remarkHljs from \"remark-highlight.js\";\nimport remarkToc from \"remark-toc\";\n\nexport default function MdContainer({ markdown }) {\n const remarkPluginSet = [remarkSlug, remarkLinks, remarkHljs, remarkToc];\n\n return ;\n}\n"
},
{
"path": "components/pagehead.js",
"content": "export default function PageHead(props) {\n const GA_TRACKING_ID = \"G-TQFVHD7RW1\";\n\n return (\n <>\n {props.title? props.title : 'Guia de Padrões React'}\n \n \n \n \n \n \n \n \n \n \n \n \n );\n}"
},
{
"path": "config/md-loader.js",
"content": "import Hooks from \"../documentation/DOC-HOOKS.md\";\nimport Contribua from \"../documentation/DOC-CONTRIBUA.md\";\nimport Links from \"../documentation/DOC-LINKS.md\";\n\nconst MdLoader = {\n hooks: Hooks,\n contribua: Contribua,\n links: Links,\n};\n\nexport default MdLoader;\n"
},
{
"path": "config/static-paths.js",
"content": "const ROUTES = [\n { params: { slug: \"hooks\", title: \"Guia de Hooks\" } },\n { params: { slug: \"contribua\", title: \"Guia de Padrões React\" } },\n { params: { slug: \"links\", title: \"Guia de Padrões React\" } },\n];\n\nexport const STATIC_PATHS = { paths: ROUTES, fallback: false };\n\nexport const PATH_PROPS = (slug) =>\n STATIC_PATHS.paths.filter(({ params }) => params.slug === slug)[0].params;"
},
{
"path": "documentation/DOC-HOME.md",
"content": "# Guia de Padrões React\n\nUm guia de padrões React em Português.\n\nBaseado no [Original](https://reactpatterns.com) por Michael Chan [@chantastic](https://github.com/chantastic)\n\nTraduzido para Português e revisado por [@rubenmarcus](https://github.com/rubenmarcus)\n\ncom contribuição de [@LhuizF](https://github.com/LhuizF), [@matheusinfo](https://github.com/matheusinfo), [@luizwbr](https://github.com/luizwbr), [@arimariojesus](https://github.com/arimariojesus), [@gabepinheiro](https://github.com/gabepinheiro), [@GusttavoCastilho](https://github.com/GusttavoCastilho) e [@azraelgarden](https://github.com/azraelgarden).\n\n## Conteúdo\n\n- [Traduções](#traduções)\n- [Elementos](#elementos)\n- [Componentes](#componentes)\n- [Fragmentos](#fragmentos)\n - [Sintaxe curta](#sintaxe-curta)\n - [Exemplo com lista de componentes](#exemplo-com-lista-de-componentes)\n- [Expressões](#expressões)\n- [Props (Propriedades)](#props-propriedades)\n- [defaultProps (Propriedades Padrão)](#defaultprops-propriedades-padrão)\n- [Desestruturando props](#desestruturando-props)\n- [Atributos de spread JSX](#atributos-de-spread-jsx)\n- [Mergeando props desestruturadas com outros valores](#mergeando-props-desestruturadas-com-outros-valores)\n- [Renderização Condicional](#renderização-condicional)\n - [`if`](#if)\n - [`unless` (ao menos que)](#unless-ao-menos-que)\n - [`if-else` (Operador Ternário)](#if-else-operador-ternário)\n- [Tipos de filhos (Children Types)](#tipos-de-filhos-children-types)\n - [`String`](#string)\n - [`Array`](#array)\n- [Array como filho (Array as children)](#array-como-filho-array-as-children)\n- [Função como filha (Function as children)](#função-como-filha-function-as-children)\n- [Render prop](#render-prop)\n- [Passando um Filho (Children)](#passando-um-filho-children)\n- [Componente Proxy](#componente-proxy)\n- [Estilizando componentes](#estilizando-componentes)\n- [Switch de Eventos](#switch-de-eventos)\n- [Componente de Layout](#componente-de-layout)\n- [Container Components](#container-components)\n- [Higher-order components](#higher-order-components)\n- [Elevando o state (state hoisting)](#elevando-o-state-state-hoisting)\n- [Inputs Controlados](#inputs-controlados)\n\n## Traduções\n\nTraduções não verificadas, e links não significam que são aprovadas.\n\n[Chinese](https://reactpatterns.cn)\n\n## Elementos\n\n[Elementos](https://pt-br.reactjs.org/docs/glossary.html#elements) são tudo que está envolvido por <>.\n\n```jsx\n\n\n```\n\n[Componentes](#componentes) retornam Elementos.\n\n## Componentes\n\nUm [Componente](https://pt-br.reactjs.org/docs/glossary.html#components) é definido por uma função que declarada retorna um [Elemento](#elementos) React.\n\n```jsx\nfunction MeuComponente() {\n return
Olá Mundo
;\n}\n```\n\n## Fragmentos\n\nUm [Fragmento](https://pt-br.reactjs.org/docs/fragments.html) permite agrupar uma lista de filhos sem adicionar nós extras ao DOM.\n\n```jsx\nfunction MeuComponente() {\n return (\n \n
Olá
\n
Mundo
\n \n );\n}\n```\n\nIsto renderizará no DOM apenas os seguintes elementos:\n\n```html\n\n
Olá
\n
Mundo
\n\n```\n\n### Sintaxe Curta\n\nExiste uma sintaxe nova e mais curta que você pode utilizar para declarar fragmentos. São as tags vazias:\n\n```jsx\nfunction MeuComponente() {\n return (\n <>\n
Olá
\n
Mundo
\n \n );\n}\n```\n\n## Expressões\n\nUse chaves para [Incorporar expressões](https://pt-br.reactjs.org/docs/introducing-jsx.html#embedding-expressions-in-jsx) no [JSX](https://pt-br.reactjs.org/docs/glossary.html#jsx).\n\n```jsx\nfunction OlaUsuario() {\n const nome = \"Ruben\";\n\n return
Olá {nome}!
;\n}\n```\n\n## Props (Propriedades)\n\nEntenda como `props` como um argumento externo para possibilitar customizações para seu componente.\n\n```jsx\nfunction DigaOla(props) {\n return
Olá {props.nome}!
;\n}\n```\n\n## defaultProps (Propriedades Padrão)\n\nEspecificar valores padrão de `props` com `defaultProps`.\n\n```jsx\nfunction OlaUsuario(props) {\n return
Olá {props.nome}!
;\n}\nOlaUsuario.defaultProps = {\n nome: \"Visitante\",\n};\n```\n\n## Default function parameters (parâmetros predefinidos de uma função)\n\nEspecificar valores padrão de `props` com `default function parameters`.\nOs parâmetros predefinidos de uma função permitem que parâmetros regulares sejam inicializados com valores iniciais caso `undefined` ou nenhum valor seja passado.\n\n```jsx\n// Utilizamos aqui uma desestruturação no objeto `props` para pegarmos a prop `nome`\nfunction OlaUsuario({ nome = \"Visitante\" }) {\n return
Olá {nome}!
;\n}\n```\n\n---\n\n## Desestruturando props\n\n[Atribuição via desestruturação](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) é um recurso do Javascript moderno.\n\nFoi adicionado a linguagem no ES2015.\n\n```js\nconst usuario = { nome: \"Ruben\" };\nconst { nome } = usuario;\n```\n\nFunciona com Array também.\n\n```js\nconst numeros = [\"um\", \"dois\"];\nconst [um, dois] = numeros;\n```\n\nAtribuição via desestruturação (Destructuring assignment) é usado muito em [componentes funcionais](#function-component).\nEssas declarações de componente são equivalentes.\n\n```jsx\nconst Ola = (props) =>
Olá {props.name}!
;\n\nconst Ola = ({ name }) =>
Olá {name}!
;\n```\n\nExiste uma sintaxe para atribuir as `props` restantes em um objeto.\nSe chama [Parâmetros](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Functions/rest_parameters) e parece assim:\n\n```jsx\nconst Ola = ({ name, ...restProps }) =>
Olá {name}!
;\n```\n\nEsses três pontos (`...`) pegam todas a props que faltam e atribuem ao parâmetro `restProps`.\n\nEntão o que fazer com `restProps` quando você o tem?\n\nContinue lendo...\n\n---\n\n## Atributos de spread JSX\n\nAtributos de Spread é uma feature do [JSX](https://pt-br.reactjs.org/docs/introducing-jsx.html).\nÉ uma sintaxe para fornecer as propriedades de um objeto como atributos JSX.\n\nSeguindo o exemplo de [Destructuring props](#desestruturando-props),\nPodemos fazer **spread** com `restProps` em nossa `
`.\n\n```jsx\nconst Ola = ({ name, ...restProps }) => {\n return
Hi {name}!
;\n};\n```\n\nIsso torna a função `Ola` super flexível.\nPodemos passar atributos DOM para `Ola` e que eles vão ser passados a nossa `div`.\n\n```jsx\n\n```\n\nAtribuição via desestruturação é popular porque fornece uma maneira de separar props específicas de componentes, de atributos específicos de plataforma / DOM.\n\n```jsx\nfunction Greeting({ name, ...platformProps }) {\n return
Hi {name}!
;\n}\n```\n\n---\n\n## Mergeando props desestruturadas com outros valores\n\nComponentes são abstrações.\nBoas abstrações permitem extensão.\n\nConsidere esse componente que usa um atributo `class` para estilizar um `button`.\n\n```jsx\nfunction MyButton(props) {\n return ;\n}\n```\n\nIsso funciona muito bem até tentarmos estendê-lo com outra classe.\n\n```jsx\nDelete...\n```\n\nNesse caso, `delete-btn` substitui `btn`.\n\nA ordem importa para [Atributos de spread JSX](#atributos-de-spread-jsx).\nO `props.className` sendo passado, substitui o `className` do nosso componente.\n\nPodemos mudar a ordem, mas agora o `className` **nunca** vai ser nada além de `btn`.\n\n```jsx\nfunction MyButton(props) {\n return ;\n}\n```\n\nPrecisamos usar a atribuição via desestruturação para obter o `className` e mergear com o `className` base.\nPodemos fazer isso simplesmente adicionando todos os valores a uma array e juntando-os com um espaço..\n\n```jsx\nfunction MyButton({ className, ...props }) {\n const classNames = [\"btn\", className].join(\" \");\n\n return ;\n}\n```\n\nPara não ter problemas com `undefined` aparecendo no seu `className`, você pode atualizar sua lógica para pegar valores booleanos `falso`:\n\n```jsx\nfunction MyButton({ className, ...props }) {\n const classNames = [\"btn\", className].filter(Boolean).join(\" \").trim();\n\n return ;\n}\n```\n\nPorém, lembre-se de que, se um objeto vazio for passado, ele também será incluído na classe, resultando em: `btn [object Object]`.\n\nA melhor abordagem é fazer uso de packages disponíveis, como [classnames](https://www.npmjs.com/package/classnames) ou [clsx](https://www.npmjs.com/package/clsx),que poderia ser usado para unir nomes de classe, evitando que você tenha que lidar com isso manualmente.\n\n## Renderização Condicional\n\nVocê não consegue usar if else em suas declarações de componente..\nEntão vocês pode usar o operador ternário [conditional (ternary) operator](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) ou [short-circuit](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Short-circuit_evaluation) tranquilamente.\n\n### `if`\n\n```jsx\n{\n !!condition && Irá renderizar quando for `verdadeiro`;\n}\n```\n\nDica não utilize if dessa maneira:\n\n```jsx\n{\n condition && Renderiza quando `verdadeiro`;\n}\n```\n\nO React pode imprimir um `0` no seu componente. Quando vem `0` nos seus dados, ele não considera sua variável como falsa, utilizando o !! , ele converte 0 para falso\n\n### `unless` (ao menos que)\n\n```jsx\n{\n condition || Renderizado quando `falso`;\n}\n```\n\n### `if-else` (Operador Ternário)\n\n```jsx\n{\n condition ? (\n Renderizado quando for `verdadeiro`\n ) : (\n Renderizado quando for `falso`\n );\n}\n```\n\n## Tipos de filhos (Children Types)\n\nO React consegue renderizar `children` da maioria dos tipos.\nNa maioria dos casos é um `array` ou uma `string`.\n\n### `String`\n\n```jsx\n
Olá Mundo!
\n```\n\n### `Array`\n\n```jsx\n
{[\"Olá \", Mundo, \"!\"]}
\n```\n\n## Array como filho (Array as children)\n\nProver um array como `children` é muito comum.\nÉ como as listas são renderizadas no React.\n\nUsamos o método `map()` para criar um array de elementos React para cada valor da array.\n\n```jsx\n
\n {[\"primeiro\", \"segundo\"].map((item) => (\n
{item}
\n ))}\n
\n```\n\nEsse é o equivalente a renderizar um `array` literal.\n\n```jsx\n
{[
primeiro
,
segundo
]}
\n```\n\nEste padrão pode ser combinado com desestruturação, Atributos de Spread JSX e outros componentes, para alguma coesão mais séria.\n\n```jsx\n
\n```\n\n## Função como filha (Function as children)\n\nComponentes React não suportam funções como `children`.\nPorém com o padrão, [render props](#render-prop) conseguimos criar componentes que tomam funções como `children` filhas.\n\n## Render prop\n\nAqui um componente que utiliza `render callback`.\nNão é útil, mas é um exemplo fácil para começar.\n\n```jsx\nconst Width = ({ children }) => children(500);\n```\n\nEsse componente chama `children` como função, com alguns argumentos, nesse caso o número `500`.\n\nPara usar esse componente estamos utilizando uma [Função como filha (Function as children)](#função-como-filha-function-as-children).\n\n```jsx\n{(width) =>
window é {width}
}\n```\n\nRecebemos esse output.\n\n```jsx\n
window é 500
\n```\n\nCom esta configuração, podemos usar essa prop `width` para fazer decisões de renderização.\n\n```jsx\n\n {(width) =>\n width > 600 ?
condição de largura mínima atingida!
: null\n }\n\n```\n\nSe planejamos usar muito essa condição, podemos definir outros componentes para encapsular a lógica reutilizada.\n\n```jsx\nconst MinWidth = ({ width: minWidth, children }) => (\n {(width) => (width > minWidth ? children : null)}\n);\n```\n\nClaro que um componente `Width` estático não é útil, mas aquele que observa o window do navegador é. Aqui está um exemplo de implementação.\n\n```jsx\nfunction WindowWidth({ children }) {\n const [width, setWidth] = useState(0);\n\n useEffect(() => {\n setWidth(window.innerWidth);\n window.addEventListener(\"resize\", ({ target }) =>\n setWidth(target.innerWidth)\n );\n }, []);\n\n return children(width);\n}\n```\n\nMuitos desenvolvedores preferem [Higher Order Components](#higher-order-components) para este tipo de funcionalidade. É uma questão de preferência.\n\n## Passando um Filho (Children)\n\nVocê pode criar um componente projetado para usar `context` e renderizar `children`.\n\n```jsx\nclass SomeContextProvider extends React.Component {\n getChildContext() {\n return { some: \"context\" };\n }\n\n render() {\n // como retornamos children?\n }\n}\n```\n\nVocê está diante de uma decisão. Envolver os `filhos` em uma `` estranha que retorne o `children` diretamente. As primeiras opções adicionam marcação extra (que pode quebrar alguns css). O segundo resultará em erros inúteis.\n\n```jsx\n// option 1: extra div\nreturn
{children}
;\n\n// option 2: erros inúteis\nreturn children;\n```\n\nÉ melhor tratar `children` como um tipo de dados opaco. O React fornece `React.Children` para lidar com `children` apropriadamente.\n\n```jsx\nreturn React.Children.only(this.props.children);\n```\n\n## Componente Proxy\n\n_(Não tenho certeza se esse nome faz sentido)_\n\nOs botões estão em todos os lugares nos aplicativos da web. E cada um deles deve ter o atributo `type` definido como `button` .\n\n```jsx\n