Primeiros passos com o React.js

1. Introdução: Todo mundo. Eu sou Julian. Divirta-se com a inferência do olhar. Tenho andado livremente e desde o início do ano 2017 e agora fui contactado pelo sketcher que vem para fazer uma primeira aula online. E estou muito animada para mostrar meu progresso. Meu primeiro teste online seria com o Chase reagido. É uma boa estrutura para fazer a partir de 10 trabalhos. Veremos mais detalhadamente o que podemos fazer. A aula online conterá um projeto de classe como quase todos os outros cursos sobre compartilhamento de habilidades . E vamos fazer isso durante o curso. Se você seguir o curso, normalmente você deve ser capaz de concluir este projeto de classe sem erros. De qualquer forma, se você quiser me enviar seu projeto de classe realmente em criatura para fazê-lo para que eu possa tomar seus erros em talvez dar-lhe alguns pontos de melhoria ou algo assim, ele realmente vai fazer você se sentir como você tem progredido porque você teria feedback sobre o seu trabalho. E eu realmente, realmente gosto. Se ela estava de pé atrás de mim porque isso vai me mostrar que eu fiz um bom clube. Como podem ver, estou a usá-lo para dizer em seis membros da minha tripulação. Eles também têm o meu computador pessoal bem aqui. Eu não vou usá-lo para esta aula. Temos usado o Mac? Mas isto não é militar. Vou explicar-lhe tudo para começar a reagir. Espero que goste das escolas. Divirta-se. Caras continuam trabalhando. 2. O que é o React.js para o a: E quando chegamos a este bezerro prestes a re realmente o primeiro passo com três realmente reagiu por assassinato com criativo meu Facebook em 2013. Ele visa criar uma única página com aplicativos, e ele usa uma porta virtual, que faz com que se perguntem muito rápido que outra força de reage. Ele incentiva você a usar componente, que são muito simples. Pedaços todos os dias. Meu casaco usá-lo JSX como um modelo, insistente Michelle como dedo do pé complexo. Gwendolyn condição acabou de sair, e ele usa seu veterano. Então, o que aprendemos neste curso vamos ver como parar de trabalhar quando eu fui trabalhar para o reator inclui Mulch A S e P M e o Criador. No entanto, até então vamos ver integrar o nosso primeiro componente tornando básico renderizá-lo na página . Então trazemos o segundo componente, que será um botão. E quando estávamos no retorno o primeiro compartimento. Depois disso, aprendemos a se comunicar entre componentes. Mas você acha que as propriedades depois de se comunicar entre componentes para você, eu entendo como interagir dentro da empresa. Mas está no estado. E para terminar, realmente, realmente, você vê ajuda para dar uns amassos. Sinto-me mais bonita. Este curso também incluirá um projeto de classe que consistirá será como um simples corte de frango. Teremos que usar propriedades e estado, e você terá que enviar um casaco para mim para que eu possa cometê-lo. 3. Como configurar o ambiente: Todos nós vamos começar. A nossa verdadeira é classe. Primeiro de tudo, nós vamos até ele, então cada dois iria. Teremos de começar a nossa primeira reacção. Então, primeiro nós vamos não conhecer nenhuma cadeira em seu navegador da Web e cabeça dele um notório que funciona. Em seguida, vá para a seção de notas de massa boa para a banheira atual e o intelecto para responder perguntas apontando para a sua operação terça-feira. Mike isso. Seria a minha pergunta inicial. Você pode usar inclinações do instalador do Windows, binários. Eu não vou cobrir a instalação no Lenox porque os usuários UNIX devem ser capazes de insultar inventar fora agora que a área traseira não disse que eles vão abri-lo. Este pacote lançado em Notorious e NPM en PM em pacote de nota. Militares. Seria útil instalar outros pacotes como React, por exemplo, continue. Venha para novo, aceite a licença e, em seguida, acabou de terminar a instalação. Não confira nada. Ele será instalado e vamos trabalhar fora da caixa. O cheque. Se a sua instalação tiver sido bem sucedida Evident Terminal e tipo nó Dash V Isso dará . Talvez ele e eu colocar um pouco diferente do que este, mas deve ser pelo menos 8.9 ponto um. No momento da gravação, A divisão de vídeo da nota é 8.9 ponto um. Isso é um cheque. Se o NPM não é pensado que deveria, 5.5 ponto um talvez possa ser diferente agora. Eles vão inserir um muito conveniente para suas maçãs. Comece a nossa primeira reação. Isto ajudar-nos-á a ter um desenvolvimento que recupere. Primeiro carregamos CSS freeloading e vivemos com ele. Talvez um recuperado em outra classe. Como obter o seu primeiro um desenvolvimento próprio de sempre. Mas este é um tópico muito complicado, e vamos nos concentrar no mais importante por enquanto, o código no seu tipo de terminal NPM. Instale o Dashti em vez de globalmente para que você possa usá-lo. Outro regular virá e o nome dos pacotes criar reagir. Como você pode ver, o pacote foi conhecido localmente. Agora eu estou indo toe usá-lo criar reagir que o primeiro argumento deste comando será o nome do seu projeto para esquecê-los antes que eles vão digitar. Nosso primeiro projeto tem bean instalado. Eles provavelmente têm um diferente são colocados em mente porque eu instalei Young, que é um pacote diferente de nota de rodapé militar. Ele rasga você instalado pacotes fester. Não, vamos para a nossa diretoria Scotia, que é onde o projeto Por favor abra seu editor de código meu crédito ou é texto sublime olhando com qualquer coisa que você gosta? Eu me disse a escolha legal para reagir. Então, como você pode ver, há muitas coisas complicando neste diretório, mas vamos usá-lo de uma maneira simples por enquanto em seu terminal. Ou você pode digitar em PM run. Comece para curto estoque NPM, que faz a mesma coisa que você pode ver. Ele abre uma nova guia no meu navegador da Web porque o almoço é o desenvolvimento de sempre, mas também carrega a primeira página. Bem-vindo a reagir para começar ele SRC adulto sim e seguro para recarregar. Vamos ouvir a forma como os dois se abrem. Abdo muda. Você pode ver que é um pouco complicado, mas vamos tentar o desenvolvimento a partir daí. Não é algo assim. Mova a janela para ver o arquivo de efeitos. O meu irmão recarregou e a nossa encabeçou a vida dele. Eu não senti o caminho para mim mesmo. Tem 32 em si. A primeira parte de sua classe acabou. Vou levá-lo de volta no segundo ponto para começar a entender como reagir funciona. 4. Introdução com componentes: Pessoal, Pessoal, se estão a ver o vídeo, não deviam ter uma tradição concorrente de reactor Notorious a trabalhar. E então você deve saber que reagir O.J . funciona com componentes. Então, nesta escuta, vamos aprender e entender. Componente é basicamente algo que você teria que re usar e algo que você pode dividir em seu componente fazer para ter algo mais utilizável e mais testável desta forma. Para Rex competente, você não vai quebrar você em seu site. Se eles puderem exemplo de algo eu tenho eles. É os tipos de site de ou bish ainda era linguagem falar Como continuamos exemplo muito básico, esta barra verde aqui poderia ser chamado de cabeçalho, por exemplo, e é basicamente reagir componente e você clica nas torneiras. Ele abre novas páginas e atualizá-lo fazendo aqui o seu contínuo para isso. Então, basicamente, este é um componente, a coisa toda, o componente e até mesmo uma única letra. Um único mais tarde e caractere do componente. Os filtros aqui são componentes também. A coisa que você tem para Alistair é que os componentes não têm acesso a extra seu ambiente. Eles precisam se comunicar com finais ou até mesmo para encomendar componente. Veremos como funciona em outra lição. Então agora como esses eram componente de sinceridade ciente Componente é basicamente GSX em parte do código. Então vamos abrir o nosso Então agora temos o nosso pode negociar diretamente, o que foi criado anteriormente que abriu um diretório atrevido em dois, como um patraeus para que você possa vê-lo. É do outro lado? Basicamente, é seis perto, o que seria traduzido mais tarde em biscoito básico. Integrado estende componente e componente é reagir. Cruz. Ele basicamente tem tudo o que você precisa para usar seu componente. O método de renderização é o que mostrou o componente. Apresse-se para usar visual. Mande-o devolvido. Com medição, quais janelas? Tudo o que você precisa em seu componente. Então você usa GSX. É um pouco diferente do HTM são porque, como você pode ver, por exemplo, aqui nós não branco fechar. Ele chama tem melhor. Que nome próximo? Porque o cabeçalho dela onde nós com Cristo aterrissamos Porque o teclado fechar é com a palavra-chave em seu sexo, então precisamos que você precisa ter um atributo de nome de classe ah. Há uma lista off atributo que você precisa usar com reagir em vez de fora atributo regular. Ah, o que eu posso pensar, por exemplo, é ah html quatro. Para um rótulo como, por exemplo, rótulo html quatro qualquer do seu tempo t 80 você terá um mínimo completo sobre o que você pode usar como um tributo na documentação oficial reagir. Há um leste literalmente, mas você se acostuma. Além disso, se o seu servidor de desenvolvimento Web estiver configurado corretamente, nós realmente avisamos sobre o uso de nomes de atributo incorretos. Ok, então você está animado para vê-lo com uma facilidade de componente? Agora você sabe um pouco como funciona. Agora vamos criar nosso primeiro componente na próxima lição. Vejo-te mais tarde. Tchau. 5. Primeiro componente de o aplicativo: todos tratando dele que você está assistindo o vídeo que você deveria ter assistido além nossos primeiros passos com o reator. Sim, perto. E nesta classe vamos ver como fazer o nosso primeiro componente quando fazê-lo na página e vamos ver o que foi feito. O festival aqui eu tenho a minha janela de texto sublime com o nosso projeto aberto. Primeiro de tudo, você vai entrar em adultério. Sim, nós movemos tudo e para defender cantando indexado O J s. Então, primeiro lugar, no aplicativo, Thaci s que estão indo toe importar tudo o que precisamos para criar o nosso primeiro componente. Então vamos importar, reagir e componentes de reagir. A sintaxe aqui é equivalente a importar reagir. Agimos nesse componente. E, na verdade, eu poderia até mesmo branco reagir componente ponto diretamente. Bem, primeiras razões de simplicidade. Vamos importar componente no Singleton. Então vamos criar a nossa turma. Isso é chamado como é um apt ou cadeiras fechar se estende componente. Então isso é simples, Opie. Vamos estender. Estamos perto do componente. Então, se você se lembrar corretamente na parte anterior temos visto tem que se perguntar algo na página. Está no metal de renderização. Vamos criar um método de janela. Lembre-se, ele tem que devolver algum sexo compartilhado, algum tipo fora da dinâmica. HTML. Vamos criar um peso no tempo e estamos usando o pai é fazer um limpador de discos. Então, basicamente, vamos escrever um “H” simples. Harry Lee é o componente “Our Hello World”. Vamos salvar tudo agora que vamos acabar, Doutor Caos vai importar. Reaja mais uma vez, então somos importantes para nos questionar a partir do método do reator. Então eles vão fazer o Wender. Podemos você GSX aqui? Sim, e regular para renderizá-lo no documento. Obter elemento por 80 isso. Certo, então se fizermos com você não vê algo que seja para mim? O que se passa? Por que é diferente? Não está definido em lugar nenhum. Acabei de descobrir. Então esse é o tipo de virgem que vamos importar também. Importar da barra de transporte. Feliz com o quê? O que ela é embaladora saberá. É difícil fazer em que compartilha, Ok, Ok, então vamos tentar executar o nosso servidor Web de desenvolvimento e ver o que acontece, como geralmente preencher no meu navegador da Web. Vamos ver Sim, há um padrão de exportação nunca e trouxe para cima com não encontrado. Módulo para cima. Vamos ouvir esta hora e fazer algo como exportação padrão em digamos, Oh, Oh, eu recebo contêiner em menos um domínio. Um homem na verdade antes começou a criar ou elemento. Então, uma vez que não fez um elemento, vamos usar algo que eles vão usar. Holandês, esse corpo funciona. Ah, componente é questionado. Então, como você pode ver, nós criamos componente suas folhas em um único módulo. Che é modelo. Em seguida, temos importado este componente em nosso arquivo base. Então temos a data da janela na página. Você também poderia mulheres com esta linha e realmente escrever exportação classe padrão. Ele faz tentativa. Vês, funciona outra vez. Então agora criamos nosso primeiro componente. Em seguida, ouça, vamos criar o segundo componente, e então nós obtê-los para interagir uns com os outros 6. Comunicação de componentes (de acessórios) (props): Que todos tratem aqui e bem-vindos à parte quatro dos primeiros passos com o Reactor tão perto . Ela se lembra corretamente na terceira parte desta turma que temos que saber para criar nosso primeiro componente, e eu tenho 200 na página. Agora vamos ver como criar um segundo componente e fazê-lo interagir com o componente off up , como é o seu Vamos esperar que o nosso eTour enviado por SMS E depois dos comerciantes, tivemos duas estadias. Olá, mundo. Vamos apenas usar um Deve e vamos lutar aqui botão de importação de mas Favor Basic. Agora vamos usar o componente botão, que vamos criar em poucos momentos, assim como usamos componente apt em nossa luta base. Então, vamos “Botão Branco”. Vamos dizer que o rótulo esfria e o mundo, e vamos vestir a maré. Você tem que lembrar que no JSX, tags de recorte Moto são muito comumente usadas. Digamos que este arquivo agora. Se você se lembra, nós temos que criar nosso componente botão. Vamos criar uma nova luta. Chama-se isso. Mas, em seguida, a árvore é apenas como para o aplicativo confiante pode importar, exibindo novamente, e é criar o nosso custo esporte padrão Fechar extensões compartimento. Então eles vão para o branco. Wender, nós giramos e vai ser um botão HTML muito básico falar. -Melhor. Então, agora o que vamos esperar? Outro botão que ela se lembra Nós declaramos aqui, mas rotulá-lo rasteja. Palavras manipuladoras. Então, como vamos obter este trabalho, mas vai ter que usar as propriedades do ponto de reação Propriedade que reagem componente são obtidos na propriedade adereços da classe. Vamos extraí-la, Const. Esperanças são iguais a isso. Então ele vai usar adereços, mas pode fazer ainda melhor. Conselho capaz igual, pops diferentes. Vamos usar o rótulo nos adereços e agora vamos usá-lo assim. Isto vai escrever botão, em seguida, a nossa etiqueta e, em seguida, fechar gravata tibetana. Vamos ver como funciona. Aqui estamos nós. Temos um componente de botão. Você pode clicar nele. Isso não aconteceria nada. Richard, a Batalha. Agora você vai ver que podemos fazer quase qualquer coisa nos adereços. Vamos ver, vamos usar este recuo para ter muito limpo chamado igual. E agora o que você quer fazer em um rápido. Nós vamos para você a função. Digamos que este barco limpo e vamos declarar algo aqui. Algo é igual à função. Ponto da janela de função simples Alerta. Eu estava correto. Eles podem ter que usar fusão anônima aqui, mas nós vamos usar isso algo muito limpo. - Não. O que vamos fazer? Lembrem-se, podemos usar a defesa dos filhotes. Um clique, e agora eles vão dizer no rápido igualou um clique. Está bem. Como funciona. Um clique eu fui rápido. Este componente é conhecido andar e pode interagir com um componente presente. Talvez você possa fazer algo assim. Tem alguma coisa aqui. Digamos que, por exemplo, eu fui clicado. Além disso, vamos dizer que você não, olha, nós vamos fazer este ponto no clique 10 no ano um clique. Ele chama isso de que talvez no clique vamos dizer no clique hoje. Veja, você pode passar argumentos para qualquer função que você colocar nas propriedades. Então este o local de propriedade na próxima parte do estado como interagir com o próprio componente 7. Como usar o estado: Oi, todo mundo. Bem-vindo a cerca de cinco destes primeiro dia para três. Na verdade, está perto, se você se lembrar corretamente na etapa anterior, vimos como criar um segundo componente e dar-lhe para interagir sem primeiro componente. Agora vamos interagir com o próprio componente usando. O estado deve lembrar o vídeo de introdução corretamente, declarar enfaticamente um objeto que a reação observada para ganhar a coisa tudo o que precisa. Então, como vamos rapidamente propriedade? Vamos abrir o nosso Eu pensei que ela tinha disparado. O estado é declarado no construtor dos componentes. É uma constritora, talvez propriedades, e é chamado de super filhotes. Então, que re realmente inicializar as propriedades politicamente, um estado membro da classe é igual. E então nós temos um objeto passo que diferente infinito mostrar a partir de agora é a força. Ok, ter a criação de um membro do estado. Como é que a usamos? Agora lembre-se, é um pouco como adereços. É por isso que Const mostra Dave. Ele chama isso de estado Agora nós temos buscado horas. Mostrei um membro do estado. Como é que a usamos? Algo como este programa, Dave. E lá estou eu, o Show dos Veados. Oh, oi. Legal por isso. Normalmente não deve ser alugado. Amor lá. Como temos Data State? Agora eles vão até você. O set State Metal. Olhe para isso. Em vez de compartilhar o vamos, vamos atualizar torrado. Ela não salvou ST. E o primeiro perímetro é um objeto. Será o estado a ser atualizado. Então nós estamos indo encontro mostrado, se isso é bem verdade. Não, estamos vendo o estado de dados reativo e uma data apenas uma parte. Eles mostraram porque no estado para ser atualizado Só quero atualizar mostrou. Está bem, deixa. Agora vamos tentar chutar o botão. Ok. No fundo para mostrar uma altura. Mas se clicarmos de novo, ele roubou aqui? Eu queria me esconder. Eu faço isso basicamente falando o estado. Olha para isto. Se eu escrever, não disse que mostrou lá Ele poderia estar pensando que não vai mudar uma vez que ele sempre vai se encaixar o seu valor coisa, que é quarto no início. Mas se eu fizer isso, pegamos todo o estado agora no primeiro clique que é mostrado que eles podem clicar no Davis escondido, que é o que queremos agora. Eu só aproveito esta oportunidade para te mostrar algo com reagir. Você pode usar sempre para vento ou algo assim. Olha, aquele verme até o passo três. É um mapa escuro, Deb. E então nos perguntamos algo neste lugar bem aqui. O que um me pergunto o que janela, mas e top Cool. Agora podemos fazer alguma coisa. Pronto, cadela. Juros. Er banheira atual bem aqui. Por isso, declarámos um novo membro de um Estado. Coloque aqui. Morte atual. Não. E é o que está aqui para recuperá-lo. Legal. Agora, como interagimos com ele? Basicamente como um mas no clique. E vamos chamar isso de “Crianças “, Doug, hora que estou criando aqui em função anônima. O recorde, meu dito corrente admitiu. Isso foi criado, disse Smith. Corrente. Tab, o que estou fazendo? Estou fazendo a mesma coisa nos dois. Estou atualizando o estado. Olha, isso disse Estado atual Tad difícil. E agora estou atualizando sobre Lee a corrente. Aquele membro da coisa que eu não estou atualizando mostrou a você e com o programa Brookly David, não a corrente de namoro. Então vamos dar uma olhada. Uma palavra abaixo fez para mostrar ou esconder, e aqui que nada, porque você que até três quente. E se eu tivesse defecado? O primeiro é para você aqui como queríamos porque temos apenas um programa datado que o membro do estado não diminuiu o suficiente para conseguir por esta parte. Eu afirmei não durante a noite que vamos ver como criar algo um pouco mais interessante e torná-lo adequado oração aqui usando estilos C. 8. Como adicionar estilos de CSS: Ei, todos virão ao plástico na última parte deste reagir classe Js 1º 8 com reator. No entanto, na parte anterior não vimos nada para agir dentro da nossa própria componente. Agora vamos fazer com que ele se sinta mais bonito usando estilos CSS. Não, como você quer saber reagir permite que você crie belas educações. Mas agora os aplicativos parecem meio desligados. Sim, feio. Então, vamos adicionar CSS touch a ele. Mas como vamos? Veja a avaliação do reator. Não podemos usar uma pilha apertada dentro. Eu partilharia seis. Não é bonito. Na verdade, a maioria dos usuários reagem usam em estilos de luz. - Sim. Basic in light dice em vez de usar close é como normalmente você faria com HTML. Usamos principalmente tags inland start porque permite que você tenha mais controle sobre o que você começou. Faça isso agora mesmo. Ok, vamos criar um valor de estilo. Agora vamos dizer, como por exemplo, Tab, Tab, Esta será a barra superior em si. Como na cor. Eles vão dizer que não é ótimo. Alguns eleitores podem ser uma escolha, então eu vou usar preto. Ok, então agora como vamos usá-lo primeiro de tudo isso, Dave apertado. Este será o bar de cima. Agora vamos para onde começou, igual morre. Banheiras para ver este Brooke criaram sobre Taba que não gosta de cinza por terra um pixel preto borda. Podemos fazer um pouco mais no tribunal odontológico. Vamos dizer que começar chama estilo banheira singler porque seria uma única vez. Dê uma olhada nisso. Eu não posso. O Kohler. Vamos usar a borda cinza real um pixel exclusivamente preto novamente. Mas desta vez vamos dizer fronteira inferior zero. Você pode usar realmente qualquer coisa em CSS. Mas você só tem que usar cuidados de camelo em vez de caso de hífen. Como faço para usar algo como trabalhar ele transformar? Na verdade, você pode usar a transformação de armas assim. Ponha na rua. Então, como é agora a criação de uma nova parte CSS para torneiras? Legal. Você pode fazer talvez um pouco mais de margem. Zero despedida zero noites seria muito concentrado. Legal. Isso é um pouco demais comprimir nele. Isso é o que eu tenho. Passo frio. Agora temos uma banheira gelada. Estão bem aqui. Talvez você possa ter um pouco mais de enchimento aqui de novo. Coloque em 10 e não queremos acariciar. Outro fundo colocando zero. Legal. O que? A garrafa parece bem eficiente agora, não é? Parece vertical, e também podemos torná-lo um pouco melhor. Sim, temos uma guia atual no estado. Podemos usá-lo para adicionar mais estilo. Ok, então nós vamos criar uma nova entrada para um assunto CSS que é revestido comenta. Vai ter um saco amarelo na cor. Não é bonito, mas é para o exemplo. Então, se você se lembra corretamente, este é o garçom objeto ciumento mantido. Então, como criamos um novo objeto? Vamos usar a missão. Pensei no objeto. Fechar Objetado. Um sinal. Eu sou o sujeito Tyler Tab, e nós vamos dizer estilo, não guia atual. Ok, agora todas as torneiras têm as torneiras atuais mortas. Como podemos tomar esta corrente de usuário simples de propriedade que vêm do estado? Lembre-se, com a corrente de você, essas coisas então eu morri aquele objeto de script atual enquanto a esposa estava em uma cadeira vazia . Um objeto de script. Veja, agora nenhuma das nossas torneiras tem o tipo atual iniciado. Vamos chutar este olhar atual selecionado. Podemos fazer algo um pouco mais interessante. Como a cor azul, seu azul. Agora você sabe como criar um aplicativo de reação muito simples. Você acha que as propriedades estado e estilo CSS. Isto é tudo o que você precisa para criar um aplicativo muito simples. Agora vou criar outro curso um pouco mais avançado para reagir. Divirta-se bem. E não te esqueças de enviar-me o teu projecto da turma. Você vai encontrar uma descrição abaixo adeus.