{"pageProps":{"tag":["Reactjs"],"allPostsTags":[{"icon":"/techs/all.svg","name":"Todos","slug":"/blog"},{"name":"Carreira","icon":"/techs/carreira.svg","slug":"/tag/carreira"},{"name":"Javascript","icon":"/techs/javascript.svg","slug":"/tag/javascript"},{"name":"Fundamentos","icon":"/techs/fundamentos.svg","slug":"/tag/fundamentos"},{"name":"NodeJS","icon":"/techs/nodejs.svg","slug":"/tag/nodejs"},{"name":"Algoritmos","icon":"/techs/algoritmos.svg","slug":"/tag/algoritmos"},{"name":"ReactJS","icon":"/techs/reactjs.svg","slug":"/tag/reactjs"}],"allPostsData":[{"filepath":"content/blog/como-publicar-seu-site-no-github/index.md","slug":"como-publicar-seu-site-no-github","url":"/como-publicar-seu-site-no-github","hash":"cad1bc152bfbf9b9d2e4aeb713436d9a7c265b6effdfdc30826a689d954677a9cb69a930ea92e7dadfc291cc3cf6e87e5afacb6bdc321bef8081f53ad247c11a","frontMatter":{"title":"GH-Pages e como publicar seu site no Github","date":"2017-10-06","tags":["Javascript","ReactJS"],"thumbnail":"GH-PAGES-790x400.png","author":"Tulio Faria"},"mdx":{"compiledSource":"","renderedOutput":""},"relationships":{"author":[null]},"excerpt":"\nHoje quero mostrar para vocês como a gente pode postar o nosso site no GitHub utilizando o GH-Pages, sem precisar trocar ou fazer qualquer trâmite com o Git, tudo isso de uma maneira bastante fácil. Além disso, integrar isso em um WorkFlow ou em um processo junto no Node.\n\nA primeira coisa que vou ...","datePtBR":"6 de outubro de 2017"},{"filepath":"content/blog/react-16-o-pacificador/index.md","slug":"react-16-o-pacificador","url":"/react-16-o-pacificador","hash":"68b71debe1c130d3b56e8daf27ef245bc2bf45f8e1e2d618d049d7b2ac4b3f6477dfafb4c307796c83136a096c7b749d03941a18d7fa9b199316046b45b14f81","frontMatter":{"title":"React 16 - o Pacificador","date":"2017-10-02","tags":["Javascript","ReactJS"],"thumbnail":"React16.png","author":"Tulio Faria"},"mdx":{"compiledSource":"","renderedOutput":""},"relationships":{"author":[null]},"excerpt":"\nHoje quero trazer as boas novas do mundo React, era algo que já esperava e esperava que fosse acontecer. Muito se discutiu, nos últimos tempos, sobre a licença, que era um pouco restritiva e muitas empresas estavam saindo do ecossistema por esse motivo.\n\nNo dia 25 de setembro de 2017, na versão 15....","datePtBR":"2 de outubro de 2017"},{"filepath":"content/blog/composicao-de-componentes-em-reactjs/index.md","slug":"composicao-de-componentes-em-reactjs","url":"/composicao-de-componentes-em-reactjs","hash":"54ca64d778f82b54eabd6a2affa4ff381637d15c7c7c525abdf5039817e1993bfbed9ad42d8aec1735cc65d0816565fd92c2183b23afe203972434b0940bc5af","frontMatter":{"title":"Composição de componentes em ReactJS","date":"2017-08-01","tags":["Javascript","ReactJS"],"thumbnail":"COMPOSIÇÃO-REACTJS-790x400.png","author":"Tulio Faria"},"mdx":{"compiledSource":"","renderedOutput":""},"relationships":{"author":[null]},"excerpt":"\nA dica de hoje é sobre o ReactJS, mais especificamente sobre como podemos criar composição de componentes em ReactJS de uma forma um pouco diferente, como podemos utilizar algumas áreas de um componente para ejetar outros componentes por exemplo. Na prática ficará mais simples de entender.\n\nEu crie...","datePtBR":"1 de agosto de 2017"},{"filepath":"content/blog/gerenciador-de-series-p1/index.md","slug":"gerenciador-de-series-p1","url":"/gerenciador-de-series-p1","hash":"108a819bdf594e391ae60eaf25e27493a579221df41ba5fa802170b6cc97890f50dd82a3d562adea6c02bf13ceaf0fe3976b9f646a2ce0be344afcc5567afed8","frontMatter":{"title":"Construindo um App gerenciador de séries com ReactJS","date":"2017-07-19","tags":["Javascript","ReactJS"],"thumbnail":"ReactJS-1-790x400.png","author":"Tulio Faria"},"mdx":{"compiledSource":"","renderedOutput":""},"relationships":{"author":[null]},"excerpt":"\nNesta nova série, vamos construir um aplicativo na prática, mais especificamente um gerenciador de séries, para você nunca mais esquecer as séries que assistiu no Netflix e também as que você tem para assistir que algum amigo te indicou. Para isso, vamos utilizar o ReactJS, a tecnologia que eu util...","datePtBR":"19 de julho de 2017"},{"filepath":"content/blog/renderizar-estruturas-em-formato-de-arvore/index.md","slug":"renderizar-estruturas-em-formato-de-arvore","url":"/renderizar-estruturas-em-formato-de-arvore","hash":"06af243c9eeb6351f39ca7cd8068f624f8df95dd4cfa7a9809da3b81748a19cc85b9b9dfa26d49624b3089b56389ba12a293da1d9ff24fc6573f67d83af7aec0","frontMatter":{"title":"ReactJS Recursivo?","date":"2017-06-28","tags":["Javascript","ReactJS"],"thumbnail":"ReactRecursivo.png","author":"Tulio Faria"},"mdx":{"compiledSource":"","renderedOutput":""},"relationships":{"author":[null]},"excerpt":"\nHoje vamos fazer algo que é bastante convencional em sistemas: renderizar estruturas de dados em formato de árvore. No exemplo, será uma árvore binária, mas como poderíamos renderizar no ReactJS.\n\nEm que isso é útil?\n\nVamos supor que você tenha uma interface com um menu lateral e esse menu tem form...","datePtBR":"28 de junho de 2017"},{"filepath":"content/blog/stateless-functional-component/index.md","slug":"stateless-functional-component","url":"/stateless-functional-component","hash":"17e41e711683e528bd807ba3a3e7b0097ccf876a5f1fedfff35a8f53105d39bc17b16bf3fd3b269573c1c6ef6811296f17d3807e24d72b94441065ff900cde7f","frontMatter":{"title":"Criando componente mais simples e eficaz em React","date":"2017-05-18","tags":["Javascript","ReactJS"],"thumbnail":"StatellesFunctional.png","author":"Tulio Faria"},"mdx":{"compiledSource":"","renderedOutput":""},"relationships":{"author":[null]},"excerpt":"\nVamos começar esse hands-on Stateless Functional Component com um projeto do zero criado com Create-react-app. Primeiro vamos criar um arquivo novo chamado home.js _(iremos importar o React, pois ainda vamos usar JSX)._\n\nUm Stateless Functional Component, na verdade, é apenas uma arrow function, en...","datePtBR":"18 de maio de 2017"},{"filepath":"content/blog/router-props-2/index.md","slug":"router-props-2","url":"/router-props-2","hash":"315ee2a56ca3e2220532e74217a116769863fe181008992586e0d8d75c3c193a26d643f9ffff3917b33926d4a9610cbd2ec6035f863ee8b9e40f3e1d7fb9d4bd","frontMatter":{"title":"React-router-dom: como injetar props em rotas em ReactJS","date":"2017-05-17","tags":["Javascript","ReactJS"],"thumbnail":"RouterProps.png","author":"Tulio Faria"},"mdx":{"compiledSource":"","renderedOutput":""},"relationships":{"author":[null]},"excerpt":"\nConfesso que tive muito trabalho até conseguir encontrar uma maneira não tão difícil de fazer a passagem de propriedades para o componente. Neste post, você vai conferir uma dica sobre React Router.\n\n> Temos também um outro material somente sobre [React-router que você pode ver aqui](https://devple...","datePtBR":"17 de maio de 2017"},{"filepath":"content/blog/router-props/index.md","slug":"router-props","url":"/router-props","hash":"8d27bbc5f0b7e7aa8f13d340537d111b5efa780d6c72580932839d5ed51332c855eae6fefccbd4d1baa4d7c29270cdb14f629e42ff9a21b85f3a2737fc1f0380","frontMatter":{"title":"Dica: Router Props","date":"2017-04-24","tags":["Javascript","ReactJS"],"thumbnail":"RoutersProps.png","author":"Tulio Faria"},"mdx":{"compiledSource":"","renderedOutput":""},"relationships":{"author":[null]},"excerpt":"\nComo passar props para rotas (em react-router) em uma app react?\n\nDica interessante para injetarmos dependências nos componentes que são dinamicamente renderizados pelo router.\n\nConfira o video:\n\n\n  \n\n\nDeixe suas dúvidas e sugestões nos comentários. Curta o [DevPleno no Facebook](https://www.facebo...","datePtBR":"24 de abril de 2017"},{"filepath":"content/blog/dica-injecao-de-dependencia-no-reactjs/index.md","slug":"dica-injecao-de-dependencia-no-reactjs","url":"/dica-injecao-de-dependencia-no-reactjs","hash":"5c33d56fce9c77842a18c3fa06fd81016d060bd6760b994c4e9c9a6b2363d9ee345f1c8893f9e89e303c4161f3a0bf0bd1b676a63621d60440853aa07a94b2b7","frontMatter":{"title":"Dica: Injeção de Dependência no ReactJS","date":"2017-04-04","tags":["Javascript","Fundamentos","ReactJS"],"thumbnail":"InjecaoDependencia.jpg","author":"Tulio Faria"},"mdx":{"compiledSource":"","renderedOutput":""},"relationships":{"author":[null]},"excerpt":"\nInjeção de dependência ajuda muito na testabilidade do código e de certa forma em aumentar a legibilidade do código. Veja como podemos implementar Injeção de dependências no ReactJS\n\n\n  \n\n\nVeja mais sobre injeção de dependências em [https://www.devpleno.com/injecao-de-dependencia/](https://www.devp...","datePtBR":"4 de abril de 2017"},{"filepath":"content/blog/hands-creat-react-app/index.md","slug":"hands-creat-react-app","url":"/hands-creat-react-app","hash":"786d66df8af0392de8d10a9865052c7b496e4592191d3befdeda0023f9af8b29a0975c208ae8f8bea3e3428b1e244681d2bc9b6f36c6c04710136791c25b9323","frontMatter":{"title":"Hands-on: Creat-React-App","date":"2017-03-09","tags":["Javascript","ReactJS"],"thumbnail":"CreateReactApp.png","author":"Tulio Faria"},"mdx":{"compiledSource":"","renderedOutput":""},"relationships":{"author":[null]},"excerpt":"\nNeste Hands-on, testo um pacote para React, o Create-React-App.\n\nConfira:\n\n\n  \n\n\nCurta o [DevPleno no Facebook](https://www.facebook.com/devpleno), se inscreva no [canal no YouTube](https://www.youtube.com/devplenocom) e cadastre seu e-mail para não perder as atualizações. Abraço!\n...","datePtBR":"9 de março de 2017"},{"filepath":"content/blog/render-condicional-em-reactjs/index.md","slug":"render-condicional-em-reactjs","url":"/render-condicional-em-reactjs","hash":"9c1a36fd5fd206bf3afddc3e6ce69f069c3593d09b1735d3d8d3b73b05518c88c2a929eded51c0b8c0c00a35ced6a190712367e4d4738b44470f30176dd26bc4","frontMatter":{"title":"Render condicional em ReactJS","date":"2017-01-25","tags":["Javascript","ReactJS"],"thumbnail":"RenderCondicional.jpg","author":"Tulio Faria"},"mdx":{"compiledSource":"","renderedOutput":""},"relationships":{"author":[null]},"excerpt":"\nDurante a criação de componentes em ReactJS é muito comum que dado um estado do componente, renderizarmos uma estrutura ou outra. Para fazermos isso no ReactJS/JSX temos algumas alternativas.\n\n## Primeira maneira: utilizando if´s\n\nJSX é basicamente um Javascript disfarçado de HTML (sim, apenas para...","datePtBR":"25 de janeiro de 2017"}],"totalPages":2,"currentPage":0,"currentPageStr":""},"__N_SSG":true}