Compartilhe esta publicação
BrazilJS
React: do básico ao avançado - Parte 4
React: do básico ao avançado - Parte 4
React é uma biblioteca JavaScript para desenvolvimento de interfaces de usuário.
Esta é a quarta parte de uma série de artigos que ensina a desenvolver e estruturar aplicações com JavaScript e React.
Clique aqui caso você ainda não tenha lido a terceira parte.
Na parte anterior, aprendemos o que React soluciona e como ele soluciona. Nesta parte, vamos falar sobre a propriedade children e como criar elementos.
A propriedade children
Todo componente possui um tipo (type) e, opcionalmente, propriedades.
Além das propriedades que as tags HTML possuem e as propriedades que criamos para nossos componentes customizados, existe uma propriedade especial chamada children.
Segue um exemplo:
const myAwesomeButton = { type: 'button', props: { children: 'Submit' } } // myAwesomeButton representa a seguinte estrutura HTML: <button>Submit</button> Como você pode ver neste exemplo, children representa o conteúdo da tag HTML button, ou seja, tudo que você passar para children, será interpretado como o conteúdo da tag HTML ou componente React: const myAwesomeDangerButton = { type: DangerButton, props: { children: 'Delete' } } // myAwesomeDangerButton representa a seguinte estrutura HTML: <DangerButton>Delete</DangerButton> No exemplo acima, DangerButton é um componente criado por nós, e o children dele é a string "Delete". O mais interessante, é que children funciona como qualquer outra propriedade, ou seja, além de strings, você pode passar numbers, booleans, objects, arrays, functions e um ou mais elementos (tags HTML ou componentes). Apesar de poder passar qualquer valor para children, no dia a dia é provável que você vá passar apenas strings, elementos e functions. Passar uma function para children é uma das funcionalidades mais poderosas do React. Vamos falar dela mais para frente. Aproveitando, a biblioteca que uso em todos meus projetos foi criada utilizando a funcionalidade de passar uma function para children. Vamos falar desta biblioteca posteriormente, porém, se você quiser apoiar um projeto brasileiro, deixe sua ⭐️ no GitHub do Smalldots. 🇧🇷 Criando elementos React.createElement() é a função utilizada para criar elementos no React. Até o momento, estávamos usando objetos para representar um elemento React e, de fato, esta representação está correta, porque de uma forma resumida, React.createElement() apenas retorna um objeto com type e props para nós. No entanto, para criar elementos no React você sempre deve utilizar a função React.createElement(), além de uma série de validações, ela registra o elemento no registro interno do React, assim as instâncias são gerenciadas automaticamente sem qualquer trabalho da nossa parte. Não existe qualquer outra forma de criar elementos no React, a única API disponível é React.createElement(), e isso é ótimo, porque temos uma API extremamente simples! 🎉 Nota: na verdade, existem duas outras formas de criar elementos, React.createFactory() e React.DOM.x() (x é o nome da tag que você quer criar. No entanto, o uso destas funções foram desencorajadas pelo time responsável pelo React e, provavelmente, serão deprecadas num futuro próximo. Por isso, não vamos falar delas. Caso você já conheça React, você pode argumentar que também podemos criar elementos com JSX. Isso é verdade, porém quando JSX é compilado para JavaScript, tudo será convertido para chamadas ao React.createElement(). // Com JSX, se você escrever: <p id="apple"> Pineapple </p> // Isso será convertido para: React.createElement('p', { id: 'apple' }, 'Pineapple') Vamos falar sobre JSX na próxima parte desta série. Utilizando React.createElement() Na segunda parte desta série, aprendemos a criar projetos React com a ferramenta Create React App. Caso você ainda não a tenha instalado, leia a segunda parte novamente para realizar a instalação. Crie um novo projeto: create-react-app superlab cd superlab npm start superlab será nosso laboratório de testes. Imagem retirada de http://breakingbad.wikia.com/wiki/Superlab Após a criação do projeto superlab finalizar e você rodar o comando npm start, abra o arquivo src/App.js. Remova a seguinte declaração: <p className="App-intro"> To get started, edit <code>src/App.js</code > and save to reload. </p> Ao invés de criar este parágrafo com JSX, vamos utilizar React.createElement(). A API oficial é a seguinte: React.createElement(type, [props], [...children]) O primeiro argumento é o tipo de elemento que queremos criar, ou seja, pode ser uma tag HTML ou um componente que você criou. Lembre-se que tags HTML devem ser passadas como string. O segundo argumento é opcional e é um objeto contendo todas as propriedades que você quer passar para o elemento. Lembra da propriedade especial children? Você não deve defini-la dentro do segundo argumento props, e sim, no terceiro argumento. O terceiro argumento também é opcional. E os três pontinhos? O que significa?! children é o plural de child, então children é composto por um ou mais child, sendo que cada child pode ser uma string, um number, um elemento, etc. Por isso, os três pontinhos. Significa que a partir do terceiro argumento você pode passar um ou mais child, assim formando children. Após ter removido a declaração que falamos anteriormente, adicione no lugar: {React.createElement( 'p', { className: 'App-intro' }, 'To get started, edit ', React.createElement('code', null, 'src/App.js'), ' and save to reload.' )} Observe que, no primeiro argumento, passamos o tipo de elemento que queremos. Já no segundo argumento, passamos as propriedades do elemento. No terceiro argumento, passamos uma string como o primeiro child. No quarto argumento, passamos um novo elemento como segundo child, e no quinto argumento passamos uma string como terceiro child, ou seja, o terceiro, quarto e quinto argumento formam children. É importante notar que, quando você quiser passar children, mas o elemento não possui nenhuma outra propriedade, você deve passar null como segundo argumento. Lembre-se também de que cada child de children não precisa ser - necessariamente - um elemento, ele pode ser uma string, um number, etc. Importante! Não esqueça das chaves no início e fim, pois como src/App.js está utilizando JSX. Elas indicam que o compilador deve passar a interpretar JavaScript ao invés de JSX. Vamos falar sobre isso em detalhes na próxima parte. Como class é uma palavra reservada no JavaScript moderno, devemos utilizar className para passar classes para elementos no React. Não se preocupe se você não sabe o que é JSX e não entende como funciona. A próxima parte será sobre JSX. Agora salve o arquivo e no seu browser navegue até http://localhost:3000. Se você não digitou nada errado, tudo deve funcionar como esperado. Resumo Aprendemos como funciona a propriedade children e como criamos elementos no React. Na próxima parte desta série, vamos entender o que é JSX.