Importações seguras e agrupamento inteligente para dependências

WMR permite importar pacotes npm com segurança sem instalação, com isso você pode importar um pacote npm sem executar npm install , que instalará dependências adicionais.

O WMR sai da caixa com a capacidade de agrupar suas dependências de npm sempre que você quiser e também armazena em cache seu histórico em sua máquina de construção.

Suporte para HTTP2

WMR vem embutido com suporte para HTTP2 nos modos de desenvolvimento e produção.

Suporte para plug-ins de Rollup

WMR fornece suporte para Plug-ins de rollup , mesmo quando não é usado no desenvolvimento.

Rollup é um empacotador de módulo para JavaScript que compila trechos de código para serem mais complexos, semelhantes a uma biblioteca.

Primeiros passos com WMR

Nesta seção, vamos construir um aplicativo de notas. Os usuários poderão escrever, visualizar e também excluir notas que escreveram.

Semelhante a uma série de estruturas SSR, o WMR nos permite construir nossos componentes e renderizá-los como páginas. Aproveitando isso, estaremos construindo nosso aplicativo como uma única página dentro de um diretório app e iremos renderizar o aplicativo no arquivo index.js do nosso projeto. Primeiro, vamos inicializar um novo projeto WMR usando o bloco de código abaixo.

Para inicializar um projeto usando WMR, primeiro você precisa instalar o pacote usando um gerenciador de pacotes.

Usando npm:

 npm init wmr wmr-notes-app

ou usando fio:

 yarn create wmr wmr-notes-app

O comando acima inicializa um projeto WMR vazio, no nosso caso, o primeiro comando cria um projeto WMR com wmr-notes-app como o nome do projeto, ele pode ser substituído por qualquer nome que você escolher usar. A seguir, vamos instalar um pacote para nossos ícones:

 npm i react-icons

O pacote acima será usado para adicionar ícones ao nosso aplicativo.

Em seguida, mude para o diretório do projeto e inicie o servidor de desenvolvimento executando:

 cd wmr-notes-app && npm start

O comando inicia um servidor em http://localhost: 8080 , se você abrir o endereço em sua máquina local, ele exibirá um site semelhante a este:

A seguir, vamos reestruturar a pasta do aplicativo para ficar assim:

Para fazer isso, nas public/pages , vamos excluir os seguintes arquivos e pastas, os diretórios home e about .

Esses arquivos são usados ​​principalmente para aplicativos que exigem uma página home e sobre . Feito isso, vamos começar a construir nosso aplicativo.

Construindo um aplicativo de notas

Começaremos criando uma nova pasta chamada app e dentro da pasta, criaremos um arquivo chamado index.js . Observe que o nome do arquivo pode ser o que você quiser, como você achar adequado.

A seguir, criamos um componente funcional chamado NoteApp com dois estados, um para criar uma nota e outro para exibir as notas atuais, o componente retornará um elemento h1 e um campo de entrada:

 import {useState} de'preact/hooks';
importar {FaTrash} de"react-icons/fa";
importar estilos de'./style.module.css'; função padrão de exportação NoteApp () { const [Notas, setNotes]=useState ([]); const [currNote, setcurrNote]=useState (''); Retorna (  
 Aplicativo WMR Note 
 
  
  )
}

No bloco de código acima, primeiro importamos o gancho useState de preact/hooks , também importamos nosso ícone para delete e nossos estilos do arquivo module.css .

Em nosso componente NoteApp , primeiro, usando o gancho React useState , inicializamos um valor inicial para nossas notas e outro estado para lidar com nossa nota atual, nosso aplicativo , por enquanto, retorna um elemento de cabeçalho e uma div para nosso campo de entrada. Antes de atualizar nosso navegador, vamos escrever o estilo como o incluímos em nossas tags seção e div :

.wmr_app { fundo: branco; altura: 100vh;
} @media (largura mínima: 768.11px) { .inputArea { cor preta; }
}

Adicionando notas

Nesta seção, escreveremos uma função que atuará como um backbone para adicionar notas ao nosso aplicativo, para isso inicializaremos uma função addNote que receberá um ID para nossas notas e defina-o como o estado de nosso aplicativo:

 const addNote=note_content=> { Notes.push ({ id: Notes.length, note: note_content }); setcurrNote (''); }

No código acima, inicializamos uma constante addNote que leva em nossas Notes e usando o método de array JavaScript nativo push , que recebe um ID e um parâmetro de nota para adicionar uma nova nota e defini-la como o estado atual de nosso aplicativo. O método push adiciona uma nova nota ao nosso array de notas e então retorna um novo comprimento do array. A seguir, escreveremos uma função para excluir notas de nosso aplicativo.

Exclusão e leitura de notas

Aqui, escreveremos uma função para excluir as notas que adicionamos ao nosso aplicativo, usaremos o método JavaScript nativo .filter para verificar se uma nota id é não é igual ao id da nota que queremos remover da matriz e, em seguida, retorna as novas notas na matriz, como este:

 const deleteNote=note_idx=> { const notes=Notes.filter (note=> note.id!==note_idx); setNotes (notas);
}

A seguir, escreveremos uma função para exibir nossas notas assim que forem adicionadas. Essa função também adicionará automaticamente um ícone de exclusão a cada nota assim que for adicionada à nossa lista de notas:

 const extractNotes=()=> ( Object.values ​​(Notes).map (note=> ( 
  deleteNote (note.id)}>   {note.note} 
 ) )

No bloco de código, inicializamos uma função extractNotes com o object.values ​​ método que retorna os valores de nosso array da mesma forma que é fornecido. Em seguida, mapeamos, retornando um li com um botão de exclusão e, em seguida, exibimos a nota retornada.

Para concluir isso, vamos adicionar estilos para nosso item de lista e nosso ícone de exclusão:

.noteItem { preenchimento: 16px; raio da borda: 3px; cor de fundo: # f2f9fb; box-shadow: 1px 1px 3px 1px #efefef; tamanho da fonte: 20px; largura máxima: 400px; margem: 10px automático;
}
.deleteIcon { preenchimento: 14px; cor de fundo: #eee; raio da borda: 3px; margem direita: 20px;
}

Se fizermos isso corretamente, nosso aplicativo deverá ser semelhante a este:

Aplicativo de notas finais

Para concluir nosso aplicativo, vamos terminar o último componente que renderiza nosso aplicativo, aqui terminaremos nosso campo de entrada e adicionaremos um botão para adicionar notas ao nosso aplicativo e, em seguida, renderizaremos as notas que adicionamos:

 return (  
 Aplicativo WMR Note 
 
  setcurrNote (e.currentTarget.value)} onKeyUp={e=> e.key=='Enter'? addNote (currNote): null} />  addNote (currNote)}> Adicionar  
 
 
 {extractNotes ()} 
 
  )
}

No bloco de código acima, estamos retornando um campo de entrada que leva em um evento onChange que define nossa nota atual para o valor de nosso campo de entrada. Também adicionamos um evento keypress que on key up adiciona o valor do nosso campo de entrada às nossas notas.

Em seguida, adicionamos um botão para inserir nossas notas em nosso aplicativo, depois disso, renderizamos as notas adicionadas. Para completar nosso aplicativo, vamos adicionar as propriedades CSS e, em seguida, mostrar a imagem de nosso aplicativo final:

.unstyled_list { estilo de lista: nenhum; preenchimento: 0;
} .notes_list_wrapper { raio da borda: 5px; preenchimento: 6px; largura máxima: 400px;
}
.botão { tamanho da fonte: 14px; borda: 1px sólido roxo; cor de fundo: palevioletrado; cor branca; raio da borda: 4px; preenchimento: 10px 34px; margem: 10px;
}
.button: hover { borda: 1px sólido roxo; cor de fundo: roxo;
}
@media (largura mínima: 768.11px) { .campo de entrada { borda: 1px azul sólido; preenchimento: 10px; tamanho da fonte: 21px; raio da borda: 4px; } .inputField: hover,.inputField: focus { esboço: nenhum! importante; sombra da caixa: nenhum! importante; borda: 1px verde sólido; }
}

Nosso aplicativo final deve ser parecido com isto:

Conclusão

Nesta postagem, aprendemos sobre o WMR, seus recursos e como usar o WMR para construir um aplicativo de notas, também vimos como usar o module.css para adicionar estilos ao nosso aplicativo. O código usado neste artigo pode ser encontrado em GitHub .

A postagem WMR: O canivete suíço para os aplicativos da web apareceram primeiro no LogRocket Blog .

Source link