[ad_1]
Se você quiser aprender o básico do React no tempo que leva para tomar uma xícara de café, este post é para você.
Este artigo tem como objetivo fornecer uma introdução para o React, para iniciantes, sobre o que é e por que precisamos dela. Pressupõe que você tenha alguma compreensão de JavaScript básico.
Discutiremos alguns de seus conceitos básicos e abordaremos o que você pode criar com o React.
Também discutiremos algum código, mas o objetivo geral é obter uma compreensão intuitiva do que é o React, para que você se familiarize com o básico.
O que é React?
Desenvolvido pelo Facebook em 2011, o React se tornou rapidamente uma das bibliotecas JavaScript mais usadas. De acordo com HackerRank, 30% dos empregadores procuram desenvolvedores que conhecem o React, mas apenas cerca da metade dos candidatos realmente possui o conhecimento necessário.
Claramente, a React está em alta demanda no mercado de trabalho.
Então, o que exatamente é React?
O React é uma biblioteca JavaScript eficiente e flexível para a construção de interfaces com o usuário (ele mesmo escrito usando JavaScript). Ele divide as UIs complexas na forma de um código pequeno e isolado chamado “componentes”. Ao usar esses componentes, o React se preocupa apenas com o que você vê na primeira página de um site.
Os componentes são independentes e reutilizáveis. Eles podem ser funções ou classes Javascript. De qualquer forma, os dois retornam um pedaço de código que representa parte de uma página da web.
Aqui está um exemplo de um componente de função que renderiza um
elemento na página:
function Name() {
return Hi, my name is Joe!
;}E aqui está um componente de classe fazendo a mesma renderização:
class Person extends React.Component { render() { return Hi again from Joe!
; }}O uso de um componente de classe exige um pouco mais de esforço, pois você precisa estender o React.Component (parte da biblioteca React) enquanto um componente da função é na maioria JavaScript simples. Entretanto, os componentes de classe fornecem certas funcionalidades críticas que os componentes de função não possuem (consulte Componentes funcionais vs classe em React)
Você deve ter notado que há uma estranha mistura de HTML e JavaScript dentro de cada componente. O React realmente usa uma linguagem chamada JSX que permite que o HTML seja misturado ao Javascript.
Não apenas você pode usar JSX para retornar elementos HTML predefinidos, mas também pode criar seus próprios. Por exemplo, em vez de renderizar
elementos diretamente no componente de classe, você pode renderizar o componente funcional que retorna a mesma coisa:
class Person extends React.Component {
render() {
return Observe o fechamento automático ‘/>’ do componente.
O poder do React começa a se tornar mais evidente, como você pode imaginar renderizando muitos componentes simples para formar um mais complexo.
Para criar uma página, podemos chamar esses componentes em uma determinada ordem, usar os resultados que eles retornam e exibi-los ao usuário.
Por que escolher React Over Vanilla JavaScript?
Ser capaz de quebrar as interfaces de usuário complexas por meio do uso de componentes obviamente dá ao React uma vantagem sobre o JavaScript convencional (JS simples, sem bibliotecas ou estruturas externas), mas o que mais o React pode fazer que o coloca em tão alta demanda entre os empregadores?
Vamos dar uma olhada nas diferenças entre como o React e o vanilla JS lidam com as coisas.
Na seção anterior, discutimos como o React usa componentes para renderizar UIs. Não nos aprofundamos no que estava acontecendo no lado HTML das coisas. Pode ser surpreendente saber que o código HTML associado ao React é realmente simples:
Geralmente é apenas um
O Vanilla JS, por outro lado, define a interface do usuário inicial diretamente no HTML.
Além disso, o vanilla JS cuida da funcionalidade, enquanto o HTML cuida da exibição do conteúdo (marcação).
Nos primeiros dias da Web, a separação de funcionalidade e marcação parecia lógica, pois os aplicativos eram mais simples. No entanto, à medida que a complexidade aumentava, aumentavam as dores de cabeça de manter grandes partes do código JS.
O código JS que atualiza um pedaço de HTML pode se espalhar por vários arquivos, e os desenvolvedores podem ter dificuldade em acompanhar a origem do código. Eles precisam manter as coisas em mente de todas as interações entre o código que reside em arquivos diferentes.
React classifica o código em componentes, onde cada componente mantém todo o código necessário para exibir e atualizar a interface do usuário.
A atualização da interface do usuário requer atualização do DOM ou modelo de objeto de documento (consulte Manipulação DOM usando JavaScript) É aqui que o React realmente brilha.
Se você deseja acessar o DOM no vanilla JS, é necessário primeiro encontrá-lo antes que ele possa ser usado. O React armazena os dados em variáveis JS regulares e mantém seus próprios virtual DOM.
Se você deseja atualizar o DOM no JS vanilla, você deve localizar o nó apropriado e anexar ou remover manualmente os elementos. O React atualiza automaticamente a interface do usuário com base no estado do aplicativo, que discutiremos em mais detalhes na próxima seção.
Portanto, a principal razão pela qual queremos usar o React over vanilla JS pode ser resumida em uma palavra: simplicidade.
Com o vanilla JS, é fácil se perder em um labirinto de pesquisas e atualizações do DOM. A reação obriga a decompor seu aplicativo em componentes que produzem código mais sustentável.
Assim, para aplicativos complexos, você definitivamente desejará aprender o React.
Conceitos básicos de reação
Já discutimos como o React usa componentes para decompor UIs e JSX complexos para renderizar esses componentes.
Nesta seção, falaremos sobre alguns conceitos mais fundamentais do React.
Estado
Como mencionado anteriormente, o React atualiza a interface do usuário com base no estado do aplicativo. Esse estado é realmente armazenado como uma propriedade de um componente da classe React:
class Counter extends React.Component { state = { value: 0 };}Suponha que tenhamos um contador e 2 botões que aumentam ou diminuem. O valor do contador é renderizado na página por meio do JSX.
O valor do contador de exibição é baseado no estado e alteramos o estado clicando em um dos botões. O Vanilla JS trata um clique no botão como um evento e o React também. Quando esse evento ocorre, chamaremos funções que aumentam ou diminuem o contador com base no botão clicado. Essas funções possuem o código que altera o estado do componente.
Aqui está um exemplo desse contador:
class Counter extends React.Component { state = { value: 0 };handleIncrement= () => { this.setState(state => { value: state.value + 1 });};handleDecrement= () => { this.setState(state => { value: state.value - 1 });};render() { return ( {this.state.value}
);}};Atualizamos o estado chamando setState em cada uma das funções que manipulam um clique no botão. O contador exibido na página será atualizado em tempo real. Assim, o React recebe esse nome porque reage para indicar mudanças.
Em resumo, o React monitora automaticamente todos os estados dos componentes em busca de alterações e atualiza o DOM adequadamente.
Adereços
Podemos usar adereços (abreviação de “properties”) para permitir que os componentes conversem entre si.
Suponha que o contador no exemplo anterior represente a quantidade de um produto que um cliente deseja comprar. A loja deseja colocar um limite de 2 produtos comprados por cliente. Na finalização da compra, queremos exibir uma mensagem apropriada se o cliente tentar comprar mais de 2.
Veja como podemos fazer isso com adereços:
const Display = (props) => { let message; if(props.number>2){ message = ‘You’re limited to purchasing 2 max!’; }else{ message = ‘All’s good.’; } return( message
);};class Timer extends React.Component { state = { quantity: 0 } //...code for handling button clicking, updating state, etc. render(){ return( Criamos um componente funcional chamado Display e passar adereços como um parâmetro. Quando renderizamos esse componente, passamos para ele número como um atributo definido para a quantidade do produto que um cliente deseja comprar. Isso é semelhante à configuração de um atributo de uma tag HTML. Chamamos esse valor com props.number dentro Display para determinar qual mensagem retornar.
Ciclo de vida do componente
À medida que o React atualiza o DOM com base nos estados do componente, existem métodos especiais chamados métodos de ciclo de vida para fornecer oportunidades para executar ações em pontos específicos no ciclo de vida de um componente.
Eles permitem capturar componentes em um determinado momento para chamar as funções apropriadas. Esses momentos podem ocorrer antes da renderização dos componentes, da atualização, etc. Você pode explorar um métodos de ciclo de vida do componente.
Para ver os métodos do ciclo de vida em ação, confira este Pomodoro Clock Eu fiz.
O cronômetro do relógio é inicialmente definido para a duração da sessão. Quando o cronômetro da sessão é reduzido a zero, ele precisa mudar para a duração da pausa e começar a contagem regressiva a partir daí.
Como o timer é um componente, usei o método do ciclo de vida componentDidUpdate dentro do meu componente de classe principal para lidar com quaisquer alterações com handleChange():
componentDidUpdate() { this.handleChange();}Você pode pensar nos métodos do ciclo de vida como adicionar ouvintes de eventos no vanilla JS a um componente React.
O que você pode criar com o React?
Então agora você tem um entendimento básico do React, o que você pode construir com ele?
Já mencionamos no início deste post que o Facebook desenvolveu o React em 2011; portanto, naturalmente, a plataforma do Facebook é baseada no React. Outros aplicativos famosos que usam total ou parcialmente o React incluem Instagram, Netflix e Whatsapp.
Mas, como iniciantes do React, não queremos criar imediatamente o próximo Facebook, então aqui está uma lista de 10 idéias do projeto inicial do React para você codificar.
Se você quiser aprender mais sobre desenvolvimento web e conferir alguns exemplos de projetos React, para iniciantes, visite meu blog em 1000 Mile World.
Obrigado pela leitura e feliz codificação!
[ad_2]
Fonte
