Curioso para React? Aqui está uma maneira simples de entender o hype em torno de uma das bibliotecas JavaScript mais populares do mundo.
uitos anos atrás, o desenvolvimento web era simples. Você pode iniciar um editor de texto e criar um site parecido com este:
<html> <head> <title>Page</title> </head> <body> Welcome to my web page. </body></html>Não se preocupe – se você nunca programou antes e o acima exposto ainda parece intimidador, faça outra leitura. Você notará que as diferentes <tags>estruturas fornecem seu conteúdo. Algumas tags, como <title>, são especiais porque ajudam o navegador a entender que esse é o título da sua página.
Mas páginas da web simples e estáticas são inerentemente entediantes. Os humanos desejam interação e na Web, isso significa poder clicar nas coisas. Para resolver isso, algumas pessoas inteligentes da Netscape criaram o JavaScript , que acabou se tornando a linguagem de programação mais popular do mundo para sites. Mas essa é uma história totalmente diferente .
Tudo que você precisa saber é que o próprio JavaScript é bastante simples. Você usa uma <script>tag especial e escreve algumas linhas de código entre:
<html> <head> <title>Page</title> <script> alert("Hello!"); </script> </head> <body> Welcome to my web page. </body></html>Bem simples, certo? Mas este exemplo não é muito divertido, porque tudo o que faz é exibido quando você carrega a página. Isso não é interativo. Em vez disso, você deseja clicar em algo e, para isso, precisa de JavaScript para responder às ações que você executa na página.
É aí que entram as funções e os eventos. Uma função é uma maneira de nomear um bloco de código e um evento é algo que acontece com a sua página – como clicar, rolar, tocar etc. Nesse caso, queremos que o evento click execute uma função chamada sayHello (que acabamos de criar):
<html> <head> <title>Page</title> <script> function sayHello() { alert("Hello!"); } </script> </head> <body> <button onclick="sayHello()">Click Me!</button> </body></html>Parabéns, agora você é um desenvolvedor web! Com toda a seriedade, você acabou de aprender alguns dos elementos fundamentais do JavaScript. E é tão simples e divertido que qualquer pessoa pode buscá-lo. E se isso é verdade, então por que todo mundo acha que o React é tão difícil?
Obtenha o Framer X
Enter React
React é uma biblioteca JavaScript que facilita a criação de UIs interativas. Você pode achar isso difícil de acreditar, então vamos dividir. Aqui está o mesmo bloco de código que vimos antes, mas escrito em React:
import * as React from "react"; export function Page() { function sayHello() { alert("Hello!"); } return <button onClick={sayHello}>Click me</button>;}E é isso. Parece praticamente o mesmo de antes, apenas simplificado. Então, o que mudou exatamente?
- No React, você escreve seu HTML dentro do seu JavaScript (e não o contrário).
- Sua página agora também é uma função. Isso salva vidas e vou explicar o porquê abaixo.
- A
sayHellofunção é exatamente a mesma, mas você não precisa mais de uma tag! - Finalmente,
<button>ainda é o HTML normal que você conhece e ama.
Para que eu possa parar por aqui e deixar que você entenda que o React tem tudo a ver com menos tags e acelerar o seu fluxo de trabalho. Mas não é por isso que todo mundo está tão empolgado com a construção de coisas no React. Não se trata apenas de usar menos tags, é porque você pode criar suas próprias tags. E as tags que você cria no React são chamadas de componentes.
React componentes
Se você já se envolveu em web design, você já conhece e ama as marcas comuns, como div, p, span, etc. Para efeitos deste exercício, digamos que você está construindo um site navegação típico em HTML. Aqui está o que isso seria:
<div> <div><img src="image/Home.png"><span>Home</span></div> <div><img src="image/Help.png"><span>Help</span></div> <div><img src="image/Docs.png"><span>Docs</span></div> <div><img src="image/Mail.png"><span>Mail</span></div></div>Muito simples, mas como você pode ver, muito repetitivo. Para cada item de menu, você precisava escrever um monte inteiro do mesmo HTML, com ícones e títulos diferentes. Pior ainda, se você decidir mudar posteriormente a aparência de um item de menu, precisará copiar, colar e atualizá-lo para cada item.
Então, vamos tentar resolver isso como o pessoal de computadores inteligentes que somos. Imagine por um segundo que, além de todas as tags existentes, você possa criar novas. E se você tivesse essas superpotências, não organizaria seu cardápio dessa maneira?
<div> <MenuItem name="Home" /> <MenuItem name="Help" /> <MenuItem name="Docs" /> <MenuItem name="Mail" /></div>Muito mais agradável e limpo, para não mencionar mais eficiente. Você acabou de criar sua própria versão do HTML, um componente feito apenas para o site em que você está trabalhando. Você quase pode pensar em seus componentes como modelos minúsculos, perfeitamente integrados ao HTML por meio de tags.
Tenho certeza que você já adivinhou que é exatamente isso que o React permite que você faça. Vejamos a versão exata do exposto acima em React.
function MenuItem(props) { return ( <div> <img src={`image/${props.name}.png`} /> <span>{props.name}</span> </div> );} function Menu() { return ( <div> <MenuItem name="Home" /> <MenuItem name="Help" /> <MenuItem name="Docs" /> <MenuItem name="Mail" /> </div> );}Se você digitalizar isso rapidamente, deve parecer bastante direto, com apenas um pouco mais de elementos JavaScript-y, como função e retorno. Explicarei abaixo, mas geralmente você define o MenuItemprimeiro e, em seguida, usa-o quantas vezes quiser na Menutag HTML adequada. Muito legal, né? Agora vamos ampliar ainda mais isso.
Lembre-se do functionde cima? Funções são uma maneira de definir pequenos blocos de código em JavaScript com entrada e saída, bem como uma fórmula matemática. Você coloca alguns números e ele retorna outro número. Isso é exatamente o que returnfaz aqui também.
No exemplo acima, as funções não são usadas apenas para definir um trecho de código, mas também para nomeá-las. E esse nome é automaticamente transformado em uma tag pelo React, que você pode simplesmente usar em qualquer outra parte do seu projeto, exatamente como a MenuItemtag acima. Essencialmente, você pode pensar em um componente React como uma tag e uma função; todos os três são iguais. Vale a pena notar que isso fica mais complicado à medida que você mergulha mais fundo, mas, por enquanto, isso deve ajudá-lo a entender os princípios básicos.
A última parte é a entrada dos seus componentes. Nesse caso, esse é o nome do MenuItem. As entradas no React são chamadas adereços, uma abreviação de propriedades. Se você quiser usar o namesuporte, basta escrever props.nameda mesma forma que fizemos no exemplo. Você pode escolher qualquer nome que desejar e usar quantos você precisar. Para usar as entradas, você apenas definir a propriedade nome da marca como você faria para qualquer outra coisa em HTML: <MenuItem name="Home" />.
O que mais você pode fazer?
O céu é o limite, realmente. Apenas use sua imaginação e finja que você é o inventor do HTML, porque, de certa forma, você é. Agora você pode criar seu site inteiro (ou um aplicativo Web inteiro) que acaba assim:
<Page> <Navigation> <MenuItem name="Home" /> <MenuItem name="Help" /> </Navigation> <Hero> Welcome to our site!<Button>Download</Button> </Hero> <Grid type="horizontal"> <Feature>Cloud</Feature> <Feature>Tools</Feature> <Feature>Devices</Feature> </Grid> <Signup /></Page>Você pode transformar todos os seus componentes em um sistema, documentá-los e compartilhá-los com sua equipe, onde qualquer pessoa que conhece HTML possa usá-los. Se você alterar um único componente, todas as partes do seu projeto serão atualizadas automaticamente.
E, é claro, você pode estilizar seus componentes e torná-los interativos. Tudo o que você adicionar permanecerá contido no componente, portanto, ele sempre funciona, não importa onde você o use. Vou me aprofundar no estilo e no JavaScript em outro artigo, mas aqui está um exemplo simples e estilizado. Se você conhece CSS, deve ser fácil reconhecer as propriedades de estilo, embora o React use um estilo camelCase para elas.
function Button(props) { const buttonStyle = { padding: "12px 30px", backgroundColor: "#05F", borderRadius: 6 }; const buttonTextStyle = { color: "white" }; function sayHello() { alert(`Hello from ${props.title}`); } return ( <div style={buttonStyle} onClick={sayHello}> <span style={buttonTextStyle}>{props.title}</span> </div> );}React contra outras estruturas – é essa?
As estruturas JavaScript parecem aparecer e desaparecer tão rapidamente quanto os tipos de tênis modernos, enviando engenheiros para debates furiosos sobre qual é o melhor. Então, por que o React é diferente e mais importante, por que vale a pena aprender? Talvez você esteja pensando consigo mesmo – bem, não haverá outra coisa em alguns meses?
A resposta é considerar React além do escopo do JavaScript. Em vez de apenas outra estrutura, veja React como uma maneira de criar e, finalmente, pensar. O React permite dividir grandes projetos em pequenos componentes, que podem ser compostos, reutilizados e compartilhados, perfeitamente integrados à maneira como o HTML já funciona. Essa é sua verdadeira superpotência.
Interessado em recursos React para designers?
Entre na lista para ser notificado quando lançarmos cursos completos, tutoriais e artigos relacionados ao Framer X.Se inscrever
React é apenas uma implementação dessa idéia e é sem dúvida a mais popular. Existem muitas outras variantes, como Vue , Angular , etc., mas todas convergem para esse mesmo modo estruturado de pensar. Depois de dominar o React, não é tão difícil explorar as diferenças sutis, mas inteligentes, entre as diferentes estruturas e escolher a que funciona melhor para você.
Para voltar, muitas pessoas percebem que o React é difícil principalmente por causa de sua flexibilidade. Há muito o que fazer, muitas camadas, complementos e alternativas que fazem com que pareça mais difícil do que realmente é. Mas, como espero demonstrei acima, o React é muito simples em sua essência. Se você está entusiasmado, confira a seção React em nossa página Tutoriais para obter alguns recursos para você começar.