React.js: fundamentos

Olá, meu nome é Tony e estou dentro. Essas lições vamos dar uma olhada. Em que consistem os componentes da classe, sua estrutura e ciclo de vida funções, adereços, gerenciamento e uso. Bem como gestão e uso do estado. Nesta lição, daremos uma olhada no que é um componente React, como eles são usados ​​e como podem ser úteis para nós na escrita uma aplicação rápida e eficiente com suavidade. Agora, um componente é um pedaço de. Código do lado do cliente que é muito semelhante a um padrão Função JavaScript com uma diferença distinta sendo que um componente sempre retornará HTML. Isso é obrigatório porque é uma peça visual que nosso usuário está vou ver e interagir. Ao construir um componente, é melhor estruturá-lo de forma maneira de que seja independente e não tenha nenhum interdependências em qualquer outra coisa no aplicativo. Isso significa que podemos usá-lo de forma independente em qualquer lugar que quisermos em nosso aplicativo sem criar consequências que vêm de explícita ou implícita dependências. Vamos dar uma olhada na aparência dos componentes do React. Vamos iniciar nosso aplicativo aqui executando um NPM start comando e nossa aplicação. Vai começar na porta 3000. Para esta porção. Fui em frente e criei os componentes antes hora de economizar. Gaste um pouco de tempo e apenas me observe digitar. Então, vamos inserir um componente de classe. Nossa interface e veja como fica. Você pode ver o que é isso. Basicamente um seletor de cores e quando mudamos nossa cor podemos ver isso em tempo real tudo é atualizado. A tela e o usuário podem vê-la no navegador. Nosso exemplo de classe é assim. Então. Todos os componentes da classe React estendem o componente React que é uma entidade criada e mantida pelo grupo React. Então, como tal, ele vem com certas funções de ciclo de vida disponível para isso. Veremos tudo isso mais tarde. Por enquanto estamos apenas dando uma olhada no que é um componente e familiarizando. Nós mesmos com sua natureza. Agora, esta função que você pode ver é a única função que é realmente necessário porque é isso que retornará o HTML ou a representação visual para. Nosso componente que é o usuário. Vai ver e interagir. Como mencionamos anteriormente. Agora vamos dar uma olhada no quê. Parece um componente funcional. Vamos colocá-lo em nosso aplicativo também. Podemos ver isso visualmente e. Funcionalmente não é diferente da nossa classe baseada componente. Parece, sente e funciona de uma forma completamente semelhante. Mas quando se trata de sua implementação. Isso varia bastante. Você pode ver que isso realmente não estende nada e Reagir não é realmente. Mencionado em qualquer lugar aqui, exceto no interior. Deste componente que utiliza algumas funções especiais que são distribuído pelo grupo React. Mas veremos isso mais tarde, vamos. Não se preocupe com isso também. Muito por enquanto, mas veremos. Isso, vemos que este é apenas um objeto JavaScript normal e aqui de. O curso é sua parte HTML, que é idêntica à nossa classe porção baseada. E é com isso que o usuário vê e interage. Mas como você pode ver, isso é um bom candidato para um componente porque ele passa. Outro dos nossos critérios que temos. Definido anteriormente é que é completamente independente e não depende de mais nada no aplicativo, o que significa que pode usá-lo sozinho em conjunto com outras coisas em qualquer outro lugar do aplicativo sem criar qualquer tipo de consequências indesejadas que vêm de dependências implícitas ou explícitas. Em nossa próxima lição, tomaremos. Uma olhada em como o JSX é diferente. Do HTML normal e como ele é usado no contexto de uma reação aplicativo. Obrigado por assistir.