Eu amo escrever código e quero ser bom nisso. Porém, por algum motivo, programar em JavaScript nunca foi o meu forte.

Não importa o quanto eu praticava – os mesmos erros continuavam aparecendo em produção: exceções cannot read property <> of undefined, a famosa string [Object object] e, até mesmo, chamadas de funções com um número inválido de parâmetros.

Além do mais, a maioria das bases de código em que eu estava trabalhando tinham uma quantidade de JavaScript realmente grande. Então, aqui está um ótimo diagrama que explica como é estar no meu lugar:

Neste artigo, evitarei explicar por que o TypeScript é incrível (e ele é) e focarei nas tarefas que você precisa completar se você quiser migrar do JavaScript básico para um projeto que mistura TypeScript.

Até o final do artigo, você será uma pessoa feliz e será capaz de responder às seguintes perguntas:

• Como eu posso adicionar tipos ao meu projeto em JavaScript?
• O que é TypeScript?
• Como eu posso usar TypeScript em um projeto em JavaScript?
• Quais são as etapas para converter uma aplicação do JavaScript para oferecer suporte a TypeScript?
• Como eu posso cuidar do build e do empacotamento?
• Como eu posso tomar conta do lint?
• Como eu posso "vender" o TypeScript para minha organização e desenvolvedores?

Como eu posso adicionar tipos ao meu projeto em JavaScript?

O JavaScript básico ainda não suporta tipos. Então, precisamos de algum tipo de abstração sobre o JavaScript para fazer isso.

Algumas abstrações comuns são usar o verificador de tipos estático flow, do Facebook, e a linguagem da Microsoft chamada: TypeScript.

Este artigo tratará do uso e da inclusão do TypeScript ao seu projeto em JavasScript.

O que é Typescript?

TypeScript é um superset tipado do JavaScript, que é compilado para JavaScript puro.

O Typescript consiste de algumas partes. A primeira é a linguagem em si — essa é uma nova linguagem que contém todas as features do JavaScript .

A segunda é o compilador do TypeScript, o tsc, que é o motor do sistema de tipos (do inglês, type system engine) que é um mecanismo de compilação que cria arquivos .ts e gera arquivos .js.

"Hello world" em TypeScript

Como exemplo, estes são os passos que você precisa para escrever sua primeira aplicação em TypeScript:

1. instale o TypeScript com o comando npm i typescript
2. crie uma pasta chamada example e entre nela com o comando cd example
3. crie um arquivo chamado hello.world.ts
4. escreva o código a seguir nele:

const firstWords:string = "hello world"
console.info(firstWords);

Em seguida, salve-o.

5.  execute o comando npx tsc hello.world.ts  para rodar o compilador do TypeScript no seu arquivo hello.world.ts

6.  perceba que você agora tem um arquivo hello.world.js que você pode executar :)

7.  execute node ./hello.world.js

Como eu posso usar TypeScript em um projeto em JavaScript?

Existem algumas estratégias para fazer essa "migração" (em termos de empresa e de código). Listei essas estratégias abaixo de acordo com seu "custo" e com o valor que elas fornecem.

Eu sugeriria começar com "suporte a TS na aplicação" e seguir em frente depois de provar o valor para sua equipe de desenvolvimento.

A abordagem "um pequeno passo para o homem" – adicionando suporte ao TS em aplicações existentes

Minha primeira sugestão é criar uma mistura das duas linguagens em um único projeto e, então, escrever todos os códigos "futuros" em TypeScript.

A combinação de duas linguagens em um único projeto soa muito ruim no começo, mas funciona muito bem já que o TS foi construído para uso gradual. A princípio, ele pode ser usado apenas como JS com arquivos .ts e linhas de importação estranhas.

Nessa estratégia, compilaremos os arquivos TypeScript migrados e apenas copiaremos os arquivos JavaScript para uma pasta de saída.

O grande benefício dessa abordagem é permitir uma curva de aprendizado gradual para a equipe de desenvolvimento (e para você) com a linguagem e seus recursos. Ela também oferece experiência prática e informações sobre seus prós e contras.

Eu recomendo começar a partir dessa etapa e, em seguida, seguir passo a passo com sua equipe antes de prosseguir. Para saber "como fazer isso" rapidamente, leia abaixo sobre as etapas para converter uma aplicação em JavaScript para que tenha suporte ao TypeScript a parte

A abordagem aberta para negócios – adicionando suporte ao TS para bibliotecas existentes

Depois de ter alguma experiência prática com o TS e de sua equipe de desenvolvimento concordar que vale a pena seguir em frente, sugiro converter suas bibliotecas e módulos internos para oferecer suporte a TS.

Isso pode ser feito de duas maneiras:

A primeira maneira envolve usar arquivos de declaração (texto em inglês). Uma simples adição de arquivos d.ts ajuda o compilador do TS a verificar o tipo de código em JavaScript existente e fornece suporte de preenchimento automático em seu IDE.

Essa é a opção "mais barata", pois não requer nenhuma alteração de código na biblioteca. Ela também oferece potência máxima e suporte a tipos em seu código futuro.

A segunda maneira é realizar uma reescrita completa do TypeScript, o que pode ser demorado e sujeito a erros. Eu desaconselharia isso, a menos que se prove um retorno digno para sua equipe.

O "esqueleto" – um passo para o futuro

Presumo que a maioria dos desenvolvedores seja "preguiçosa" e, geralmente, inicie sua aplicação copiando de um código esqueleto (que geralmente contém registro, métricas, configuração e assim por diante).

Essa etapa ajuda você a navegar em seu caminho para um futuro brilhante, criando um esqueleto "oficial" para sua empresa. Será 100% TS e aposentará o antigo esqueleto em JS, se existir.

Esse typescript-node-starter é um bom primeiro projeto para começar.

A abordagem de "apostar tudo" – convertendo uma base de código completa de JS para TS

Essa opção requer uma reescrita total do código de JavaScript para TypeScript.‌

‌Eu recomendaria fazer isso como uma etapa final no processo de migração do TS, pois requer uma reescrita total da aplicação e profundo conhecimento do TypeScript e de seus recursos.

Você pode reescrever (é um processo longo) da seguinte maneira:

1. Defina tipos claros para a lógica de negócios, APIs e HTTP de sua aplicação
2. Use pacotes @types para todas as bibliotecas em seu package.json. A maioria das bibliotecas suporta TS. Nesse processo, sugiro migrar um por um (apenas adicionando @types/<nome_do_pacote> no seu arquivo package.json).
3. Converta os componentes lógicos de sua aplicação em ordem de importância. Quanto mais exclusiva for a lógica de negócios, melhor.
4. Converta as partes de E/S de sua aplicação, camadas de banco de dados, filas e assim por diante.
5. Converta seus testes.

Lembre-se de que existem ferramentas automatizadas projetadas para facilitar esse processo, como, por exemplo, a ts-migrate, do time da Airbnb.

Ela aborda esse problema de uma perspectiva diferente e converte todos os arquivos em TypeScript. Ela também permite melhorias graduais (como mencionado nas etapas acima), enquanto toda a base de código é em TypeScript desde o primeiro dia.

Como converter uma aplicação do JavaScript para oferecer suporte a TypeScript

Instale o TypeScript

executando : npm install typescript.

Arquivo de configuração do Typescript

Adicione um arquivo de configuração do TypeScript, que pode ser criado usando o comando npx tsc --init no seu terminal.

Aqui está um exemplo de como nossa configuração inicial parecia:

{
 "compilerOptions": {
   "target": "esnext",
   "module": "commonjs",
   "allowJs": true,
   "checkJs": false,
   "outDir": "dist",
   "rootDir": ".",
   "strict": false,
   "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
   "forceConsistentCasingInFileNames": true, /* Disallow inconsistently-cased references to the same file. */
   "declaration": true, /* Generates corresponding '.d.ts' file. */
   "strictNullChecks": true,
   "resolveJsonModule": true,
   "sourceMap": true,
   "baseUrl": ".",
   "paths": {
    "*": [
      "*",
      "src/*",
      "src/setup/*",
      "src/logic/*",
      "src/models/*",
      "config/*"
    ]
  },
 },
  "exclude": ["node_modules", "dist"],
  "include": [
    "./src",
    "./test",
    "./*",
    "./config" 
  ]
}

Algumas coisas para observar acima:

• Lemos todos os arquivos na pasta src ou test ou config  (usando a opção include).
• Aceitamos arquivos em JavaScript como entradas (usando a opção allowJs).
• Colocamos todos os arquivos de saída na pasta dist (usando a opção outDir).

Crie seu primeiro arquivo .TS no projeto

Eu recomendo começar adicionando um arquivo TypeScript simples (ou alterando um arquivo JS realmente simples para TS) e realizando o deploy. Faça essa migração um passo de cada vez.

Cuide do seu arquivo package.json

Aqui está como era nosso package.json e como ficou depois:

{
  "scripts": {
    "start": "node ./application.js",
    "mocha": "mocha --recursive --reporter spec -r test/bootstrap.js",
    "test": "npm run mocha -- test/ -r test/integration/bootstrap.js", 
  }
}

{
  "scripts": {
    "start": "node ./dist/application.js",
    "build-dist": "./node_modules/typescript/bin/tsc",
    "mocha": "mocha --recursive --reporter spec -r ./dist/test/bootstrap.js",
    "test": "npm run mocha -- ./dist/test/ -r ./dist/test/integration/bootstrap.js"
  }
}

Como você pode ver, a maioria das mudanças foi relacionada a adicionar o prefixo dist à maioria dos nossos comandos de compilação. Também adicionamos um script build-dist que compila nossa base de código e move todos os arquivos para uma pasta dedicada chamada dist.

Um dos grandes problemas ao adicionar TypeScript ao seu projeto é que você está adicionando uma camada indireta entre o código que você escreve e o código que realmente é executado na produção (já que o .ts é transpilado para .js em tempo de execução).

Por exemplo, imagine o seguinte programa em TypeScript:

const errorMessage: string = "this is bad"

throw new Error(a)

Quando o executarmos, ele lançará o seguinte erro:

Error: this is bad
    at Object.<anonymous> (/Users/dorsev/work/git/example/hello.js:3:7)

Isso é problemático, pois nossa base de código contém apenas arquivos .ts. Como a maioria dos códigos de produção contém centenas de linhas, será muito demorado traduzir esses números e arquivos corretamente.

Felizmente, para nós, existe uma solução para isso chamada source-map-support!

Isso nos permite garantir que os erros tenham nomes de arquivo .ts e números de linha adequados, como estamos acostumados. :)

Isso pode ser feito executando npm install source-map-support e adicionando a seguinte linha nas primeiras linhas da sua aplicação:

require('source-map-support').install();

O código agora se parece com isso:

require('source-map-support').install();
const a:string = "this is bad"
throw new Error(a)

Quando o compilamos, executamos tsc --sourcemap hello.ts. Agora, obtemos o seguinte erro, que é incrível! :)

Error: this is bad
    at Object.<anonymous> (/Users/dorsev/work/git/example/hello.ts:3:7)

Nas versões recentes do nodejs, isso é suportado nativamente usando a flag --enable-source-maps.

Como cuidar do seu build (Travis) e do empacotamento

Vamos apenas examinar as alterações antes e depois em nosso arquivo de build.

Nosso arquivo .travis, antes, estava assim (versão simplificada):

jobs:
  include:
  - &build-and-publish
    before_script:
    - npm install --no-optional --production
    - npm prune --production
    before_deploy:
     - XZ_OPT=-0 tar --exclude=.git --exclude=reports.xml --exclude=${ARTIFACTS_MAIN_DIR}
       --exclude=.travis.yml --exclude=test -cJf "${ARTIFACTS_PATH}/${REPO_NAME}".tar.xz * .??*
  
  - &test
    before_script:
     - npm install --no-optional
    script:
     - echo "Running tests"
     - npm run lint && npm test

Foi assim que ele ficou depois:

jobs:
  include:
  - &build-and-publish
    before_script:
    - npm install --no-optional --production
    - npm run build-dist  # Build dist folder
    - npm prune --production
    before_deploy:
     - cp -rf config/env-templates ./dist/config/
     - cp -rf node_modules ./dist/
     - cd dist
     - XZ_OPT=-0 tar --exclude=.git --exclude=reports.xml --exclude=${ARTIFACTS_MAIN_DIR} --exclude=.travis.yml --exclude=test -cJf "${REPO_NAME}.tar.xz" *
     - mv ${REPO_NAME}.tar.xz "../${ARTIFACTS_PATH}"
     - cd ..

  - &test
    before_script:
     - npm install --no-optional
     - npm run build-dist
    script:
     - echo "Running tests"
     - npm run lint && npm test

Observe que a maioria das alterações diz respeito ao "empacotamento" do arquivo  tar.xz e à execução do comando build-dist antes de acessar a pasta dist.

Como posso cuidar do lint?

Existem algumas soluções de lint disponíveis.

A primeira solução que usamos foi tsfmt  –  mas decidimos contra isso mais tarde porque exige que você mantenha duas configurações separadas para seu projeto (uma para TypeScript usando tsfmt e outra separada para JavaScript usando eslint). O projeto também parece descontinuado.

Então, encontramos o TSLint , que nos redirecionou para o plug-in slint para TypeScript. Configuramos o TSLint da seguinte maneira:

Essa era o nosso eslintrc.js:

module.exports = {
    rules: {
        indent: [2, 2, {
            SwitchCase: 1
        }],
        'no-multi-spaces': 2,
        'no-trailing-spaces': 2,
        'space-before-blocks': 2,
    },
    overrides: [{
        files: ['**/*.ts'],
        parser: '@typescript-eslint/parser',
        plugins: ['@typescript-eslint'],
        extends: ['plugin:@typescript-eslint/eslint-recommended', 'plugin:@typescript-eslint/recommended']
    }]
}

Configuramos o lint para rodar usando um comando lint-fix em nosso package.json, que se parece com o seguinte:

{
    "scripts": {
        "lint-fix": "node_modules/.bin/eslint . --fix"
    },
    "pre-commit": ["lint-fix"]
}

Como "vender" o TypeScript para seu time de desenvolvedores

Acredito que um dos aspectos mais críticos da introdução do TypeScript em sua organização é o "argumento" e como você o apresenta à sua equipe de desenvolvimento.

Aqui está a apresentação que fizemos internamente, que girava em torno dos seguintes temas:

1. Explicar por que achamos o TypeScript incrível
2. O que é TypeScript
3. Alguns exemplos básicos de código. O ponto principal nesta parte não é "ensinar" 100% sobre o TypeScript, já que as pessoas farão isso por conta própria. Em vez disso, devemos dar às pessoas a sensação de que elas podem ler e escrever TypeScript e que a curva de aprendizado não é tão difícil.
4. Exemplos de código avançado, como Tipos de União (em inglês, union types) e tipos de dados algébricos (em inglês, algebraic data types) que agregam um grande valor a um desenvolvedor de JS. Este é um verdadeiro deleite, além da linguagem tipada e do compilador, que atrairão seus desenvolvedores.
5. Como começar a usá-lo: incentive as pessoas a baixar o IDE do vscode e a adicionar uma anotação (//@ts-check) para que possam começar a ver a mágica! Na nossa empresa, preparamos com antecedência alguns erros muito legais que o ts-check detecta, e realizamos uma demonstração ao vivo (de 2 a 3 minutos) para mostrar a rapidez do compilador do TypeScript e como ele pode ajudar usando a documentação do JS com anotações de tipo ou o ts-check.
6. Aprofunde-se em alguns recursos: explique que os arquivos ts.d e pacotes @types são algumas das coisas que você encontrará bem cedo em suas bases de código em TypeScript.
7. Pull requests ao vivo do seu trabalho. Mostramos o PR que criamos desde o início e incentivamos as pessoas a revisá-lo e experimentá-lo por si mesmos.
8. Compartilhe alguns recursos interessantes. Há muito conteúdo on-line e é difícil distinguir o bom do ruim. Faça uma pesquisa sólida para seus colegas de equipe e tente encontrar conteúdo de qualidade sobre as ferramentas que você usa e precisa. Role até a conclusão para conferir meus recursos.
9. Crie um pull request público . Eu recomendo tentar obter o máximo de apoio possível para sua aprovação.

10.  Crie um burburinho positivo em sua organização sobre a mudança!

Eu recomendo ajustar essa lista de acordo com sua equipe, padrões e restrições de tempo.

Conclusão

O Typescript é mesmo incrível! Se você está escrevendo software de nível de produção e os requisitos de negócios e a disponibilidade são altos, eu o encorajo fortemente a experimentar o TypeScript.

Apenas lembre-se de dar um passo de cada vez. Novas linguagens e frameworks são difíceis. Assim, reserve um tempo para aprender e educar a si mesmo e sua equipe antes de levar esse processo adiante.

Crie um ciclo curto de feedback e propostas de melhorias. É difícil "vender" uma nova linguagem para sua equipe e gerenciamento, pois leva tempo e recursos.

Portanto, crie seu processo de migração com ciclos de feedback curtos, tente definir indicadores de desempenho claros (menos bugs na produção, tempos de refatoração mais fáceis e assim por diante) e certifique-se de que a proposta de valor para o seu caso de uso seja constantemente justificada até que se torne o padrão de fato.

Torne os recursos de aprendizado facilmente acessíveis. Gostei muito desta apresentação sobre os primeiros passos do TypeScript (em inglês) e deste artigo (também em inglês) sobre a migração incremental para o TypeScript.

Além disso, não perca os projetos deno e ts-node. Particularmente, estou muito animado e ansioso para utilizar os dois em breve.

Sempre quis aprender expressões regulares (regex), mas se desanimou com a complexidade? Neste artigo, eu vou mostrar para você 5 truques com regex fáceis de aprender que você pode começar a usar imediatamente no seu editor favorito.

Configuração do editor de texto

Embora quase todos os editores de texto suportem expressões regulares, eu usarei o Visual Studio Code, mas você pode usar qualquer editor que você goste. Observe, também, que você geralmente precisa ativar a regex em algum lugar próximo ao campo de busca. Aqui está como fazer isso no VS Code:

1) . — Corresponde a qualquer caractere

Vamos começar pelo básico. O símbolo . equivale a qualquer caractere:

b.t

A regex acima equivale a "bot”, "bat” e qualquer outra palavra de 3 caracteres que comece com b e termine com t. Se, no entanto, você quiser pesquisar pelo símbolo de ponto, precisará "escapar" o símbolo usando \. Então, essa regex corresponderá ao texto exato "b.t":

b\.t

2) .* — Corresponde a qualquer texto

Aqui, . significa "qualquer caractere" e * significa "qualquer coisa antes desse símbolo repetida qualquer número de vezes". Juntos, (.*) significam "qualquer símbolo qualquer número de vezes" e servem para encontrar correspondências começando ou terminando em algum texto. Vamos supor que temos um método do JavaScript com a seguinte assinatura:

loadScript(scriptName: string, pathToFile: string)

Queremos encontrar todas as chamadas desse método onde pathToFile aponta para qualquer arquivo na pasta "lua" . Você pode usar a seguinte expressão regular para isso:

loadScript.*lua

Isso significa, "encontre todas as ocorrências de "loadScript" seguidas por qualquer texto até a última ocorrência de "lua""

3) ? — Correspondência não gananciosa

O ? depois do .* e algumas outras sequências de regex significa "Faça a correspondência ao mínimo possível". Se você olhar na imagem anterior, você verá que o texto "lua" aparece duas vezes em cada correspondência e que tudo até o segundo "lua" foi considerado. Se, ao invés disso, você quiser corresponder a tudo até a primeira ocorrência de  "lua", terá que usar a seguinte regex:

loadScript.*?lua

Ela significa, "Corresponda a tudo que começa com "loadScript" seguido por qualquer coisa até a primeira ocorrência de "lua""

4) ( ) $ — Captura grupos e referências anteriores

Ok. Agora, podemos encontrar alguns textos. Se quisermos, no entanto, mudar partes dos textos que encontramos? Geralmente, precisamos usar captura de grupos para isso.

Vamos supor que mudamos nosso método loadScript e agora, de repente, ele precisa de outro parâmetro inserido em seus outros dois parâmetros. Vamos chamar esse novo parâmetro de id. Então, a nova assinatura da função deve ficar assim: loadScript(scriptName, id, pathToFile). Nós não podemos usar a substuição normal do editor de texto aqui, mas uma expressão regular é exatamente o que precisamos.

Você pode ver acima o resultado da execução da seguinte expressão regular:

loadScript\(.*?,.*?\)

Ela significa: "corresponda a tudo que inicia com "loadScript(" seguido de qualquer coisa até o primeiro símbolo ,, seguido por qualquer coisa até o primeiro )"

As únicas coisas que podem parecer estranhas para você aqui são os símbolos \. Eles são usados para escapar os parênteses.

Precisamos escapar ( e ), pois eles são caracteres especiais usados no regex para capturar partes dos textos que corresponderam. Porém, precisamos corresponder aos caracteres de parênteses.

Na regex anterior, definimos dois parâmetros de nossa chamada de método com os símbolos .*?. Vamos fazer cada um dos nossos parâmetros um grupo de captura separado, adicionando os símbolos( e ) ao redor deles:

loadScript\((.*?),(.*?)\)

Se você executar essa regex, você verá que nada mudou. Isso é porque ela corresponde ao mesmo texto. Agora, contudo, podemos referenciar o primeiro argumento com $1 e o segundo argumento com $2. Isso é chamado de backreference (em português, referência prévia), e nos ajudará com o que queremos: adicionar outro parâmetro no meio da chamada.

Input de busca:

loadScript\((.*?),(.*?)\)

Isso significa a mesma coisa que a regex anterior, mas mapeia os parâmetros para capturar os grupos 1 e 2, respectivamente.

Input de substituição:

loadScript($1,id,$2)

Isso significa "substitua tudo que corresponda a "loadScript(" seguido pelo grupo de caracteres capturados 1, "id, grupo de caracteres capturados 2 e )". Observe que você não precisa escapar os parênteses no input de substituição.

5) [ ] — Classe de caracteres

Você pode listar caracteres que você quer corresponder a uma posição especifica colocando os símbolos [ e ] ao redor desses caracteres. Por exemplo, a classe [0-9] corresponde a todos os dígitos de 0 a 9. Você também pode listar os dígitos explicitamente: [0123456789] — o significado é o mesmo. Você pode usar o - com letras também. [a-z] vai corresponder a todos os caracteres minúsculos,[A-Z] corresponderá a todos os caracteres maiúsculos e [a-zA-Z] corresponderá a ambos.

Você também pode usar o * depois de uma classe de caracteres igual ao ., o que significa: "corresponda a qualquer número de ocorrências dos caracteres dessa classe".

Conclusão

Você precisa saber que existem vários tipos de regex. Esta que discutimos aqui é a regex da engine do JavaScript. A maioria das engines modernas é semelhante, mas pode haver algumas diferenças. Normalmente, essas diferenças incluem o caractere de escape e marcadores de refências prévias.

Eu encorajo você a abrir seu editor de texto e começar a usar alguns desses truques agora mesmo. Você verá que, agora, você consegue completar muitas tarefas de refatoração muito mais rapidamente do que antes. Quando se sentir confortável, pode começar a pesquisar mais sobre expressões regulares (texto em inglês).

Obrigado pela leitura deste artigo até o final. Se achou o artigo útil, compartilhe-o. Futuramente, publicarei mais artigos sobre expressões regulares, JavaScript e programação em geral.

Escrito por: Abhishek Jakhar

O HTML nos permite criar reprodutores de vídeo e áudio baseados em padrões que não requerem o uso de plug-ins. Adicionar vídeo e áudio a um site é quase sempre tão fácil quanto adicionar imagens ou formatar algum texto.

Existem duas formas diferentes de incluir elementos de vídeo. Discutiremos as duas abaixo.

Vídeo

A tag <video> nos permite inserir arquivos de vídeo no HTML, bem similar ao modo como imagens são inseridas.

Os atributos que podemos inserir são:

• src: este atributo representa a fonte, que é muito semelhante ao atributo src usado no elemento de imagem. Adicionaremos o link para um arquivo de vídeo nesse atributo.
• type: este será video/mp4, pois .mp4 é o formato de vídeo que estamos usando. Também podemos usar diferente formatos de vídeo, como .ogg ou .webm. Nesse caso, o valor de type mudaria para video/ogg ou video/WebM, respectivamente.

Nota: alguns formatos de vídeo comuns são WebM, Ogg, MP4.

Agora, temos esse vídeo na nossa página, mas tem um problema. Esse vídeo não está sendo reproduzido automaticamente e também não há controles para iniciar o vídeo. Temos que adicioná-los manualmente usando o atributo controls na nossa tag de vídeo.

Esse atributo não possui nenhum valor, porque é um atributo booleano. Isso significa que ele só pode ser true ou false.

Ter o atributo controls na nossa tag de vídeo significa que o valor dele será true e exibirá os controles de reprodução.

Se removermos o atributo controls, também podemos fazer o vídeo ser reproduzido automaticamente usando o atributo autoplay. Esse também é um atributo booleano.

Como você pode ver, o vídeo está iniciando sozinho e não há controle. É verdade que não precisamos pressionar play para iniciar o vídeo, mas também não podemos pará-lo.

Também podemos ter controles e reprodução automática juntos.

Você pode fornecer atributos diferentes para o elemento de vídeo, dependendo do requisito.

Eu mencionei acima que existem duas formas diferentes de adicionar a tag vídeo. Vamos testar a outra forma.

Tag source

Anteriormente, usamos um elemento de vídeo com tag de fechamento automático, mas, aqui, fecharemos a tag de vídeo. Agora, temos uma tag de abertura e de fechamento.

Nos também removeremos os atributos type e source da tag video e os colocaremos em outra tag.

<video>  <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4" type="video/mp4"></video>

Tudo o que fizemos foi mover os atributos para o elemento source

Por que faríamos isso?

Bem, na maioria dos casos, com o vídeo, teremos várias fontes, já que precisamos fornecer diferentes tipos de arquivo, dependendo de qual navegador está visualizando seu vídeo, pois diferentes navegadores oferecem suporte a diferentes tipos de arquivo.

O vídeo ficará exatamente igual. Agora, no entanto, temos um suporte mais amplo dos navegadores.

Se quisermos adicionar atributos como controls, autoplay, loop etc., adicionaremos a tag <video>.

Elemento de áudio

A tag <audio> é bastante similar à tag video. Entretanto, a única principal diferença é que não há recursos visuais.

Podemos usar o elemento de áudio para iniciar um arquivo de vídeo na nossa página da web — como se fosse um arquivo mp3.

Agora, assim como a tag de vídeo, existem duas formas diferentes de se fazer isso.

• Usar uma tag única representando o elemento inteiro.
• Abrir e fechar tags com um elemento filho no meio.

Temos aqui uma tag de abertura e de fechamento. Então, adicionaremos o elemento source no meio.

A estrutura de pastas ficará assim:

|-- project    |-- audio      |-- sample.mp3      |-- sample.ogg    |-- css      |-- main.css      |-- normalize.css    index.html

O atributo controls não existe na tag <audio> no exemplo acima. O elemento <audio> não aparecerá no documento HTML.

Você pode ver que existem apenas algumas diferenças importantes aqui. O valor no atributo type mudou de "video/mp4" para “audio/mp3”. No atributo src, nós mudamos de um arquivo de vídeo com a extensão .mp4 para um arquivo de áudio com a extensão .mp3.

Assim como o elemento de vídeo, não poderemos realmente parar ou iniciar o áudio sem controles. Portanto, adicionaremos o atributo controls ao elemento de áudio.

Você também pode adicionar outros atributos à tag <audio> como autoplay, loop, etc.

Cobrimos aqui o essencial sobre os elementos video e audio no HTML.

Você pode ler mais sobre vídeo e áudio nos links abaixo:

• Documentação da web da MDN — Vídeo
• Documentação da web da MDN — Áudio

Espero que você tenha achado este artigo informativo e útil. Obrigado pela leitura!

O React.js é uma das bibliotecas do JavaScript mais utilizadas, que todo desenvolvedor de front-end deveria conhecer. Entender o que são props e state e qual a diferença entre eles é um grande passo para se aprender React.

Neste artigo, explicarei o que são props e state. Esclarecerei, também, algumas das perguntas mais frequentes sobre eles:

• O que são props?
• Como passar dados com props?
• O que é state?
• Como atualizar o state de um componente?
• O que acontece quando o state muda?
• Eu posso usar state em todos os componentes?
• Quais são as diferenças entre props e state?

Se você é um completo iniciante em React, eu tenho uma série de tutoriais (em inglês) sobre React para iniciantes.

O que são props?

Props é uma forma reduzida de dizer propriedades. Elas são usadas para passar dados entre componentes. O fluxo de dados do React entre componentes é unidirecional (somente do componente pai para o componente filho).

Como passar dados com props?

Aqui está um exemplo de como dados podem ser passados usando props:

class ComponentePai extends Component {    
    render() {    
        return (        
            <ComponenteFilho nome="Primeiro filho" />    
        );  
    }
}

const ComponenteFilho = (props) => {    
    return <p>{props.nome}</p>; 
};

Primeiramente, precisamos definir alguns dados do componente pai e atribui-los ao atributo props de um componente filho.

<ComponenteFilho nome="Primeiro filho" />

"nome" é a prop definida aqui e contém dados de texto. Então, podemos passar dados com props como se estivéssemos passando um argumento para uma função:

const ComponenteFilho = (props) => {  
  // seu código
};

Por fim, usamos a notação de ponto para acessar o dado da prop e renderizá-lo:

return <p>{props.nome}</p>;

Você também pode assistir meu vídeo (em inglês) para ver como usar props:

O que é state?

O React possui outro objeto interno especial chamado state (em português, estado), que permite que componentes criem e gerenciem seus próprios dados. Então diferente das props, componentes não podem passar dados com state, mas podem criá-los e gerenciá-los internamente.

Aqui está um exemplo de como usar state:

class Test extends React.Component {    
    constructor() {    
        this.state = {      
            id: 1,      
            nome: "test"    
        };  
    }    
    
    render() {    
        return (      
            <div>        
              <p>{this.state.id}</p>        
              <p>{this.state.nome}</p>      
            </div>    
        );  
    }
}

Como atualizar o state de um componente?

O state não deve ser modificado diretamente, mas pode ser modificado com um método especial chamadao setState().

this.state.id = "2023"; // errado

this.setState({         // certo  
    id: "2023"
});

O que acontece quando o state muda?

Por que temos que usar o setState()? Por que precisamos do objeto state? Se você está se perguntando isso, não se preocupe – você entenderá em breve o uso do state. 🙂 Vamos responder essas perguntas.

Uma mudança no state acontece baseada no input do usuário, acionando um evento ou assim por diante. Além disso, componentes do React (com state) são renderizados com base nos dados do state. Ele detém as informações iniciais.

Então, quando o state muda, o React é notificado imediatamente e atualiza o DOM – não todo o DOM, somente o DOM do componente com o state atualizado. Essa é uma das razões pelas quais o React é tão rápido.

Como o React é notificado? Você adivinhou: com setState(). O método setState() aciona o processo de renderização para atualização das partes. O React é notificado, identifica qual parte alterar e faz isso rapidamente sem renderizar todo o DOM novamente.

Em resumo, há 2 pontos importantes que precisamos saber ao usarmos o state:

• O state não deve ser modificado diretamente – setState() deve ser usado para isso
• O uso do state afeta o desempenho da sua aplicação. Portanto, não deve ser usado desnecessariamente.

Posso usar state em todos os componentes?

Outra coisa que você pode estar se perguntando sobre o uso do state é onde exatamente podemos usá-lo. No início, states só podiam ser usados em componentes de classe, não em componentes funcionais.

Esse é o motivo pelo qual componentes funcionais também eram conhecidos como stateless components (em português, componentes sem estado). Entretanto, depois da introdução dos React Hooks, os states podem ser usados agora em componentes de classe e funcionais.

Se o seu projeto não está usando React Hooks, você só pode usar state em componentes de classe.

Qual a diferença entre props e state?

Vamos recapitular e ver as principais diferenças entre props e state:

• Componentes recebem dados de fora com props, podendo criar e gerenciar seus próprios dados com state
• Props são usadas ​​para passar dados, enquanto state serve para gerenciar dados
• Dados de props são somente leitura e não podem ser modificados por um componente que os está recebendo de fora
• Os dados de state podem ser modificados por seu próprio componente, mas são privados (não podem ser acessados ​​de fora)
• Props só podem ser passadas do componente pai para o filho (fluxo unidirecional)
• A modificação do state deve acontecer com o uso do método setState ()

Espero que este artigo tenha ajudado você a entender props e state. Existem outras coisas importantes para se ver sobre React, Eu continuarei escrevendo sobre elas nos meus próximos artigos.

Se você quer aprender mais sobre desenvolvimento para a web, sinta-se à vontade para seguir o autor no YouTube!

Obrigado pela leitura!