Conheça o Semantic UI

O Semantic UI é um framework de desenvolvimento web que auxilia o desenvolvedor a criar sites e sistemas web bonitos e responsivos de maneira rápida e intuitiva.

Ele trata palavras e classes como conceitos permutáveis. As classes utilizam a sintaxe de idiomas naturais, com relações substantivo/modificador, ordem de palavras e pluralidade para vincular conceitos intuitivamente.

O Semantic utiliza o JavaScript de forma simples, utilizando chamadas simples que acionam as funcionalidades. Qualquer decisão arbitrária em um componente é incluída como configuração que pode ser modificada pelos desenvolvedores.

Semantic UI também possui uma depuração simplificada, pois o registro de desempenho permite rastrear os gargalos sem procurar nos rastreamentos da stack.

Ele vem equipado com um sistema de herança intuitivo e variáveis temáticas de ato nível que permitem ao desenvolvedor possuir uma total liberdade de projeto, desenvolvendo uma interface de usuário uma vez e implantando com o mesmo código em qualquer lugar.

É projetado para ser dimensionado responsivamente, pois as variações de design que são incorporadas aos elementos permitem que você escolha como o conteúdo será ajustado, tanto para tablet como para celular.

Também possui integrações com as bibliotecas mais utilizadas na atualidade: React, Angular, Meteor e Ember, entre muitas outra que ajudam a organizar a UI ao lado da lógica do app.

INSTALAÇÃO:

Você pode utilizar o Gulp para instalar o Semantic UI no seu projeto com Node.js:

npm install -g gulp
npm install semantic-ui --save
cd semantic/
gulp build

Ou pode adicioná-lo diretamente no seu arquivo HTML:

<link rel="stylesheet" type="text/css" href="semantic/dist/semantic.min.css">
<script
  src="https://code.jquery.com/jquery-3.1.1.min.js"
  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
  crossorigin="anonymous"></script>
<script src="semantic/dist/semantic.min.js"></script>

Alguns elementos importantes do Semantic UI são:

Buttons:

Podemos facilmente criar buttons estilizados com apenas uma linha de HTML:

<button class="ui button active">Button</button>

Ou botões animados:

<div class="ui animated button" tabindex="0">
  <div class="visible content">Próximo</div>
  <div class="hidden content">
    <i class="right arrow icon"></i>
  </div>
</div>

Ícones:

Podemos adicionar ícones facilmente ao projeto:

<i class="american sign language interpreting icon"></i>
<i class="assistive listening systems icon"></i>
<i class="audio description icon"></i>
<i class="blind icon"></i>
<i class="braille icon"></i>

Listas:

<div class="ui list">
  <div class="item">Maçã</div>
  <div class="item">Peras</div>
  <div class="item">Laranjas</div>
</div>

Você pode verificar mais elementos diretamente no site: https://semantic-ui.com/

Gostou deste artigo? Comente abaixo!

Referências: https://semantic-ui.com/introduction/getting-started.html

Criando localhost básico para testes

Neste artigo, mostrarei como criar um localhost básico para testes rápidos, utilizando Nodejs + expressjs.
Em redes de computadores, o Localhost se refere ao computador que o está executando, funcionando basicamente como um servidor virtual. Ele também possui um endereço ip, variando de 127.0.0.0 a 127.255.255.255. Com um localhost você pode:

  • Testar Velocidade: você pode testar a velocidade de execução de equipamentos. No windows, você pode usar o comando ping localhost ou ping 127.0.0.1 no prompt de comando;
  • Testar aplicações: Assim que você utiliza o localhost, sua máquina se transforma em um servidor simulado;
  • E muito mais!

E como podemos criar um localhost para testes?

Para isso, precisaremos do Nodejs. É com ele que rodaremos JavaScript no Server-side.Você pode realizar o download em: https://nodejs.org/en/

Também utilizaremos o framework Express.js. Para realizar o download, abra o terminal e digite:

$ npm install express --save

Após isso, dê o comando:

npm start

E os arquivos package e package.json serão criados!

Crie um arquivo chamado index.js e vamos lá!

Iniciando

Para iniciar, precisamos fazer uma requisição para o módulo express que foi baixado. No seu arquivo index.js, comece com isso:

const express = require('express');
const app = express();

Criando as constantes express e app, fazemos a requisição do módulo express.

Com o módulo express, foram baixadas as dependências do módulo. Você pode verificá-las na pasta public. Com o método use, podemos utilizar diretamente os arquivos da pasta public.

app.use(express.static('./public'));

Agora que já estamos utilizando as dependências do express, podemos criar um método para escutar a porta na qual o localhost será executado. usando o app.listen(), mostraremos no console.log a porta e a url do nosso localhost:

app.listen(3000, function () {
    console.log('Porta 3000');
    console.log('link: http://localhost:3000/index.html');
});

Agora que já sabemos qual é a porta e qual a url do nosso localhost, vejamos no navegador:

Com isso, verificamos que o nosso localhost para testes está funcional!

Gostou deste artigo? Comente abaixo e mostre-nos outras alternativas de localhost!

JavaScript lidera ranking de linguagens

2020 chegou e com ele, muitas mudanças no mundo da tecnologia. Se você está curioso para saber qual pode ser o futuro do mundo da programação, veio conferir no lugar certo.

Seguindo as tendências de 2019, o ecossistema do JavaScript se manteve muito utilizado e otimizado. A cada dia que passa, mais pessoas utilizam esta poderosa linguagem com seus frameworks e bibliotecas.

Por muitos anos seguidos, o JavaScript vem sendo a linguagem de programação com maior crescimento e procura. Ela é amplamente utilizada no desenvolvimento de interfaces interativas para a Web, pois é suportada por todos os navegadores modernos. Segundo a pesquisa anual realizada pela Stack Overflow, cerca de 70% dos 72.525 desenvolvedores profissionais que participaram da pesquisa, afirmaram que utilizam JavaScript. Além disso, é um dos idiomas mais procurados, pois os entrevistados que ainda não usaram, afirmaram que querem aprendê-lo.

Pelo sétimo ano consecutivo, o JavaScript é a linguagem de programação mais utilizada, com Python seguindo de categoria.

Empresas de todo o mundo utilizam JavaScript em seus stacks de linguagens. O JavaScript é o coração de qualquer grande empresa de tecnologia, como o PayPal, que foi um dos primeiros a adotar o NodeJS, Netflix, Groupon, Walmart e LinkedIn. 16 de 25 empresas Unicórnio dos EUA mencionam o JavaScript em suas tecnologias, portanto, é improvável que o JavaScript saia do grid em um futuro próximo.

Em relação aos frameworks web, vemos que os frameworks JavaScript continuam em pleno funcionamento, com o jQuery tomando o primeiro lugar, seguido do Angular/Angular.js, React.js,

ASP.NET entre outros. Ainda vemos o Vue.js em ascensão na lista de frameworks web mais utilizados

.

Entre outros frameworks, bibliotecas e ferramentas, vemos a ascensão do Node.js, que se tornou o mais utilizado, com 50.4%, seguido de .NET e .NET Core. React Native também possui uma grande quantia de usos, com 10.8% dos entrevistados afirmando utilizá-lo

.

Referências:

Gostou desta notícia? Comente abaixo!

Criando Pokedéx com React – Parte 2

Na parte 2 do nosso projeto, construiremos o layout básico do nosso projeto. Você precisará da Parte 1 para dar sequência neste artigo.

Wireframe:

O React tem a ver com construção de componentes. Então, a melhor maneira de fazer isso é criar wireframes para mapeamento dos componentes a serem construídos. O nosso aplicativo principal terá dois componentes: a visualização do Pokemón e a visualização dos detalhes.

O Pokemon view conterá um componente chamado PokeList que envolverá 151 PokeCélulas (da primeira geração de Pokemón). Ao clicar em uma PokeCélula, a visualização dos detalhes mostrará as informações e a sprite do Pokemón selecionado.

Tipos de componentes:

O React possui 2 tipos básicos de componentes: stateful (com estado) e stateless (sem estado). Os componentes Stateful têm seu próprio estado. No nosso aplicativo, o componente APP será Stateful, pois manterá o estado dos dados do Pokemón.

Vamos construir!

Abra o App.js e exclua todo o conteúdo interno. A primeira etapa é importar o pacote React e desconstruir a classe Component.

import React, { Component } from 'react';

Agora, precisamos criar um novo aplicativo que estenda o Componente. Todos os componentes Stateful requerem dois métodos principais:

  1. Construtor: onde inicializamos o nosso estado;
  2. Render: onde escrevemos nosso jsx.

No construtor, precisamos chamar a função super(), pois estamos estendendo da classe componente. Além disso, precisamos declarar nosso estado inicial. Por enquanto, será um objeto vazio.

import React, { Component } from 'react';
class App extends Component {
  constructor() {
    super();
    this.state = {};
  }
}

Adicionaremos o método render. Ele retorna a sintaxe jsx, que é uma mistura de JavaScript e HTML. O método render só pode retornar um elemento, portanto, criaremos um elemento pai e aninharemos filhos dentro dele. Se estamos retornando um elemento aninhado, envolveremos ele entre parênteses.

import React, { Component } from 'react';
class App extends Component {
  constructor() {
    super();
    this.state = {};
  }

  render() {
    return (
      <div className = "App">

      </div>
    );
  }
}

Feito isso, importaremos nossa folha de estilo na parte superior para adicionar o CSS do nosso componente e exportar toda a classe para que possamos usá-la em outros arquivos.

import React, { Component } from 'react';
import './styles/App.css'
class App extends Component {
  constructor() {
    super();
    this.state = {};
  }

  render() {
    return (
      <div className = "App">

      </div>
    );
  }
}

export default App;

Abra o seu arquivo App.css e adicione o seguinte css:

.App {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 650px;
    height: 400px;
    padding-left: 10px;
    margin: 50px auto;
    background-color: #FE0065;
    border-radius: 10px;
    box-shadow: 0 14px 45px rgba(0, 0, 0, 0.22), 0 18px 45px rgba(0, 0, 0, 0.22);
}

 

  1. Usamos o display: flex para separar as duas visualizações que construiremos;
  2. Fixamos a largura e altura para a tela do desktop;
  3. Aplicamos margem superior e inferior para separar a vista dos cantos e esquerda e direita automaticamente para coloca-los no meio;
  4. Aplicamos cor ao fundo.

Com isso, concluímos a Parte 2! Até a próxima!

Referências: https://blog.cloudboost.io/lets-build-a-pokedex-with-react-part-2-3d119b07f9e0

Conheça o Vue.js, um framework JavaScript:

Vue é um framework para construção de interfaces JavaScript. Ele é projetado para ser adotado de forma incremental. A biblioteca principal é focada na camada de visualização e é de fácil entendimento e integração com outras bilbiotecas ou projetos existentes.

Instalando:

Você pode incluir diretamente o vue em uma tag script, via cdn:

<!-- Utilize para fins de prototipagem ou aprendizado -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- Utilize para produção um número de versão específico, para evitar quebras inesperadas -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>

Se você estiver utilizando ES Modules:

<script type="module">
  import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.esm.browser.js'
</script>

npm:

# latest stable
$ npm install vue

bower:

# latest stable
$ bower install vue

Começando:

Renderização Declarativa:

O vue nos permite renderizar declarativamente dados para o DOM:

<div id="app">
  {{ message }}
</div>
let app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

Com isso, já criamos o nosso primeiro aplicativo Vue! Os dados e o DOM agora estão vinculados e tudo é reativo.

<div id="app-2">
  <span v-bind:title="message">
    Hover your mouse over me for a few seconds
    to see my dynamically bound title!
  </span>
</div>
let app2 = new Vue({
  el: '#app-2',
  data: {
    message: 'Voce carregou esta pagina em ' + new Date().toLocaleString()
  }
})

Você verá a “message” pousando o mouse por cima do seu elemento renderizado no DOM.

Condicionais e Loops:

Continue lendo “Conheça o Vue.js, um framework JavaScript:”

Conheça o Meteor, um framework JavaScript.

O Meteor é um framework JavaScript completo para a criação de aplicativos Web e móveis moderno. Ele inclui um conjunto de tecnologias para a criação de aplicações reativar, uma ferramenta para construção, entre outros.

  • O Meteor permite o desenvolvimento JavaScript em ambientes de servidores de aplicativos, navegadores da web e dispositivos móveis;
  • Ele usa dados na conexão, ou seja, o servidor envia os dados, não HTML, e o cliente os processa;
  • Full Stack reactivity: Sua UI reflete perfeitamente o true world state com o mínimo de esforço de desenvolvimento.

Por onde começar?

O Meteor possui suporte para OS X, Windows e Linux.

No Linux e OSX, execute o seguinte comando:

curl https://install.meteor.com/ | sh

No Windows, primeiro instale o Chocolatey e, depois, use o seguinte comando no Prompt de Comando como Administrador:

choco install meteor

E agora?

Depois de instalado o Meteor, crie um projeto:

meteor create myapp

Depois de criado, execute-o localmente:

cd myapp
meteor npm install
meteor

Sua saída será algo como:

# Meteor server running on: http://localhost:3000/

O meteor já vem com o npm incluído, ou seja, você pode digitar meteor npm sem se preocupar se está instalado.

Agora, vamos criar um app simples:

Para criar um app, abra o seu terminal e escreva:

meteor create simples-todos

Isso vai criar uma nova pasta chamada simple-todos, com todos os arquivos que o aplicativo Meteor necessita:

client/main.js        # um arquivo de JavaScript carregado no cliente
client/main.html      # um documento HTML para definir seu templates[
client/main.css       # um arquivo CSS para definição de estilos
server/main.js        # um arquivo JS carregado no servidor
test/main.js          # um arquivo JS para testes
package.json          # um arquivo de controle para instalar pacotes npm
package-lock.json     # descreve a árvore de dependência npm
node_modules/         # pacotes instalados por nmp
.meteor/              # arquivos internos do Meteor
.gitignore            # um arquivo de controle para GIT

Para rodar o aplicativo criado:

cd simple-todos
meteor

Agora, abra o seu web browser e vá para http://localhost:3000 e veja o seu aplicativo rodando. Experimente colocar um <h1> dentro do seu client/main.html e veja a sua página ser atualizada com o novo conteúdo!

Você pode verificar a documentação original em inglês aqui: https://www.meteor.com/tutorials/blaze/creating-an-app

Gostou deste artigo? Comente abaixo!

Phaser.js #5 – Criando jogo Parte 4

Ok, já criamos a nossa colisão com os objetos, mas agora precisamos mover o player. Você pode utilizar um gerenciador de teclado embutido do Phaser:

cursors = this.input.keyboard.createCursorKeys();

Esse comando preenche o objeto cursors com as quatro propriedades: cima, baixo, esquerda e direita, que são todas as instâncias dos objetos-chave. Então, tudo que precisamos fazer é pesquisar isso dentro do nosso loop update:

if (cursors.left.isDown)
{
    player.setVelocityX(-160);

    player.anims.play('left', true);
}
else if (cursors.right.isDown)
{
    player.setVelocityX(160);

    player.anims.play('right', true);
}
else
{
    player.setVelocityX(0);

    player.anims.play('turn');
}

if (cursors.up.isDown && player.body.touching.down)
{
    player.setVelocityY(-330);
}

A primeira coisa a fazer, é verificar se a tecla esquerda está sendo pressionada. Se ela estiver, aplicaremos uma velocidade horizontal negativa e iniciaremos a animação “left”. Se a tecla pressionada for a direita, faremos o oposto e utilizaremos a animação “right”. Em cada frame, criaremos um estilo de movimento “stop-start”.

Agora, precisamos adicionar um pulo, para podermos ir para as plataformas suspensas, correto? Clicaremos na tecla com a seta para cima para pular, testando se ela está pressionada e se o player está no chão. Se ambas as condições forem atendidas, aplicaremos uma velocidade vertical de 330 px/s sq. O player voltará para o chão, devido à gravidade.

imagem

Esse é o resultado esperado para esta situação. Verifique isso em part7.html.

Você pode verificar o artigo original em inglês em: https://phaser.io/tutorials/making-your-first-phaser-3-game/part8

Está gostando desta sequência de artigos? Comente abaixo!

Angular 7: novas funcionalidades

Veja nesse artigo como atualizar o seu ambiente de trabalho com a versão 7 do Angular e duas de suas novas funcionalidades

Já faz um bom tempo que eu estou focando os meus estudos no Angular, tive a oportunidade de participar de projetos com ele nas versões 2, 5 e 6. Hoje irei apresentar 2 novidades do que vieram nessa nova versão: o Drag and Drop e o Scrolling.

O primeiro passo será atualizar os nosso ambiente. Para isso, siga um dos passos abaixo de acordo com a versão que você tem instalada no seu computador:

Versão < 6

npm uninstall -g angular-cli
npm cache clean 
npm install -g @angular/cli@latest

Versão 6

ng update @angular/cli @angular/core

Para verificar se ele foi atualizado com sucesso, execute o comandong — versionno seu terminal. Abaixo você tem uma imagem demonstrando esse passo:

Atualizando o Angular para versão 7

Para ficar um passo a passo legal, vamos criar um novo projeto. Para isso, abra um terminal no seu computador e execute o comando ng new, note que você irá receber uma mensagem perguntando qual e o nome do seu projeto.

Essa é uma das novidades dessa nova versão. Abaixo você tem uma imagem demonstrando esse passo:

Novo projeto Angular versão 7

Informe o nome do seu projeto, em seguida note que você irá receber uma outra mensagem perguntando se deseja adicionar um arquivo de rotas. Eu irei informar Y para que ele adicione.

Adicionando rotas no Angular 7
O próximo passo será informar como você deseja trabalha com os estilos no seu projeto. Eu irei selecionar SCSS:

Adicionando rotas no Angular 7

Depois desse passo o seu projeto será criado. Para os próximos passos será necessário um editor de textos, eu irei utilizar o VS Code, mas você pode utilizar um de sua preferência.

Antes de nós começarmos a codar, vamos adicionar o Angular Material no nosso projeto. Para isso, execute o comando abaixo no seu terminal:

ng add @angular/material

Esse comando irá solicitar que você selecione um template para o seu projeto. Para esse artigo eu irei selecionar o indigo-pink.

Para as próximas perguntas eu irei informar N (não) para o HammerJS e Y (sim) para browser animations.

Com o projeto aberto no seu editor de textos, vamos conhecer as duas funcionalidades mencionadas no inicio desse artigo.

Drag and Drop

Nessa versão nós temos um módulo chamado DragDropModule. Para utilizar ele, basta adicionar a chamada abaixo no módulo que deseja utilizá-lo.

import {DragDropModule} from '@angular/cdk/drag-drop';

Em seguida atualize o arquivo app.component.html com o trecho de código abaixo:

<div class="example-box" cdkDrag>
  I can only be dragged using the handle

  <div class="example-handle" cdkDragHandle>
    <svg width="24px" fill="currentColor" viewBox="0 0 24 24">
      <path d="M10 9h4V6h3l-5-5-5 5h3v3zm-1 1H6V7l-5 5 5 5v-3h3v-4zm14 2l-5-5v3h-3v4h3v3l5-5zm-9 3h-4v3H7l5 5 5-5h-3v-3z"></path>
      <path d="M0 0h24v24H0z" fill="none"></path>
    </svg>
  </div>
</div>

E o arquivo app.component.scss com o trecho de código abaixo:

.example-box {
    width: 200px;
    height: 200px;
    padding: 10px;
    box-sizing: border-box;
    border: solid 1px #ccc;
    color: rgba(0, 0, 0, 0.87);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: #fff;
    border-radius: 4px;
    position: relative;
    z-index: 1;
    transition: box-shadow 200ms cubic-bezier(0, 0, 0.2, 1);
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
                0 2px 2px 0 rgba(0, 0, 0, 0.14),
                0 1px 5px 0 rgba(0, 0, 0, 0.12);
  }
  
  .example-box:active {
    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
                0 8px 10px 1px rgba(0, 0, 0, 0.14),
                0 3px 14px 2px rgba(0, 0, 0, 0.12);
  }
  
  .example-handle {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #ccc;
    cursor: move;
    width: 24px;
    height: 24px;
  }

Abaixo você tem uma imagem demonstrando o resultado dessa implementação:

Scrolling

Um outro módulo que chegou nessa nova versão foi o ScrollDispatchModule, ele nos permite trabalhar com virtual scroll.

Para implementá-lo vamos criar um novo componente chamado VirtualScroll. Para isso, execute o comando abaixo no seu terminal:

ng g c virtualScroll

Em seguida atualize o seu arquivo app.component.html com o trecho de código abaixo:

<router-outlet></router-outlet>

E o novo componente no arquivo de rotas: app-routing.module.ts:

{ path: ‘scroll’, component: VirtualScrollComponent }

Agora para implementar o Virtual Scroll, vamos atualizar os arquivos: virtual-scroll.component.ts, virtual-scroll.component.scss e virtual-scroll.component.hml com os trechos de código abaixo:

virtual-scroll.component.ts

import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'app-virtual-scroll',
  templateUrl: './virtual-scroll.component.html',
  styleUrls: ['./virtual-scroll.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,

})
export class VirtualScrollComponent implements OnInit {

  items = Array.from({length: 100000}).map((_, i) => `Item #${i}`);
  
  constructor() { }

  ngOnInit() {
  }

}

Analisando esse trecho de código nós temos:

  • 1: Estamos adicionando a chamada do ChangeDetectionStrategy para detectar as alterações no nosso componente
  • 12: estamos criando um array com 100000 itens para passar para nossa view

virtual-scroll.component.hml

<cdk-virtual-scroll-viewport itemSize="50" class="example-viewport">
  <div *cdkVirtualFor="let item of items" class="example-item">{{item}}</div>
</cdk-virtual-scroll-viewport>

virtual-scroll.component.scss

.example-viewport {
    height: 200px;
    width: 200px;
    border: 1px solid black;
  }
  
  .example-item {
    height: 50px;
  }

Abaixo você tem uma imagem demonstrando o resultado desse passo:

Os exemplos demonstrados nesse artigo foram retirados do site oficial do Angular. Caso tenham interesse em saber mais sobre essa nova versão, eu recomendo a leitura do seguinte link: Angular.io.

Fonte: medium.com/angularbr/angular-7-novas-funcionalidades

 

Gatsby recebe US$ 15 milhões em financiamento

O Gatsby anunciou que levantou um financiamenteo de US$ 15 milhões para impulsionar a modo como reinventou o desenvolvimento de sites.
O Gatsby é uma estrutura de código aberto gratuita baseada em React. Com uma plataforma de malha de conteúdo, ela auxilia na criação de sites e aplicativos extremamente rápidos.

Acreditando que a arquitetura de sites está sendo reinventada, o Gatsby proporciona a criação de sites rápidos, seguros e estáveis. Ele retira uma grande parte da complexidade do desenvolvimento de sites, tornando o processo incrível e divertido.
Ele se esforça para fornecer dados e códigos divididos imediatamente, otimizando as imagens e carregando a página com seus elementos críticos primeiro.

Com uma malha de conteúdo, o Gatsby preserva os fluxos de trabalho dos criadores de conteúdo e oferecem acesso à serviços em nuvem sem integração manual. Como a web está migrando para uma arquitetura cada vez mais dissociada, o Gatsby é o que torna a experiência mais incrível.
Sendo uma ferramente de código aberto, o Gatsby contribui muito para a comunidade, ajudando a tornar a web um espaço acessível e aberto. Com os financiamentos mais recentes, mais de US$ 3 milhões por ano serão investidos em código aberto, produzindo plugins e materiais de aprendizado.

As tendências que impulsionam a web são três principais, como o Gatsby acredita: Arquitetura dissociada, com serviços modulares especializados; Ecossistema de JavaScript em amadurecimento para criar sites escaláveis e com excelência em qualidade e a necessidade de criar experiências mais atraentes para os usuários.
Atualmente existem mais de 35 membros atuando em código aberto, escrevendo documentações e tutoriais, criando ferramenta de design e construção de sites de última geração.

Para mais informações veja o post original no link abaixo:
Fonte: https://www.infoq.com/news/2019/10/react-gatsby-raises-15m-usd/

Gatsby Blog: https://www.gatsbyjs.org/blog/2019-09-26-announcing-gatsby-15m-series-a-funding-round/

Gostou desta notícia? Comente abaixo!

React avançado — Utilizando “props.children” como função de primeira classe

O coração do React são componentes. Você pode aninhar esses componentes do mesmo modo que você aninha tags HTML, o que torna tudo mais fácil quando escrevemos JSX, afinal, lembra muito o bom e velho HTML.

Quando eu comecei com React, eu pensei “Basta usar props.children e pronto. Eu sei tudo sobre o objeto .children”. Te digo, como eu estava errado! 🙂

Como estamos trabalhando com JavaScript, nós podemos mudar o .children. Nós podemos passar propriedades para ele, decidir se queremos que ele renderize algo ou não, usá-lo do jeito que quisermos. Vamos mergulhar no poder do .children em React!

Abaixo, segue os tópicos que iremos abortar nesse artigo:

Tabela de conteúdo:

  • Elementos filhos
  • Tudo pode ser um elemento filho
  • Função como elemento filho
  • Manipulando .children
  • Usando loops em .children
  • Contando .children
  • Convertendo .children em um array
  • Permitir apenas um elemento filho
  • Editando .children
  • Mudando as propriedades dos elementos filhos
  • Clonando imutavelmente os elementos filhos
  • É isso aí!

Elementos filhos

Vamos dizer que temos um componente , que contém componentes como elementos filhos. Usamos da seguinte maneira:

<Grid>
  <Row />
  <Row />
  <Row />
</Grid>

Demo: http://www.webpackbin.com/Ekg_vyjPz

Esses três componentes Row são passados para o Grid como props.children. Usando um container como expressão (expression container, termo técnico do JSX para os colchetes), componentes pais podem renderizar os elementos filhos:

class Fullstop extends React.Component {
  render() {
    return <h1>Hello world!</h1>
  }
}

Não importa quantos elementos filhos você passe, ele sempre irá renderizar “Hello world!”, e nada mais.

Nota: O h1 no exemplo acima (assim como todas as tags HTML primitivas), está renderizando seu elemento filho, nesse caso, o nó de texto “Hello world!”

Continue lendo “React avançado — Utilizando “props.children” como função de primeira classe”