Reagir fundamentos - construa sites maravilhosamente rápidos

1. Introdução: Oi, todo mundo. Meu nome é Andrea. Eu sou um desenvolvedor auto-dito, o que significa que eu aprendi a codificar com recurso on-line é como este curso de escultura. No momento eu estou trabalhando como um desenvolvedor de pilha completa no Aigoo Cloud Framework cuja interface Web é construída com adivinhe o que reagir neste curso, você vai saber o básico fora do reator o suficiente para entender a maioria fora do código cotidiano e até mesmo criar aplicativos complexos de uma única página. Os conceitos cobertos maquiagem por cerca de 90% fora do meu casaco, eo único conhecimento anterior vai precisar para seguir o curso é uma compreensão básica fora JavaScript. Então você está pronto para ir no final do curso. Vou deixar você com um projeto de classe para sujar as mãos do código. E esses são alguns links para aprofundar seu conhecimento. Vemo-nos na aula. 2. Configurando o projeto: A primeira coisa que precisamos fazer para montar um projeto Loria é instalar o não gênio. Para fazer isso, basta ir para conhecer o GS que são barra e barra de download. Aqui vamos encontrar os instaladores para várias plataformas e também instruções. Token store não Js por um gerenciador de pacotes se você preferir a Este. Então, depois de ter instalado o Noja, sim, podemos usar o Create React Up Toe para configurar todo o nosso site do reator. Então, basta digitar seu terminal favorito e o X três ajuda Riak No, seguido pelo nome. Nós não estávamos dando o seu apoio. Reagir noções básicas que entrar e criador de capital configurar a coisa toda para você. Nós podemos apenas cidade para a pasta que o criador agir até criado eo tipo Pentiums coração ou início fio. Se você usar fio, isso irá executar o servidor de desenvolvimento, que irá atualizar o aplicativo reagir em tempo real enquanto nós revestimento. Então, toda vez que você salvar um arquivo, a página será atualizada sem você ter que telas Irã ou ir qualquer coisa. Basta abrir a coluna 3000 local de Austin e você verá seu, uh, lado como está no frio. Agora vamos dar uma olhada nos arquivos que criam realmente top criado. Sim, a pasta pública. Nós temos o índice de falta html. Algo é o HTML. Scalia tum fora da nossa aplicação. Você raramente terá que editar este arquivo. A única parte útil é a tag de título, que você pode adicioná-la para alterar o nome do seu site no navegador, por exemplo, reagir aos médicos. Eu também notei a tag desenvolvida com rota idéia. É muito importante renderizar a página de reação, então não exclua isso. Eu mostro-te mais tarde onde vamos usá-la. O ponto de índice Js rastejou na pasta de origem importa algumas bibliotecas que são reagir e reagir estúpido reagir que define a página ou como um DOMA reativo renderiza a página. Em seguida, temos estes importação em que começa CSS. Podemos excluir esta linha porque não vamos usar o índice do arquivo CSS. Então fomos colocados a partir de, uh, vamos ver mais tarde o arquivo. Em seguida, temos que importar o operador de serviço de registro, o que é útil para capacidades off-line para a nossa aplicação. A linha crucial é reagir na rendição. Ele processa o script para cima no documento Não obter elemento por i d rota, que é o Dave com assim antes no índice dot html. E, finalmente, registrar o service worker simplesmente registra o service worker, qual foi a nossa capacidade de vôo? Queremos dizer o aspecto off-line de tomar isso como garantido. Finalmente, temos o arquivo mais importante, que é depois de Js. Ele define nossa estrutura de aplicativos reagir, mas vamos excluir tudo e construí-lo do zero. Então a primeira coisa que temos que fazer é importar Maria de três são graças a esta linha. Podemos usar que html como notação você Então, antes de então definimos uma função chamada que retorna, por exemplo, eles têm músicas Riak estava lá e nós exportar esta função. O que reagir vai fazer é tomar esta função executá-lo e a renderização O que é retorna no exemplo de servidor de página que escrevemos eles têm para que ele será aleatório que o 3. JSX: HTML em Javascript: Vamos ter um carro grande. Olhe para estes. HTML como sintaxe, que é chamado J s ex. Ele permite HTM A doméstico como em HTML normal, por exemplo. Aqui eu poderia esse parágrafo e depois dos parágrafos acima como e assim por diante e assim por diante. Além disso, você vê que eu salvei o arquivo, e se eu entrar na página, a página atualizada instantaneamente sem que eu tenha que atualizar qualquer script, você pode tentar fazer algo como sua Laura se Cem e eles pensaram ter mastigado nível superior bloqueia o html retornado pela função. Mas se tentarmos compilar isso, ele falha porque reagir quer dedo do pé tem apenas um top. Lello html, uh, alvo para contornar isso, podemos usar o reator. O fragmento Doug. Não é uma tag HTML, mas o que envolve nossas várias tags HTML e os renderiza exatamente como com o esperado. Então lembre-se que se você quiser ter muito ações retornadas, você usa reagir esse fragmento Onley se for o nível superior, você vê que neste Deaver temos duas tags diferentes o B e o fundo do ataque, e é completamente bom porque eles são em tempos de nível superior em J seis. Também podemos inserir algum código JavaScript. Para fazer isso, temos que usar os primeiros colchetes deste espaço dentro dos foguetes frios que podemos escrever JavaScript exatamente como teríamos em qualquer script. Por exemplo, podemos ver um mais renderização legal livre para apenas, como esperado. Ou podemos, por exemplo, usar uma concatenação de string, um, ir trabalhar. Podemos também saborear alguns j seis em uma variável, por exemplo. Contras bem-vindos equivale a que a abertura de boas-vindas. E então, para colocar esses trechos fora de Jess X em nosso Ritter, nós usamos os colchetes de canto porque colocar uma variável JavaScript entre colchetes com render seu conteúdo para que possamos fazer é eo que bem-vindo simplesmente cinco é um pouco que eu tenho o final é viável Um caso muito útil em que usamos JavaScript dentro do JSX é renderizar Gaullist, por exemplo. Digamos que temos é por favor contendo alguns números e queríamos renderizar é como uma polícia ordenada pela ONU . Então, em um HTML, nós usamos você bem. Além disso, você está por dentro. Temos fazer o certo e como eu cavei para cada fora das listas itens para fazer isso programaticamente podemos usar os colchetes, médico da polícia tomando cada elemento e mapeando também. Oh, eu sou elementos barra Eu me lembro que você tem que usar o mesmo eu para usar os colchetes para colocar o elemento dentro do menor item porque estamos retornando um valor sexual J. Então, mesmo que estejamos dentro desses colchetes maiores aqui abrimos outro contexto JSX. E então temos que usar esses pequenos colchetes. Cara, coloque o elemento dentro da lista. Se salvarmos isso, veremos que temos sempre com todos os itens que eu não tenho Nós não temos que mudar o código para mudar o átomo. Então, se eu mudei outra, é para cima. Está em JavaScript. A classe da ala é são reservados mundo porque nós usá-lo para definir classes. Jonah pegou cláusulas, então não podemos usar isso para definir o tipo de classe HTML off. Em vez disso, usamos o nome da classe e, em seguida, colocar o valor. Por exemplo, ABC exatamente como você faria com as tags HTML normais. E no seu arquivo CSS, você pode fazer dot ABC e o mundo está bem. Existem outros adereços HTML do reator que se comportam de forma diferente do que no html padrão, o primeiro dos quais é o estilo. Você está acostumado a estilo de ser uma string em HTML, mas em reagir é um objeto. Então, temos que abrir o contexto JavaScript com o lance os colchetes e, em seguida, definir um objeto com outro desligar colchetes atuais. Então você tem estes sintaxe de colchetes duplos. Então, simplesmente usamos o CSS Brock como uma chave. Por exemplo, canto e o valor serão o valor CSS. Por exemplo, vermelho acabou de salvar, e a cor é vermelha. Você também tem que ter cuidado porque a nomeação fora os adereços em React cai camelo mutação caso . Assim, por exemplo, a cor do chão é escrita chamada sobre com cor em maiúsculas. Por exemplo, última prop com um comportamento estranho está no clique, que é que ser uma string é função para que você possa simplesmente ser uma função e escrever o código para o que você quiser. Comida de simples. Um grande eu era e um clique. Aprendi que era rápido. Este adereços se comportam de forma diferente no sexo J, depois em html. Mas há também novos adereços que Jessica introduz, Por exemplo, o prop chave. Se você entrar no console host local, verá um aviso. Cada criança em um IRA ou um traidor deve ter uma chave única. O que isso significa é que quando mapeamos os elementos antigos para menos itens, criamos um R A. Off apenas objetos sexuais e o por razões de desempenho. React quer que demos uma chave, trouxemos alvejante, esvaziando-os. Podemos simplesmente usar o elemento como uma chave. Então, se dissermos que o aviso desapareceu 4. Estado do React: indo dinâmica: até agora, nós Onley criamos sites de estudo. É hora de ser dinâmico. A primeira coisa que temos a introduzir é um novo peso. Definir estrutura de ato Jerry em vez fora da função para cima grande close up. Então vamos começar importando componente da biblioteca do reator e, em seguida, redefinindo estes como uma classe. Então classe, huh estende componente. E então encontramos uma função maior que faz exatamente o mesmo que a função acima que encontramos antes. Então você pode me devolver valor sexual genial de simples olá e ele vai ficar rand erred em sua página. Então, qual é a diferença? Por que usar um clássico? Porque podemos usar o estado. Então, em um construtor que está envolvido quando suas páginas foram criadas pela primeira vez, podemos definir um estado. Por exemplo, podemos descobrir que meu nome é Andrea. O que podemos fazer com estes estados? Por exemplo? Colocar dentro do sexo DJ. Isso é nome de permanência? Nós temos Ah Olá sob você pode perguntar agora, então qual é a diferença de qualquer fora dos outros objetos de valor javascript E é que reagir manter atingido fora e mudou o estado E sempre que ele muda, reator esfria a função de renderização novamente alteramos o estado da página é atualizado . Cheyney State. Você pode, por exemplo. Você pode, Então o temporizador começou e nós funcionaremos. Mude o estádio depois de um segundo. Muda o estado. Você pode pensar que levou 18 inflexível. Estes que ficaram o nome porque outra pessoa. Mas não podemos fazer isso em reagir por razões de desempenho, e isso quebraria o funcionamento interno da biblioteca. Então é que usamos a função. Estes não definem o estado e passariam o novo estado. Então nomeie outra pessoa fama. E se você ir para a página e atualizá-lo, você vê como Andhra e depois de segundo a função é acionada, ele muda o estado de temos aproveitar a mudança e, em seguida, atualiza a página. Torne a página um pouco mais dinâmica. Nós enfileiramos isso um dia fora do estado como o on click off sobre possível botão mudar pessoa . Então nós apenas lidamos com isso desta vez, e em vez disso nós usamos o on com a gente. A função é que a Espanha e os novos Estados fora do nome, por exemplo. Agora, se abrirmos a página, essa é Helen Rapid 1000 mudança por conta própria. Mas quando podemos mudar de pessoa. Olá. Danos lá. Digamos que queremos criar um contador, senhor. Os aprendizes Blitz estão no estado. Vamos colocar essa variável contador que começa em zero, e então vamos sob ele na corrida da facção. Portanto, é um estado do trovão e também queremos um botão que pode aumentar o contador. Então bastão mais um e, em seguida, no clique no botão que passamos, a função aumenta o contador. Então este estado Saad e você pode pensar que é OK para estes lá em baixo acalmar estes não estado contador mais um. Mas por causa de como este é o estado definido é implementado. Índia Reagir Biblioteca Fazendo algo como estes poderia Lee para nace saquinhos de chá que podem sair como dias ou meses depois, tendo escrito o frio de colegianos em estados set porque este não é definido estado é uma operação c infame. Então, dois estados diferentes poderiam acontecer ao mesmo tempo e conflito em vez disso. O que fazemos é passar o Colback, que leva o estado antigo e o usa para construir os novos estados do contador de todos os estados mais um. Esta é a prova de bugs Você já volta, que leva o Estado Antigo e retorna o novo estado. Então vamos verificar incontáveis querem aqueles berlindes do ônibus eram obras. É a maior parte. 5. Componentes: Blocos de construção do React: Digamos que criamos isso, o que me dá as boas-vindas na árvore. Diferentes pontos fora do aplicativo. Se eu quiser mudar o bem-vindo como tal, eu tenho que digitar Olá, por exemplo, três vezes diferentes, o que não é idéia. Reagir. Claro, Total está a bordo problema resolvido. Podemos crear outra função assim como fizemos quando criamos a função de cima. Sabemos que a função de boas-vindas retorna é mensagem de boas-vindas e, em seguida, podemos usar a função como, um, cada componente TML. Então nós apenas colocá-lo como este Livre, diferentes pontos fora do aplicativo e ele funciona. Olá, debaixo de fora três vezes. Agora, se eu quiser mudar de volta para as boas-vindas, eu apenas escrevo no trabalhador e dou as boas vindas, nós tornamos muito mais eficiente escrever nosso código. Uma pequena coisa que você tem que prestar atenção é que a nomeação como dedo do pé sempre começar com uma letra maiúscula porque caso contrário erros do reator e Sita para um targa html padrão, por exemplo, diva começar através da letra do Lorca foi fora do curso. Bem-vindo com uma carta da África. Agora você pode dizer OK, mas e se eu quiser dar as boas vindas em vez disso? Eu tenho que criar outro componente que será uma perda de tempo e, claro, não, você não tem. Podemos nos adereços de boas-vindas, assim como passamos, por exemplo, estilo ou um no dedo do pé rápido um div. Neste caso, podemos dizer, por exemplo, por exemplo, morte bem-vindo conosco em um mês que está sob a função de boas-vindas recebe um objeto contendo todos os adereços passados a ele como um argumento. Claro, podemos usar os adereços para definir o J 6 que os termos. Então, por exemplo, deixa cair o nome agora novamente, bem-vindo e raro. Mas se eu mudar o 1º 1 para o RV que, por exemplo, se torna bem-vindo David it Então nós temos um componente mais genérico para boas-vindas aqui. Poderíamos também, por exemplo, criar o nome do norte que nos inicia desembrulhado. E então passamos o estado o nome e, em seguida, um fundo no clique e mudar o estado de que este não é sexo oito para outra chuva, por exemplo. Veja, eu, hum, mergulhando no fundo. E agora, quando eu clico no fundo, fico feliz que se torne bem-vindo. David, Lembre-se, pai, quando o estado muda, a função de renderização é executada novamente. Assim, a função de boas-vindas recebe os novos adereços e Rikers, o novo JSX. Nós também podemos criar componentes de estado cheio usando a classe dizendo, isto é, por exemplo, podemos criar um temporizador simples que tem um temporizador permanecido que começa em zero e, em seguida, é aumentado em um a cada segundo. Em seguida, podemos usar estes componente cabide na função ups em vez. Funciona a justiça. Fat fez. 12345, etc. Mas o que acontece quando eu clicar? Eu sou David A. A função Orender off the up está errada novamente. Então, bem-vindo recebe seus novos adereços e mostra Bem-vindo que estavam lá em vez de bem-vindo sob nosso Mas o que acontece toe o estado off timer Glink, Você disse que o número não obter o reset para jogar. Portanto, este estado também é conservado ao executar a função de renderização novamente. 6. renderização condicional: para mostrar ou não mostrar: Eu criei este muito simples que usa o nosso componente de boas-vindas. E então há um botão de log e logout. Gilligan define o nome declarado dedo do pé Andhra, enquanto os botões de vigia Esse é o nome ST No. E o estado padrão é não. Então, quando abrirmos a página pela primeira vez, recebemos uma recepção sem o nome e os Onley. Bem, de novo, temos o nosso nome. Gostaríamos de mostrar uma mensagem diferente, não a bem-vinda. Se o nome é não e podemos cavar é ah primeira maneira de fazer isso, simplesmente usando declaração falsa na função de renderização. Bem-vindo. Então, se o nome nojento não está bem, não. E podemos retornar nossa mensagem de boas-vindas padrão. Caso contrário, retornaremos. Você ainda não está logado. Então agora, quando ele abriu a página pela primeira vez nós temos a massa tal sem o nosso meu digitado errado Então com olhar e ser bem-vindo no monótono E então nós sopramos gota e nós recebemos a outra mensagem novamente. Mas há também outra maneira de fazer que podemos manter que fui bem-vindo como tal como antes. Podemos usar o operador comum que está no código fora da arte. Mas eu diria que estes que pagaram o nome não é igual a saber pergunta Mark seguiu-me o que queremos. O Rancor. Se a declaração de barras antes é verdadeira, então o estado de boas-vindas. Caso contrário, poderíamos chamar tal que um para renderizar se o estado é nariz. O resultado é apenas a mesma mensagem do começo novamente. Sair, entrar, olhar para fora. É simplesmente uma questão fora da estética e de caso para caso um vai se sentir melhor do que o outro. É importante que saibas usar os dois. 7. Como lidar com a entrada do usuário: Digamos que sabemos que deseja permitir que o usuário escolha seu Use-me para fazer isso. Precisamos de um usuário de permissão, certo? Oh, alguém está no dia? Eu posso escrever meu nome de juventude. Como lemos do reator? O que o usuário tem amarrado profunda maneira mais direta a isso é criar uma nova variável no St Paul, por exemplo, entrada, que se transformou como uma direita justa. E dizemos que o valor de entrada é o valor de entrada de estado. Então este estado o nome de entrada. Agora, se formos no Pentágono, também lutando se você tentar comprar no teclado nada acontece porque o valor de entrada é forçado a ser o mesmo nós o nome incluir no estado. Agora temos que lidar com as mudanças. Então, na mudança podemos nos função corporativa, assim como quando lidamos com o clique em chegar ao evento e você diz que é o estado e disse que a Bíblia em colocar comer que são obter valor, que é o valor que o usuário está tentando digitar. Agora, quando voltarmos e tentarmos morrer, mas podemos. Mas também temos o valor salvo no estado. Então, quando queremos olhar para dentro, nós simplesmente substituímos a string. Andhra, temos esse nome de entrada de oito, que é o que o usuário morreu. E também seria redefinir entrada, nome, fazer uma string vazia. Então agora eu posso, por exemplo, filho lá e de novo, e eu sou Lovin e então alguém que você procurou. 8. O fluxo de dados React: Eu criei uma versão ligeiramente modificada fora do log out up que vimos na última lição. Portanto, temos este componente bem-vindo que torna o bem-vindo já. Você não está logado na mensagem, em seguida, com o log former, que lida com toda a entrada, o on change e a parte inferior para pertencer e o log out. E, finalmente, temos o componente para cima que envolve o bem-vindo eo componente formulário procurando . O problema aqui é que bem-vindo precisa de um nome, mas o nome é armazenado no estado fora do registro para não fora do up. Então, como podemos passar o estado do primeiro para o reator? Nós não podemos nos adereços ou estado acima de um componente inferior como Logan formar um componente superior como cima. A única coisa que podemos fazer é reduzir o estado. Então, reconhecemos que o nome é um adereço necessário também por bem-vindo não só formulário de registro, isso colocamos no estado, são componentes. O nome está escrito? Não. Agora a questão se torna como atualizamos o estado fora do up quando a batalha está dentro, o formulário são clicados para fazer que nós passamos um teste de volta legal, por exemplo. Damos o nome me mudar e é uma função que leva um novo nome e executa estes o nome triste estado dois pontos novo nome. Em seguida, na forma local, podemos invocar essa função quando queremos datar para o nome para que possamos fazer essas culturas Mudar nome passando o novo nome que é, neste caso, estes que afirma que me importante Nós não precisamos toe atualizar o estado que no longo informar mais porque ele não será necessário E nós podemos fazer o mesmo para o botão de logout Simplesmente nós busto não como um novo nome. Agora o estado no up é atualizado invocando o objetivo voltar alterar nome de dentro Defour componente Então podemos simplesmente passar o norte que Teoh o componente de boas-vindas E agora começamos fora nós não logado. Mas eu posso fazer login e me tornar longo e não posso fazer meu logout. Estes levantando o estado para cima e, em seguida, passando callbacks para baixo é um piso que você vai usar o tempo todo no reator. Só está presente. 9. Crie e implemente o site: para publicar seu site online. Há dois passos principais que você tem que tomar. O primeiro é construir um otimizado a versão de implantação para que você simplesmente tem que pm, executar, construído ou se você usar yarn para baixo construir, vamos encontrar no site pasta grande pronto para implantação dos meus testes eu uso Sarge. É uma provocação muito simples que você acabou de digitar e a pesquisa ex Pergunta onde ele pode encontrar o site que você deseja publicar. Então você apenas a pasta de compilação e creeds domínio aleatório para você. Se você ir premium, você também pode escolher o domínio, em seguida, melhor e você implantar o site e ele está montando, por exemplo, Mine é Moti i ponto surto ponto Shh. Se soubermos que tenho Serge Sage, descobrimos que trabalho no site. 10. Projeto do curso: Assista toda a turma, então é sua vez de ligar agora. O projeto que eu lhe dou está construindo uma estante on-line que é, Você criará um site no qual os usuários podem adicionar os livros que eles leram ou eles querem ler e dar-lhes uma classificação. Vamos reduzi-lo. Você precisa mostrar a lista completa dos livros quando o usuário abrir a página e mostrar algumas informações extras. Quando ele clica em um deles, você precisa ter um formulário onde o usuário não pode. O livro e cada livro deve ter um título e mais eu quero ler ou Red Tuck e, em seguida, classificação opcional. Finalmente, você deve armazenar os livros localmente. Ou seja, se eu usuário adicionar um livro, em seguida, fecha a página quando ele abrir o site novamente, o livro ainda deve estar lá. Este último pedido provavelmente assustou-te um pouco porque não te ensinei a fazer isso. Mas a questão é que na codificação da vida rial, você nunca sabe tudo sobre o que você tem que fazer. É uma habilidade crucial ser capaz de aprender e encontrar na Internet recursos sobre o seu barril . Não se preocupe com isso uma vez eu vou te dar uma dica. Então a primeira coisa que eu sugiro que você faça é armazenar os dados do livro em Jason que estão em objeto em seu estado. E segundo, para salvar dados localmente no telefone ou PC do usuário, você pode usar o armazenamento local JavaScript A B I. Você pode aprender mais sobre isso no mdn. Nós e, finalmente, você pode ver os dados sobre o livro no armazenamento local usando J Zune ponto string. Se eu e recuperar ET usando Jason o passe que foi tudo que eu lhe desejo boa sorte e eles esperam ver muitos fora de seus bons projetos, Zoom.