Tutorial do React Intermediate: 3 etapas

2024 Autor: John Day | [email protected]. Última modificação: 2024-01-30 11:36

Tutorial do React Intermediate

Veja o produto acabado aqui.

O que você vai aprender?

Você criará uma lista de tarefas simples com React.js e aprenderá sobre as partes mais complicadas do react. Os pré-requisitos (altamente recomendados) concluem o guia de introdução react.js. Um conhecimento de HTMLAn conhecimento de comandos shell CSSBasic Conhecimento recente em JavaScript

Suprimentos

Todo o software será abordado no tutorial.

Você precisará de um computador com o seguinte software instalado:

• npm / yarn
• Um IDE que suporta js
• Um navegador da web

Etapa 1: Tutorial de reação intermediária

Começando

Por que React.js?

Com React.js, o objetivo é reutilizar o código. Por exemplo, digamos que você tenha uma barra de navegação com 100 páginas. Se você precisa adicionar uma nova página, então você precisa mudar a barra de navegação em todas as páginas, o que significa que você tem que fazer a mesma coisa para 100 páginas. Mesmo com macros, isso se torna muito tedioso.

Instalando Software / Pacotes Requeridos

Você vai precisar de:

npm / yarn

Como instalar:

1. Vá e instale o LTS de Node.js mais recente
2. OPCIONAL: se você preferir yarn como seu gerenciador de pacotes, instale yarn digitando em powershell npm install -g yarn
3. Abra o powershell / cmd.exe
4. Navegue até o diretório em que deseja criar seu projeto
5. Digite npx create-react-app.

Você concluiu a fase de configuração. para testá-lo, abra o PowerShell, navegue até o diretório do seu projeto e digite npm start. você deve obter uma página da web carregada em seu navegador padrão.

Etapa 2: Etapa 1: primeiros passos

Para começar, exclua os seguintes arquivos do diretório / src:

• App.test.js
• index.css
• logo.svg
• serviceWorker.js
• setupTests.js

Não precisamos desses arquivos.

Também vamos organizar nosso sistema de arquivos. Crie esses diretórios em / src /:

• js
• css

coloque App.js no diretório js e App.css no diretório css.

A seguir, vamos reorganizar as dependências.

em index.js, remova as importações de serviceWorker e index.css. Exclua serviceWorker.register (). Roteie novamente os caminhos para o aplicativo.

no App.js, remova a importação para logo.svg, pois não precisamos mais dele. Redirecionar App.css. exclua a função App () e exporte para App.

No React, temos 2 maneiras de definir elementos. Temos funções e classes. funções são para itens menos complicados e classes geralmente são para componentes mais complicados. Como uma lista de tarefas é mais complicada do que um monte de HTML, usaremos a sintaxe de classe.

Adicione isto ao seu código:

pastebin.com/nGXeCpaH

o html irá dentro de 2 divs.

vamos definir o elemento.

pastebin.com/amjd0jnb

observe como definimos valor no estado. Vamos precisar disso mais tarde.

na função de renderização, substitua hi por {this.state.value}

estamos processando o valor transmitido do estado que definimos.

então vamos testar!

na função de renderização do App, substitua-o por:

pastebin.com/aGLX4jVE

ele deve exibir um valor: "teste".

vamos ver se podemos renderizar várias tarefas!

em vez de fazer com que o React renderize apenas um elemento, podemos criar um array de e dizer reagir para renderizar o array.

altere a função de renderização para esta:

pastebin.com/05nqsw71

isso deve renderizar 10 tarefas diferentes. Observe como adicionamos chaves. Essas chaves são usadas como identificadores para reagir e nós, caso precisemos delas.

Agora que nossa lista de tarefas está funcionando, encontramos uma maneira de carregar as tarefas. É aqui que entra o nosso estado.

vamos adicionar um construtor ao nosso.

pastebin.com/9jHAz2AS

Neste construtor, movemos o taskArray da função render para o estado. exclua o taskArray e o loop for na função render. mude o taskArray no div para this.state.taskArray.

Agora, seu código App.js deve ser parecido com este:

pastebin.com/1iNtUnE6

Etapa 3: Adicionando uma maneira de adicionar e remover objetos

Vamos adicionar uma maneira de adicionar e remover objetos. Vamos planejar.

O que nós precisamos?

• Uma maneira de o usuário adicionar objetos
• Um lugar para guardar objetos
• Uma forma de recuperar os objetos

O que vamos usar?

• Um elemento
• A API localstorage com JSON

Vamos começar com o elemento de entrada.

abaixo de {this.state.taskArray}, adicione uma entrada e um botão ao seu código

Adicionar

Deve haver uma entrada de texto e botão Adicionar agora.

Ele não faz nada agora, então vamos adicionar 6 métodos ao nosso método de aplicativo.

Precisamos de um método para quando o botão é clicado e também quando alguém digita a entrada. Também precisamos de uma maneira de gerar o array de tarefas, bem como salvar, carregar e remover tarefas.

vamos adicionar estes 6 métodos:

buttonClick ()

inputTyped (evt)

generateTaskArray ()

saveTasks (tarefas)

getTasks ()

removeTask (id)

vamos também adicionar esta variável ao nosso estado:

entrada

Também precisamos vincular nossas funções a isso.

pastebin.com/syx465hD

Vamos começar a adicionar funcionalidades.

adicione 2 atributos assim:

isso faz com que, quando o usuário digitar qualquer coisa na entrada, ele execute a função.

adicione um atributo onClick ao Adicionar, como:

Adicionar

quando o usuário clica no botão, a função é executada.

agora que a parte do html está concluída, vamos continuar com a funcionalidade.

Já escrevi previamente a interface da API localStorage, então substitua as funções saveTasks, getTasks e removeTask por isto:

pastebin.com/G02cMPbi

vamos começar com a função inputTyped.

quando o usuário digita, precisamos alterar o valor interno da entrada.

vamos fazer isso usando a função setState fornecida com react.

this.setState ({input: evt.target.value});

dessa forma, podemos obter o valor da entrada.

uma vez feito isso, podemos trabalhar na função buttonClick.

precisamos adicionar uma tarefa à lista de tarefas. primeiro obtemos a lista de tarefas de localStorage, editamos e depois a salvamos. Em seguida, chamamos um rerender da taskList para atualizá-la.

var taskList = this.getTasks ();

taskList.tasks.push (this.state.input);

this.saveTasks (taskList);

this.generateTaskArray ();

obtemos as tarefas, colocamos o valor de entrada nas tarefas e depois o salvamos. Em seguida, geramos a matriz de tarefas.

agora, vamos trabalhar na função generateTaskArray ().

nós precisamos:

• obter tarefas
• crie uma série de componentes de tarefas
• passar os componentes da tarefa para renderizar

podemos obter as tarefas e armazená-las em uma variável com getTasks ()

var tasks = getTasks (). tasks

então precisamos criar um array e preenchê-lo.

pastebin.com/9gNXvNWe

Deve estar funcionando agora.

CÓDIGO FONTE:

github.com/bluninja1234/todo_list_instructables

IDEIAS EXTRA:

Função de remoção (muito simples, adicione um onclick e exclua usando removeTask do índice de chave)

CSS (também simples, escreva o seu próprio ou use bootstrap)