Qual a diferença entre JSON e um objeto JavaScript?

Neste post mostrarei brevemente o que é um JSON e o que é um objeto literal JavaScript e qual a diferença entre eles.

JSON

JSON é a abreviação de JavaScript Object Notation e é uma maneira de armazenar e comunicar informações de maneira organizada e fácil de acessar. Em resumo, o JSON nos dá uma coleção de dados legíveis por humanos que podemos acessar de uma maneira realmente lógica.

Atualmente o JSON tem sido muito utilizado para facilitar a comunicação e passagem de dados entre sistemas construídos em linguagens de programação diferentes. Em especial, muitas APIs usam o JSON como seu formato de recebimento e retorno de dados

Exemplo JSON

{
    "nome":"Paulo",
    "idade": 34
}

 

Objeto JavaScript

Um objeto JavaScript é uma representação abstrata de um modelo de dados composto, assim como nas outras linguagens de programação.

Exemplo:

let objeto = { 
    nome:"Paulo", 
    idade: 34 
}

Devido a semelhança entre o JSON e o Objeto Literal, quando o JavaScript lê o JSON ele o reconhece com se fosse um objeto literal. Isso facilita a programação e recebimento de dados, mas acaba confundindo alguns iniciantes.

 

Onde que o JavaScript e o JSON diferem?

Mesmo assim, existem algumas diferenças entre ambos que importante conhecer. Veja abaixo:

Criação de atributos

Como você deve ter notado no exemplo, no JSON é necessário criar as propriedades usando aspas duplas, enquanto no objeto apenas o nome é necessário.

//Obj Literal
let objeto = {
    umaProp: "Lorem Ipsum"
}

//JSON
let objeto2 = {
    "umaProp": "Lorem Ipsum"
}

Uso de aspas

Enquanto o objeto permite o uso de aspas simples ou dupla para expressar strings, o JSON já funciona de maneira mais uniforme e permite apenas o uso de aspas duplas.

// Os seguintes exemplos não são JSONs válidos
{
    'prop': "propriedade"
}

{
    "prop": 'propriedade'
}

Importante: Note que se você estiver utilizando o JavaScript, não ocorrerá erro pois ele interpretará seu objeto como sendo literal.

Tipos de Dados:

JSON: O Json pode armazenar os seguintes valores

  • String
  • Número
  • Objeto JSON
  • Vetor
  • Booleano
  • Null

Objeto: Além dos valores acima, o objeto possuí alguns valores que não são válidos no JSON

  • Objeto Literal
  • Data (no formato Date)
  • Função
  • Undefined

É isso aí, espero que esta explicação rápida ajude mais alguém. Se você conhece outras diferenças, deixe aqui nos comentários que atualizarei a postagem conforme aparecerem contribuições.

Como extrair um e-mail de uma String

Para extrair e-mails de uma string com JavaScript, ou qualquer outra linguagem, pode ser uma tarefa bem extensa devido a diversas conferencias que precisariam ser feitas para saber se aquele trecho é um e-mail

Por exemplo, você poderia ter algo do tipo:

let text = '@rediffmail.com blablabla farkal@gmail.com teste@@@ rodnsdfald ferdfnson <rfernsdfson@gmal.com> Affdmdol Gondfgale gyfanamosl@gmail.comtruform techno pidfpinfg@truformdftechnoproducts.com "NiTsdfeSh ThIdfsKaRe"';

let listaPalavras = text.split(" ");

let listaEmails = [];

listaPalavras.forEach((palavra) =>{
    if(palavra.includes("@")){
        listaEmails.push(palavra);
    }
});

console.log(listaEmails);

Poderíamos ter uma lista de e-mails filtrada com base no @. Mas dai você pode se perguntar se “@Joao” entre outras possíveis variações tanto devido ao conteúdo do texto quanto a possíveis erros de digitação. Com isso podemos acabar tendo um código como o abaixo:

let text = '@rediffmail.com blablabla farkal@gmail.com teste@@@ rodnsdfald ferdfnson <rfernsdfson@gmal.com> Affdmdol Gondfgale gyfanamosl@gmail.comtruform techno pidfpinfg@truformdftechnoproducts.com "NiTsdfeSh ThIdfsKaRe"';

let listaPalavras = text.split(" ");

let listaEmails = [];

listaPalavras.forEach((palavra) =>{
    if(palavra.includes("@") 
        && palavra[0] != "@" 
        && palavra.includes(".co")
        && palavra.includes(palavra.substr(0, palavra.indexOf("@"))) != "!"){
        listaEmails.push(palavra);
    }
});

console.log(listaEmails);

E isso é só o começo, estre IF teria que ser muito maior.

Mas existe uma solução usando REGEX (conheça o Regex aqui) que faz diversas conferencias ao mesmo tempo e permite a extração em poucas linhas. Veja o exemplo:

let text = '@rediffmail.com blablabla farkal@gmail.com teste@@@ rodnsdfald ferdfnson <rfernsdfson@gmal.com> Affdmdol Gondfgale gyfanamosl@gmail.comtruform techno pidfpinfg@truformdftechnoproducts.com "NiTsdfeSh ThIdfsKaRe"';

let listaEmails = text.match(/([a-zA-Z0-9.-]+@[a-zA-Z0-9.-]+\.[a-zA-Z0-9._-]+)/gi);

console.log(listaEmails);

Espero que este snippet ajude mais alguém como me ajudou. Deixe sua duvida ou comentário na sessão abaixo caso você tenha notado algo que possa melhorar ou caso esses snippet ajudou você

Introdução ao Node.js

Neste post, estarei falando resumidamente sobre o que é o NodeJS, como configura-lo, alguns pontos básicos importantes e como executar um Olá Mundo.

O que é o Node.js?

O Node.js é um interpretador de código aberto do JavaScript para execução no servidor. Seu objetivo é ajudar programadores na criação de aplicações de alta escalabilidade, com códigos capazes de manipular milhares de conexões simultâneas. Criado em 2009, ele é baseado no interpretador do V8 JavaScript Engine que é um interpretador open source implementado pelo Google em C++.

Como instalar e executar o Node.js

Para começar a desenvolver com Node.js pode-se baixar a versão mais recente no site: https://nodejs.org. Após baixar e instalar ele, é bem fácil iniciar um projeto. Para configurar um projeto faça o seguinte:

  1. Abra o terminal do Node
  2. Acesse (crie se não tiver feito) a pasta que você quer colocar seu projeto
  3. Digite npm init
  4. O node irá lhe perguntar diversos dados para a criação do projeto. Caso queira deixar a configuração padrão, basta ir apertando enter até o fim. Você terá deverá ter uma lista igual a está:

    Ou caso você tenha colocado algum valor, pode ficar parecido com
  5. O node após o License, o node irá criar e exibir um arquivo Json similar a este

    Basta apertar OK
  6. Agora sua pasta conterá um projeto com um arquivo chamado package.json com os dados do objeto acima
  7. Sem fechar o terminal (ou abrindo o terminal de sua IDE/Editor) abra o projeto no e crie dentro dele o arquivo index.js com o seguinte código:
    console.log("Olá Mundo");
  8. Não esqueça de salvar o arquivo.
  9. Por último, no terminal digite node index.js e você deverá ver a frase “Olá Mundo”.

Com isso concluímos o tutorial de introdução ao node.js e como rodar um olá mundo. Espero que a postagem tenha ajudado e caso alguém queira aprender o setup de algo mais complexo, escreva nos comentários abaixo.

D3: Data-Driven Documents

D3.js é uma biblioteca JavaScript para manipular documentos com base em dados. O D3 ajuda você a dar vida aos dados usando HTML, SVG e CSS. A ênfase da D3 nos padrões da Web oferece a você todos os recursos dos navegadores modernos, sem vincular-se a uma estrutura proprietária, combinando poderosos componentes de visualização e uma abordagem baseada em dados à manipulação de DOM.

A D3 permite associar dados arbitrários a um DOM (Document Object Model) e, em seguida, aplicar transformações orientadas a dados ao documento. Por exemplo, você pode usar o D3 para gerar uma tabela HTML a partir de uma matriz de números. Ou use os mesmos dados para criar um gráfico de barras SVG interativo com transições suaves e interação.

Clique nas imagens para ver os exemplos

D3 não é uma estrutura monolítica que procura fornecer todos os recursos concebíveis. Em vez disso, o D3 resolve o cerne do problema: manipulação eficiente de documentos baseados em dados. Isso evita a representação proprietária e oferece uma flexibilidade extraordinária, expondo os recursos completos dos padrões da Web, como HTML, SVG e CSS. Com o mínimo de sobrecarga, o D3 é extremamente rápido, suportando grandes conjuntos de dados e comportamentos dinâmicos para interação e animação. O estilo funcional da D3 permite a reutilização de código por meio de uma coleção diversificada de módulos oficiais e desenvolvidos pela comunidade.

Para a utilização, você precisa apenas chamar o script:

<script src="https://d3js.org/d3.v5.min.js"></script>

Caso esteja trabalhando com node, instale atraves do código:

npm install d3

Como funciona o suporte com navegadores?

O D3 5+ suporta navegadores recentes, como o Chrome, Edge, Firefox e Safari. D3 4 e abaixo também suporta o IE 9+. Partes do D3 podem funcionar em navegadores mais antigos, já que muitos módulos do D3 têm requisitos mínimos. Por exemplo, a seleção do d3 usa o nível 1 da Selectors API, mas você pode pré-carregar o Sizzle para compatibilidade. Você precisará de um navegador moderno para usar as Transições SVG e CSS3. O D3 não é uma camada de compatibilidade, por isso, se o seu navegador não suporta padrões, você está sem sorte. Desculpa!

O D3 também é executado no Node e nos web workers. Para usar o DOM no Node, você deve fornecer sua própria implementação DOM; O JSDOM é recomendado. Para evitar a definição de um documento global, passe um elemento DOM para d3.select ou um NodeList para d3.selectAll, da seguinte forma:

const d3 = require("d3"),    
const jsdom = require("jsdom");

const document = jsdom.jsdom (),
const svg = d3.select(document.body).append ("svg");

Ao usar o D3 em um ambiente que suporta módulos ES, você pode importar o pacote D3 padrão como um namespace:

import * as d3 from "d3";

Se você quiser importar um módulo D3 que não esteja incluído no pacote padrão, atribua a ele um espaço para nome separado:

import * as d3 from "d3";
import * as d3GeoProjection from "d3-geo-projection";

Por esse motivo, o padrão preferido é importar símbolos diretamente dos módulos D3, em vez de usar o pacote padrão:

import {select, selectAll} from "d3-selection";
import {geoPath} from "d3-geo";
import {geoPatterson} from "d3-geo-projection";

Se você estiver usando um empacotador, verifique se o empacotador está configurado para consumir o ponto de entrada de módulos no pacote.json. Veja resolve.mainFields do webpack, por exemplo.

Você pode encontrar o exemplo acima no link da documetação do D3. A única desvantagem é que por lá está tudo em inglês.

Conclusão

O D3 é uma ótima biblioteca para resolver problemas especificos e criar belas apresentações. Vale a pena dar uma olhada em diversos exemplos fornecidos no próprio site para ver se ele atende a suas necessidades.

Efeito de scroll com Jquery

Este será um post bem rápido para mostrar um snippet de código que me ajudou a reduzir 1 biblioteca e manteve um efeito legal de scroll nos sites de uma página (as conhecidas landing pages).

Segue o snippet abaixo

$('html, body').animate({
    scrollTop: ($("objetoParaOndeIr").offset().top)
},500);

Como você pode ver não precisa fazer muito.

Para uma página Html que possui um menu com varios links apontando para sessoes especificas do site, você teria algo similar ao exemplo abaixo:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>teste</title>
</head>
<body>
    <section style="min-height: 75vh;">
        <a href="#sessao1">sessao1</a>
        <a href="#sessao2">sessao2</a>
        <a href="#sessao3">sessao3</a>
        <a href="#sessao4">sessao4</a>
    </section>
    <section id="sessao1" style="min-height: 75vh; background-color: aqua;"><h1>sessao1</h1></section>
    <section id="sessao2" style="min-height: 75vh; background-color: burlywood;"><h1>sessao2</h1></section>
    <section id="sessao3" style="min-height: 75vh; background-color: darkgray;"><h1>sessao3</h1></section>
    <section id="sessao4" style="min-height: 75vh; background-color: goldenrod;"><h1>sessao4</h1></section>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script>
        $("a").click(function () {
            console.log(this);
            $('html, body').animate({
                scrollTop: ($(this.hash).offset().top)
            }, 500)
        })

    </script>
</body>
</html>

 

Diferença de var e let

Como você já deve saber, no JavaScript existem formas de declarar variáveis.

  • Let: declara um variável não tipada
  • Const: declara uma constante
  • Var: declara uma variável não tipada

O let e o const se comportam exatamente como esperado deles comparado com a maioria das outras linguagens de programação. O var faz um trabalho similar ao let, no entanto, ele existe a um bom tempo e por isso carrega junto algumas coisas que não acontecem em outras linguagens.

Estaremos vendo a seguir algumas peculiaridades do “var”, pois o seu funcionamento não é algo “bom” ou “ruim”, ele atendeu (e ainda atende) a programação JavaScript.

 

Var não possui escopo de bloco

As variáveis declaradas com var possuem o escopo da função ou escopo global.

Por exemplo:

if (true) {
  // Usando o var para declarar uma variavel test com o valor true
  var test = true;
}

// Exibirá true, mesmo que a variavel tenha sido
// criada dentro do bloco IF
alert(test);

Se você utilizar o let no lugar do var, o mesmo não seria visível para a função alert pois o let possui escopo de bloco.

O mesmo ocorre para variáveis declaradas dentro de um loop

for (var i = 0; i < 10; i++) {
  // Seu código, ou nada mesmo
}

// Exibe 10, pois a variavel "i"
// também continua existindo fora do bloco
alert(i); 

Se o Código estiver dentro de uma função, então o var terá o escopo desta função e não será visto de forma global.

function sayHi() {
  if (true) {
    var phrase = "MundoJS";
  }

  //exibe MundoJS
  alert(phrase);
}

sayHi();

// Não reconhece a variavel
alert(phrase);

Como você pode ver, o var ignora completamente o escopo de bloco. Isso ocorre pois antigamente o JavaScript não possui qualquer tipo de ambiente para este tipo de lógica e o var é um sobrevivente daquela época.

 

O var é processado no começo da função

Variaveis declaradas com var são processadas no começo das funções, ou do script no caso de serem variáveis globais. Isso quer dizer que as variáveis serão definidas no começo da função onde estão contidas, independente de onde foram declaradas. Veja o exemplo:

function sayHi() {
  phrase = "MundoJS";

  alert(phrase);

  var phrase;
}

É o mesmo que fazer assim:

function sayHi() {
  phrase = "MundoJS";

  if (false) {
    var phrase;
  }

  alert(phrase);
}

Esse comportamento é conhecido como hoisting de variáveis. Com isso, casos como o acima, onde o IF nunca entrará no bloco de código, mesmo assim termos a declaração da variável pois ela é movida para o topo

Importante: Declarações vão para o começo, atribuições de valores não.

Exemplo:

function sayHi() {
  alert(phrase);

  var phrase = "MundoJS";
}

sayHi();

A linha que declara a variável, também está atribuindo uma string a ela. Quando o JavaScript executa este script, ele estará fazendo o seguinte:

function sayHi() {
  // A declaração ocorre no começo
  var phrase;

  // variavel -> undefined
  alert(phrase);

  // atribuição de valor
  phrase = "MundoJS"; 
}

sayHi();

Pelo fato de as variáveis sempre serem declaradas no começo, nós podemos referencia-las a qualquer momento. No entanto essas variáveis serão do tipo undefined até receberem seus valores.

Aprenda JavaScript “hackeando” sites

Uma das melhores maneiras de aprender uma nova linguagem é através da prática. Por isso, neste post eu estarei mostrando algumas formas de utilizar funções básicas do JavaScript e ao mesmo tempo “hackear” a tela de alguns sites para que você possa observar o poder desta linguagem.

Você precisará:

  • De um navegador (Chrome, Firefox, etc..).
  • Acesso ao console do navegador (normalmente a tecla F12 abrirá uma tela que terá a aba console).

Estes trechos de códigos serão simples, e você só precisa copiar e colar em qualquer site de sua escolha para ver o efeito. No entanto eu aconse-lho a alterar e mexer nele para que você realmente entenda o que está acontecendo.

Não se preocupe… Nada do que será mostrado tem efeito permanente na página e você precisa apenas fazer um F5 para limpar suas alterações.

Desmascarando Passwords

let passwords = document.querySelectorAll("input[type=password]");
for(let elem of passwords){elem.type="text";}

Este código pegará todos os inputs do tipo password e os transformará em texto. Com isso você poderá ver o que está sendo digitado nesses campos.

 

Bagunçando a orientação da tela

Array.prototype.slice.call(  
  document.querySelectorAll(
    'div,p,span,img,a,body')).map(function(tag){
    tag.style['transform'] = 'rotate(' + (
    Math.floor(Math.random() * 3) - 1) + 'deg)';
});

Aqui utilizamos diversas funcionalidades do JavaScript como o querySelector, Array Slice e Math para zoar com a orientação dos textos na tela.

 

Alterar todas as imagens da tela

Array.prototype.slice.call(  
  document.querySelectorAll('img')).map(function(tag){
    tag.src = 'http://bit.ly/2okYTfn';
});

Você pode colocar qualquer imagem que quiser, esse link é apenas um exemplo. Com esse script é possível trocar todas as imagens do HTML para o que você desejar.

 

Virando a tela depois de um tempo

setTimeout(function(){  
 document.onmousemove = document.onkeypress = 
 function(){
     document.body.style['transition'] = 'transform 3s';
     document.body.style['transform'] = 'rotate(180deg)';
 }
}, 4000);

Esse é um bom exemplo para dar um susto em alguém. Depois de 4 segundos (o 4000 passado por parametro) a tela gira um pouco, veja se você conegue notar

 

É isso ai pessoal, espero que tenham gostado deste post e que tenham aprendido algo. Deixem qualquer duvida ou sugestão aqui nos comentários. Até mais.

 

Como converter uma String em objeto HTML (DOM)?

Recentemente tive que trabalhar com a alimentação de dados vindos do servidor que guardavam dados HTML em formato String.

Para caso em que em bastava colar a resposta na tela, basta que se use o innerHTML que já deve ser conhecido por todos

let umTexto = "<h1>Titutlo</h1><p>Texto</p><p>Texto</p>";

document.geElementById("idDoObjeto").innerHTML = umTexto;

No entanto, dificilmente algo é tão simples quanto isso e esse no meu problema isso não era uma excessão. Veja o exemplo abaixo:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <table>
        <tr>
            <th>Company</th>
            <th>Contact</th>
            <th>Country</th>
        </tr>
        <tr>
            <td>Alfreds Futterkiste</td>
            <td>Maria Anders</td>
            <td>Germany</td>
        </tr>
        <tr>
            <td colspan="3" style="padding:20px;background-color: burlywood;">
                <table class="subtabela">
                    <tr>
                        <td>
                            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>Centro comercial Moctezuma</td>
            <td>Francisco Chang</td>
            <td>Mexico</td>
        </tr>
        <tr>
            <td colspan="3" style="padding:20px;background-color: burlywood;">
                <table class="subtabela">
                    <tr>
                        <td>
                            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>Ernst Handel</td>
            <td>Roland Mendel</td>
            <td>Austria</td>
        </tr>
        <tr>
            <td>Magazzini Alimentari Riuniti</td>
            <td>Giovanni Rovelli</td>
            <td>Italy</td>
        </tr>
        <tr>
            <td colspan="3" style="padding:20px;background-color: burlywood;">
                <table class="subtabela">
                    <tr>
                        <td>
                            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>
</html>

Acima seria o perfeito, mas na verdade vem assim e no formato String:

let stringResultado = '<!DOCTYPE html><html><head> <meta charset="UTF-8"></head><body> <table> <tr> <th>Company</th> <th>Contact</th> <th>Country</th> </tr><tr> <td>Alfreds Futterkiste</td><td>Maria Anders</td><td>Germany</td></tr><tr> <td colspan="3" style="padding:20px;background-color: burlywood;"> <table class="subtabela"> <tr> <td> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </td></tr></table> </td></tr><tr> <td>Centro comercial Moctezuma</td><td>Francisco Chang</td><td>Mexico</td></tr><tr> <td colspan="3" style="padding:20px;background-color: burlywood;"> <table class="subtabela"> <tr> <td> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </tr></table> </td></tr><tr> <td>Ernst Handel</td><td>Roland Mendel</td><td>Austria</td></tr><tr> <td>Magazzini Alimentari Riuniti</td><td>Giovanni Rovelli</td><td>Italy</td></tr><tr> <td colspan="3" style="padding:20px;background-color: burlywood;"> <table class="subtabela"> <tr> <td> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </td></tr></table> </td></tr></table></body></html>';

De toda forma, apenas os itens dentro da table com class=“subtabela” precisavam ser listados e exibidos. Para alcançar isso, após pesquisa, descobri que o JavaScript possui uma classe muito útil chamada de DomParser.

let parser = new DOMParser();
let doc = parser.parseFromString(stringContendoHTML, "text/html");

Com isso, foi possível transformar o resultado da seguinte forma e manipular o objeto da mesma forma como se manipula o DOM. Podendo acessar elementos por Id, classe, etc…

let doc = new DOMParser().parseFromString(stringResultado, "text/html");

let subtabelas = doc.getElementsByClassName("subtabela");

for(let i = 0; i < subtabelas.length; i++){
    console.log("Tabela " + (i+1));
    console.log(subtabelas[i].innerText);
    console.log("------------------");
}

Espero que isso ajude outras pessoas. Qualquer coisa, deixe um recado aqui nos comentários.

Aprendendo ReactJS: Parte 3

Este artigo é uma continuação da série Aprendendo ReactJS.

Para acessar primeiro o artigo, acesse: Aprendendo ReactJS: Introdução

Para acessar o anterior a este, acesse: Aprendendo ReactJS: Parte 2



Renderização condicional

A exibição de um componente funcional pode ser determinada baseado em suas propriedades. Por exemplo:

function Feature(props) {
    if (props.ativa == true) {
        return <h1>Esta funcionalidade está ativa.</h1>
    }
    else {
        return <h1>Esta funcionalidade está inativa.</h1>
    }
}

A mesma lógica pode ser expressada utilizado um operador ternário.

function Feature(props){
    return <h1>Está funcionalidade está {props.ativa? "ativa" : "inativa"}</h1>
}

Bloqueando a renderização

A exibição de um componente funcional pode ser evitada de renderizar como no exemplo abaixo:

function Feature(props) {
    if (props.ativa!) {
        return null
    }
    else {
        return <h1>{props.mensagem}</h1>
    }
}

Você também pode obter o mesmo resultado utilizando o operado &&:

function Feature(props){
    return (
        props.ativa && <h1>{props.mensagem}</h1>
    )
}

Com o operador && com um booleano e uma expressão, se o booleano for verdadeiro, ele executará a expressão. Caso ele seja falso, o JavaScript computa que falso e uma a expressão resultam sempre em falso e já sai do teste. Por isso ela não será renderizada.

Componentes de Classe

Além de poderem ser escritos como uma função, os componentes React podem também ser escritos usando as classes do ES6. Componentes de classe são diferentes dos components funcionais pois eles permitem ter métodos de ciclo de vida e estado. Eles também vem com duas propriedades instanciadas, this.state e this.props, que representam o estado e propriedades do componente.

Componentes React escritos usando classes ES6:

class BemVindo extends React.Component{
    render(){
        return <h1>Olá MundoJS!</h1>
    }
}

O código acima é o equivalente do seguinte componente funcional:

function BemVindo(){
    return <h1>Olá MundoJS!</h1>
}

Ambos components React podem ser escritos com seus nomes dentro de uma tag HTML:

let elemento = < BemVindo/>

Render()

O método render de um componente é usado para descrever qual tipo de elemento React será reotornado pelo componente de classe. É o equivalente ao valor passado no return do componente funcional. Por exemplo, o componente abaixo renderizará <h1> Olá MundoJS!</h1>:

class BemVindo extends React.Component {
    render() {
        return <h1> Olá MundoJS!</h1>
    }
}

//renderizará <h1> Olá MundoJS!</h1>
ReactDOM.render(
    < BemVindo />,
    document.getElementById("root")
)

Adicionando propriedades aos componentes de classe.

As propriedades de um componente podem ser acessadas através do atributo this.props. Isso difere levemente dos componentes funcionais onde elas precisam ser passadas como uma variável.

class BemVindo extends React.Component{
    render(){
        return <h1>Mensagem: {this.props.mensagem}</h1>
    }
}

Você pode fornecer as propriedades da mesma forma em ambos componentes.

<Welcome message="Olá MundoJS!"/>

Constructor(props)

O método contructor() é chamado antes do componente React ser montado e pode ser usado para configurar o estado inicial do componente. É importante chamar super(props) no começo do construtor pois senão o this.props poderá não funcionar corretamente. O primeiro argumento do construtor representará as propriedades sendo passadas para o componente.

class Counter extends React.Component{
    constructor(props){
        super(props)
    }
    render(){
        return <div>Componente</div>
    }
}

Adicionando um estado inicial para os components de classe

O estado inicial dos componentes de classe podem ser declarados dentro do método constructor(). O estado deste componenetes deve ser declarado como um objeto com atributos.

class Counter extends React.Component{
    constructor(props){
        super(props)
        this.valores= {
  foo:123,
  bar:456
  }
    }

    render(){
        return <div>foo:{this.valores.foo} bar:{this.valores.bar}</div>
    }
}

Atualizando o estado

O método setState(updater,[callback]) é utilizado para atualizar o estado do componente. Ele recebe um objeto “atualizador” e atualiza o estado do componente através de uma mescla superficial do atributos dos dois objetos de estado (atual e novo). Como este metodo atualiza o estado de forma assinacrona, existe uma opção de chamar uma função de callback uma vez que a atualização terminou. Para poder usar o setState(), ele precisa ser referenciado através da chamada this.setState().

O método setState ativará a fase de atualização no ciclo de vida do componente, causanda a rerenderização a não ser que a função shouldComponentUpdate() retorne falso.

class Msg extends React.Component{
    constructor(props){
        super(props)
        //estado inicial
        this.state = {mensagem:"Mensagem Inicial"}
    }

    // Este método é chamado após todos os element filhos e instancias do components tenham carregado no Native UI.
    componentDidMount(){
        //updating state
        this.setState({mensagem:"Nova Mensagem"})
    }
    
    render(){
        return <div>Mensagem:{this.state.mensagem}</div>
    }
}

Por hoje seria isso. Assim que montar mais uma parte deste tutorial estarei liberando ele aqui no site do MundoJS.

Caso você encontre algum erro, tenha um contribuição ou dica, deixe seu comentário aqui em baixo que irei responder o mais breve possível.

JavaScript: O objeto Date

Neste post veremos um resumão do objeto Date do JavaScript e como manipular seus atributos.

A instância do objeto Date representa um único ponto no tempo. Apesar de ter o nome Date (data em inglês), este objeto também lida com o tempo.

Inicializando o objeto Date

Inicializamos um objeto Date usando

let d = new Date();

Isso criará um objeto Date apontando para o o momento atual. Internamente, as datas são expressas em milissegundos desde 1º de janeiro de 1970 (UTC). Se passarmos 0, receberemos um objeto Date que representa a hora em 1º de janeiro de 1970 (UTC):

let d = new Date(0);

Se passarmos uma string ao invés de um número, o objeto Date usará o método de análise para determinar a data que você está passando. Exemplos:

// Caso o apresente apenas o ano, o mês default será janeiro
// Caso não apresente o dia, o default será o primeiro
// Caso não apresente o horário, o default será 00:00:00
// Lembrando que padrões americanos de data funcionam com mês, dia e ano

new Date('2018-07-22') // Formato aaaa-mm-dd
new Date('2018-07') // 1º de Julho 2018 - 00:00:00
new Date('2018') // 1º de Janeiro 2018 - 00:00:00
new Date('07/22/2018') // Formato mm-dd-aaaa
new Date('2018/07/22') // Formato aaaa-mm-dd
new Date('2018/7/22') // Formato aaaa-mm-dd
new Date('July 22, 2018')
new Date('July 22, 2018 07:22:13')
new Date('2018-07-22 07:22:13')
new Date('2018-07-22T07:22:13')
new Date('25 March 2018')
new Date('25 Mar 2018')
new Date('25 March, 2018')
new Date('March 25, 2018')
new Date('March 25 2018')
new Date('March 2018') // 1º de Março de 2018 - 00:00:00
new Date('2018 March') // 1º de Março de 2018 - 00:00:00
new Date('2018 MARCH') // 1º de Março de 2018 - 00:00:00
new Date('2018 march') // 1º de Março de 2018 - 00:00:00

O mínimo deve ter 3 parâmetros, mas a maioria dos mecanismos JavaScript também interpreta menos que estes:

new Date(2018, 6) // Dom jul 01 2018 00:00:00 GMT + 0200 (horário de verão da Europa Central)
new Date(2018) // Qui Jan 01 1970 01:00:02 GMT + 0100 (Hora Padrão da Europa Central)

Em qualquer um desses casos, a data resultante é relativa ao fuso horário do seu computador. Isso significa que dois computadores diferentes podem gerar um valor diferente para o mesmo objeto de data. O JavaScript, sem qualquer informação sobre o fuso horário, considerará a data como UTC ou tempo universal coordenado (saiba mais acessando este link) e executará automaticamente uma conversão para o fuso horário atual do computador.

Então, resumindo, você pode criar um novo objeto Date de 4 maneiras:

  • não passando parâmetros, cria um objeto Date que representará a data e hora do momento que o objeto foi criado.
  • passando um número, que representa os milissegundos de 1 de janeiro de 1970 às 00:00 GMT.
  • passando uma string, que representa uma data.
  • passando um conjunto de parâmetros, que representam as diferentes partes de uma data.

 

Fusos horários

Ao inicializar uma data, você pode passar um fuso horário, portanto, a data não é assumida como UTC e depois convertida para o fuso horário local. Você pode especificar um fuso horário adicionando-o no formato +HORAS ou adicionando o nome do fuso horário entre parênteses:

new Date('July 22, 2018 07:22:13 +0700')
new Date('July 22, 2018 07:22:13 (CET)')

ATENÇÂO: Se você especificar um nome de fuso horário errado entre parênteses, o JavaScript será padronizado como UTC sem reclamar. Mas, se você especificar um formato numérico incorreto, o JavaScript se queixará com um erro de “Data Inválida”.

 

Conversões de data e formatação

Dado um objeto Date, existem muitos métodos que gerarão uma string a partir dessa data:

const date = new Date('July 22, 2018 07:22:13')

date.toString() // "Sun Jul 22 2018 07:22:13 GMT+0200 (Central European Summer Time)"
date.toTimeString() //"07:22:13 GMT+0200 (Central European Summer Time)"
date.toUTCString() //"Sun, 22 Jul 2018 05:22:13 GMT"
date.toDateString() //"Sun Jul 22 2018"
date.toISOString() //"2018-07-22T05:22:13.000Z" (ISO 8601 format)
date.toLocaleString() //"22/07/2018, 07:22:13"
date.toLocaleTimeString()	//"07:22:13"
date.getTime() //1532236933000
date.getTime() //1532236933000

 

Os métodos getter do objeto Date

Um objeto Date oferece vários métodos para verificar seu valor. Tudo isso depende do fuso horário atual do computador:

const date = new Date('July 22, 2018 07:22:13')

date.getDate () // 22 (os valores do dia iniciam na base 1)
date.getDay () // 0 (0 significa domingo, 1 significa segunda ..)
date.getFullYear () // 2018
date.getMonth () // 6 (O valor dos meses inicia no 0)
date.getHours () // 7
date.getMinutes () // 22
date.getSeconds () // 13
date.getMilliseconds () // 0 (não especificado quando criado o objeto)
date.getTime () // 1532236933000
date.getTimezoneOffset () // - 120 (irá variar dependendo de onde você estiver e quando você verificar - este é o CET durante o verão). Retorna a diferença de fuso horário expressa em minutos

Caso você precise, existem versões UTC equivalentes desses métodos, que retornam o valor UTC em vez dos valores adaptados ao seu fuso horário atual:

date.getUTCDate () // 22
date.getUTCDay () // 0 (0 significa domingo, 1 significa segunda ..)
date.getUTCFullYear () // 2018
date.getUTCMonth () // 6 (inicia em 0)
date.getUTCHours () // 5 (não 7 como acima)
date.getUTCMinutes () // 22
date.getUTCSeconds () // 13
date.getUTCMilliseconds () // 0 (não especificado)

 

Os métodos setter do objeto Date

Da mesma forma, o JavaScript possue diversos métodos que servem para definir (setar) novos valores no objeto Date.

let d = new Date();

// Os seguintes métodos definem:
setDate(2) // o dia como um número (1-31)
setFullYear(2020) // Define o ano.
setFullYear(2020, 5, 20) // Define o ano, mês e dia.
setHours(22) // Define as horas (0-23)
setMilliseconds(100) // Define os milissegundos (0 a 999)
setMinutes(55) // Define os minutos (0-59)
setMonth(0) // Define o mês (0-11). 0 é Janeiro
setSeconds(1) // Define os segundos (0-59)
setTime(125033) // Define o tempo (milissegundos desde 1º de janeiro de 1970)

 

Comparando duas datas

Você pode calcular a diferença entre duas datas usando Date.getTime():

const date1 = new Date('July 10, 2018 07:22:13')
const date2 = new Date('July 22, 2018 07:22:13')

const diff = date2.getTime () - date1.getTime () // diferença em milissegundos

 

Da mesma forma, você pode verificar se duas datas são iguais:

const date1 = new Date('July 10, 2018 07:22:13')
const date2 = new Date('July 10, 2018 07:22:13')

if (date2.getTime () === date1.getTime ()) {   
    // datas são iguais
}

Lembre-se de que getTime() retorna o número de milissegundos, portanto é necessário levar em conta o tempo na comparação. 10 de julho de 2018 07:22:13 não é igual a novo 10 de julho de 2018 pois, conforme mencionado no começo, se você não declarar o horário, o JavaScript o deixará como 00:00:00


Fonte:

W3Schools – Date get Methods

W3Schools – Date set Methods

Definitive guide to Dates