Neste tutorial, vamos falar sobre React \u2014 a biblioteca JavaScript baseada em componentes mais populares<\/a> usada para a cria\u00e7\u00e3o de interfaces de usu\u00e1rio. Embora este tutorial seja completamente amig\u00e1vel para iniciantes, tamb\u00e9m pode servir como um guia de refer\u00eancia para desenvolvedores experientes em React.<\/p>\n\n Vamos falar sobre as funcionalidades do React, os pr\u00f3s e contras, porque voc\u00ea deve us\u00e1-lo, e como instalar e usar o React. Tamb\u00e9m veremos algumas das principais caracter\u00edsticas\u00a0do React usando exemplos pr\u00e1ticos de c\u00f3digo.<\/span><\/p>\n No final deste tutorial, voc\u00ea saber\u00e1 o que \u00e9 React, como ele funciona e como us\u00e1-lo na constru\u00e7\u00e3o de projetos incr\u00edveis. React.js, frequentemente chamado apenas de React, \u00e9 uma biblioteca JavaScript<\/a> usada para construir interfaces de usu\u00e1rio. Cada aplicativo web React \u00e9 composto de componentes reutiliz\u00e1veis que comp\u00f5em partes da interface do usu\u00e1rio \u2014 podemos ter um componente separado para nossa barra de navega\u00e7\u00e3o, um para o rodap\u00e9, outro para o conte\u00fado principal, e assim por diante. Voc\u00ea entender\u00e1 isso melhor mais a frente.<\/p>\n O uso de componentes reutiliz\u00e1veis facilita o desenvolvimento, uma vez que n\u00e3o \u00e9 preciso repetir c\u00f3digo recorrente. Basta criar a l\u00f3gica do componente e import\u00e1-lo em qualquer parte do c\u00f3digo em que for necess\u00e1rio.<\/p>\n React tamb\u00e9m \u00e9 um aplicativo de uma \u00fanica p\u00e1gina. Assim, ao inv\u00e9s de enviar uma solicita\u00e7\u00e3o ao servidor toda vez que uma nova p\u00e1gina \u00e9 renderizada, o conte\u00fado da p\u00e1gina \u00e9 carregado diretamente dos componentes do React. Isso leva a uma renderiza\u00e7\u00e3o mais r\u00e1pida sem recarregamentos de p\u00e1gina.<\/p>\n Geralmente, a sintaxe usada para construir aplicativos React \u00e9 chamado de JSX (JavaScript XML), que \u00e9 uma extens\u00e3o de sintaxe para JavaScript<\/a>. Isso nos permite combinar tanto a l\u00f3gica JavaScript quanto a l\u00f3gica da interface do usu\u00e1rio de uma maneira \u00fanica. Com o JSX, eliminamos a necessidade de interagir com o DOM usando m\u00e9todos como Embora o uso do JSX n\u00e3o seja obrigat\u00f3rio, ele torna o desenvolvimento de aplicativos React mais f\u00e1cil.<\/p>\n Aqui est\u00e1 um exemplo de como podemos usar o JSX no React:<\/p>\n No c\u00f3digo acima, usamos um componente funcional React para renderizar uma parte de texto para o navegador. O nome do componente \u00e9 Em seguida, passamos essa vari\u00e1vel para a marca\u00e7\u00e3o usando colchetes. Isso n\u00e3o \u00e9 HTML, mas a sintaxe para escrever c\u00f3digo usando JSX.<\/p>\n Na pr\u00f3xima se\u00e7\u00e3o, discutiremos algumas das raz\u00f5es pelas quais voc\u00ea deveria usar o React.<\/p>\n Muitos desenvolvedores<\/a> e organiza\u00e7\u00f5es escolheram React em vez de outras bibliotecas\/frameworks; aqui est\u00e3o os motivos:<\/p>\n O React tem sido usado por muitos engenheiros de frontend tanto em startups quanto em empresas estabelecidas como Facebook, Netflix, Instagram, Yahoo, Uber, The New York Times e outras.<\/p>\n Embora nem todas as empresas listadas acima tenham constru\u00eddo todo o seu produto usando React, algumas de suas p\u00e1ginas foram constru\u00eddas usando React. Isso se deve ao alto desempenho, facilidade de uso e escalabilidade do React.<\/p>\n React \u00e9 geralmente usado para construir a interface do usu\u00e1rio (frontend) dos aplicativos web. Ele possui renderiza\u00e7\u00e3o r\u00e1pida de p\u00e1ginas e aumento de desempenho. O React pode ser usado para construir qualquer produto que funcione na web.<\/p>\n Aqui est\u00e3o apenas algumas das coisas que o React \u00e9 comumente usado para construir:<\/p>\n O React tem uma infinidade de recursos incr\u00edveis que continuam a torn\u00e1-lo uma op\u00e7\u00e3o popular para desenvolvedores.<\/p>\n Aqui est\u00e3o algumas das principais funcionalidades do React:<\/p>\n React pode ser uma ferramenta popular para construir nossa interface do usu\u00e1rio (UI), mas ainda existem raz\u00f5es pelas quais alguns desenvolvedores ou iniciantes optam por n\u00e3o us\u00e1-la.<\/p>\n Nesta se\u00e7\u00e3o, falaremos sobre os pr\u00f3s e contras do React.<\/p>\n Aqui est\u00e3o os pr\u00f3s do uso do React:<\/p>\n Aqui est\u00e3o alguns dos contras de usar o React:<\/p>\n Nesta se\u00e7\u00e3o, primeiro falaremos sobre os pr\u00e9-requisitos para usar o React e depois entraremos em detalhes sobre a configura\u00e7\u00e3o de um aplicativo React, criando componentes, lidando com eventos e trabalhando com estados, hooks<\/a> e props no React.<\/p>\n Antes de usar o React, voc\u00ea deve ter uma boa compreens\u00e3o e experi\u00eancia do JavaScript<\/a>. Aqui est\u00e3o alguns dos t\u00f3picos de JavaScript que recomendamos que voc\u00ea aprofunde antes de usar o React:<\/p>\n A maioria desses t\u00f3picos acima faz parte do ES6. Voc\u00ea tamb\u00e9m deve ter experi\u00eancia em HTML<\/a>, j\u00e1 que a marca\u00e7\u00e3o faz parte da sintaxe JSX.<\/p>\n Antes de instalar o React, certifique-se de que voc\u00ea tem o Node.js instalado em seu computador<\/a>.<\/p>\n Uma vez que voc\u00ea o tenha instalado com sucesso, execute o comando abaixo em seu terminal:<\/p>\n Se tudo der certo, o comando acima deve lhe dizer qual vers\u00e3o do Node.js est\u00e1 atualmente instalada no seu computador.<\/p>\n A seguir, executaremos outro comando para come\u00e7ar a instalar o React.<\/p>\n Primeiro, crie uma pasta ou navegue at\u00e9 o local onde voc\u00ea deseja que o aplicativo React seja instalado, depois execute o comando abaixo em seu terminal:<\/p>\n O comando acima instalar\u00e1 o React em uma pasta chamada react-kit<\/strong>.<\/p>\n Uma vez conclu\u00edda a instala\u00e7\u00e3o, abra sua pasta React recentemente instalada no editor de c\u00f3digo<\/a> da sua escolha. Estaremos usando o Visual Studio Code neste tutorial. O Visual Studio Code vem com um terminal integrado. Caso voc\u00ea use um terminal diferente como Git Bash ou CMD, navegue para o seu diret\u00f3rio de aplicativos React e execute o comando abaixo:<\/p>\n Esse comando inicia o seu servidor de desenvolvimento. Ap\u00f3s algum tempo, voc\u00ea dever\u00e1 ter esta p\u00e1gina abaixo sendo exibida em localhost:3000<\/strong> no seu navegador:<\/p>\n Se voc\u00ea seguiu at\u00e9 este aqui, ent\u00e3o voc\u00ea instalou com sucesso seu primeiro aplicativo React. Parab\u00e9ns!<\/p>\n Quando voc\u00ea olhar para a estrutura da sua pasta, voc\u00ea ver\u00e1 uma pasta chamada public<\/strong>. Esta pasta tem um arquivo index.html<\/strong> onde nosso c\u00f3digo ser\u00e1 injetado e servido para o navegador.<\/p>\n A pasta src<\/strong> \u00e9 onde toda \u00e0 nossa l\u00f3gica, estilo e marca\u00e7\u00e3o v\u00e3o ficar; essa \u00e9 \u00e0 nossa pasta de desenvolvimento, onde o arquivo App.js<\/strong> atua como o componente raiz. O c\u00f3digo deste arquivo \u00e9 o que temos na imagem acima.<\/p>\n Abra o arquivo App.js<\/strong> e fa\u00e7a algumas altera\u00e7\u00f5es no arquivo e, em seguida, salve para ver as altera\u00e7\u00f5es refletidas automaticamente no navegador.<\/p>\n Tudo pronto? Agora vamos escrever algum c\u00f3digo!<\/p>\n Existem dois tipos principais de componentes no React: componentes de classe e componentes funcionais. A documenta\u00e7\u00e3o do React est\u00e1 atualmente sendo reescrita usando Hooks, que \u00e9 um recurso encontrado em componentes funcionais. Tamb\u00e9m usaremos componentes funcionais neste tutorial, pois eles se tornaram os componentes mais amplamente usados para aplicativos React.<\/span><\/p>\n Geralmente, os componentes retornam algum c\u00f3digo HTML<\/a> com uma mistura de valores din\u00e2micos criados usando JavaScript. Os componentes s\u00e3o criados como fun\u00e7\u00f5es em JavaScript.<\/p>\n Veremos um exemplo de um componente de classe em React.<\/p>\n Cada componente de classe deve incluir a declara\u00e7\u00e3o No componente acima, criamos uma vari\u00e1vel de estado chamada Quando isso for renderizado para o navegador, veremos \u201cEstou aprendendo JavaScript\u201d renderizado na p\u00e1gina.<\/p>\n Nesta se\u00e7\u00e3o, recriaremos o exemplo da \u00faltima se\u00e7\u00e3o usando um componente funcional.<\/p>\n Adicione esta fun\u00e7\u00e3o ao seu arquivo:<\/p>\n O nome do nosso componente \u00e9 o mesmo: Esse componente tamb\u00e9m possui uma vari\u00e1vel Os eventos usados em React s\u00e3o similares aos que fazemos em HTML<\/a>. A \u00fanica diferen\u00e7a aqui \u00e9 que os eventos React s\u00e3o escritos em sintaxe camelCase. Ent\u00e3o \u201conclick\u201d seria \u201conClick\u201d no React, \u201conchange\u201d seria \u201conChange\u201d, e assim por diante.<\/p>\n Ao passar um evento como um atributo em uma tag HTML, usamos colchetes: Aqui est\u00e1 um exemplo (no arquivo App.js<\/strong>):<\/p>\n No c\u00f3digo acima, criamos uma fun\u00e7\u00e3o que alerta uma mensagem no navegador. Tamb\u00e9m criamos um bot\u00e3o que chama esta fun\u00e7\u00e3o quando clicada. O manipulador de eventos usado aqui \u00e9 o manipulador de eventos Voc\u00ea notaria que o nome da fun\u00e7\u00e3o estava envolto em colchetes e n\u00e3o em aspas. Isso \u00e9 como passar em valores din\u00e2micos como nomes de vari\u00e1veis e fun\u00e7\u00f5es para a marca\u00e7\u00e3o quando se usa JSX.<\/p>\n Al\u00e9m disso, ao inv\u00e9s de usar \u201cclass\u201d como far\u00edamos quando usamos HTML, estamos usando \u201cclassName\u201d. Isso porque “class” \u00e9 uma palavra reservada em JavaScript.<\/p>\n Exportamos nosso componente na \u00faltima linha. Isso nos permite import\u00e1-lo para outros componentes.<\/p>\n Ao gerenciar o estado de nosso aplicativo em React, usamos um Hook chamado Com Hooks, podemos gerenciar o estado de nossos componentes e realizar certos efeitos quando nossas vari\u00e1veis de estado s\u00e3o renderizadas pela primeira vez ou alteradas.<\/p>\n Sem o Vamos dar uma olhada em um exemplo:<\/p>\n Agora, analisaremos o que acabamos de fazer.<\/p>\n Primeiro importamos o Hook A seguir, criamos uma fun\u00e7\u00e3o chamada changeName<\/strong>, que usa a fun\u00e7\u00e3o setName<\/strong> para atualizar o valor da vari\u00e1vel name<\/strong>.<\/p>\n Em nossa marca\u00e7\u00e3o, uma vez que o bot\u00e3o \u00e9 clicado, \u201cJohn\u201d \u00e9 mudado para \u201cJames\u201d.<\/p>\n Na pr\u00f3xima se\u00e7\u00e3o, veremos como usar outro Hook em React.<\/p>\n Na \u00faltima se\u00e7\u00e3o, vimos como gerenciar o estado do nosso aplicativo usando o hook O Vejamos alguns exemplos:<\/p>\n A primeira coisa que fizemos aqui foi importar o hook Toda vez que clicamos no bot\u00e3o, a vari\u00e1vel name <\/strong>\u00e9 aumentada em um, esta altera\u00e7\u00e3o no valor de name<\/strong> ent\u00e3o faz com que o hook Na pr\u00f3xima se\u00e7\u00e3o, falaremos sobre Props e o fluxo de dados entre componentes.<\/p>\n<\/div>\n<\/div>\n<\/div>\n Props permitem que passemos dados de um componente para outro. Isso torna o fluxo de dados em nosso aplicativo din\u00e2mico e sustent\u00e1vel. Props \u00e9 uma abrevia\u00e7\u00e3o de propriedades.<\/p>\n Vejamos um exemplo de como podemos usar os props.<\/p>\n Esse \u00e9 o aspecto do nosso arquivo App.js<\/strong>:<\/p>\n Criamos outro componente chamado Bio.js<\/strong> que tem essa apar\u00eancia:<\/p>\n A seguir, importaremos o componente Bio<\/strong> para o nosso componente App<\/strong> dessa forma:<\/p>\n A primeira linha \u00e9 onde importamos o componente Bio<\/strong>. Em seguida, colocamos o componente entre as tags Agora voc\u00ea entende como o c\u00f3digo pode ser reutiliz\u00e1vel no React. Mas esse c\u00f3digo \u00e9 est\u00e1tico; ser\u00e1 o mesmo em qualquer componente em que for usado. Isso n\u00e3o ser\u00e1 eficiente nos casos em que gostar\u00edamos de usar o mesmo componente, mas com informa\u00e7\u00f5es diferentes.<\/p>\n<\/div>\n<\/div>\n<\/div>\n Corrigiremos isso usando os adere\u00e7os.<\/p>\n No componente Bio.js<\/strong>, fa\u00e7a isso:<\/p>\n Primeiro desestruturamos e passamos em Exportamos o componente na \u00faltima linha de c\u00f3digo: No momento, n\u00e3o podemos ver nenhum valor\u00a0sendo exibidos <\/span>para eles. Faremos isso no componente <\/span>App<\/strong>;\u00a0<\/span><\/p>\n Adicionamos atributos \u00e0 nossa Bio<\/strong> tag correspondentes com as props que criamos anteriormente. Qualquer valor que passarmos nesses atributos ser\u00e1 renderizado no navegador. Isso \u00e9 importante para componentes que ser\u00e3o usados em m\u00faltiplos componentes, mas que requerem seus pr\u00f3prios dados diferentes.<\/p>\n Este tutorial deu a voc\u00ea o conhecimento fundamental necess\u00e1rio para come\u00e7ar a construir aplicativos web com o React, mas n\u00e3o tudo o que h\u00e1 para saber sobre o React. Ainda existem outras funcionalidades necess\u00e1rias para construir um aplicativo eficiente com o React como o roteamento em aplicativos que possuem mais de uma p\u00e1gina e gerenciamento de estado \u00fanico usando ferramentas como Redux.<\/p>\n O melhor lugar para come\u00e7ar a explorar mais sobre o React \u00e9 a documenta\u00e7\u00e3o do React<\/a>. Voc\u00ea tamb\u00e9m pode conferir a documenta\u00e7\u00e3o beta<\/a> que est\u00e1 sendo reescrita usando Hooks. O React, como uma biblioteca frontend, tem crescido muito em compara\u00e7\u00e3o a outras bibliotecas\/frameworks<\/a> na comunidade de desenvolvedores e n\u00e3o mostra sinais de parar. Voc\u00ea pode encontrar React em todo roadmap moderno de desenvolvedores web.<\/p>\n Com a ado\u00e7\u00e3o atual da tecnologia web3 por mais e mais desenvolvedores, React permanece sendo a ferramenta favorita para construir o frontend de aplicativos descentralizadas (DApps).<\/p>\n Voc\u00ea pode construir uma variedade de aplicativos com o React, desde aplicativos web simples de lista de tarefas at\u00e9 marketplaces, pain\u00e9is de controle e muito mais.<\/p>\n O React pode ser usado com muitas tecnologias como Bootstrap, Tailwind CSS<\/a>, Axios, Redux, Firebase, e muito mais. Tamb\u00e9m podemos usar React com Node.js e outras linguagens<\/a> backend para construir aplicativos full-stack<\/a> e aplicativos web de alta velocidade.<\/p>\n","protected":false},"excerpt":{"rendered":" A ind\u00fastria de desenvolvimento web tem visto um crescimento constante nos \u00faltimos anos; e \u00e0 medida que este crescimento continua, novas tecnologias est\u00e3o constantemente emergindo para …<\/p>\n","protected":false},"author":240,"featured_media":50993,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[901,523,461,710,575],"topic":[977,1002],"class_list":["post-50992","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-frontend-development","tag-javascript","tag-javascript-libraries","tag-react","tag-react-js","topic-frameworks-javascript","topic-react"],"yoast_head":"\n
\nO que \u00e9 React?<\/h2>\n
document.getElementById<\/code>, querySelector<\/code>, e outros m\u00e9todos de manipula\u00e7\u00e3o de DOM.<\/p>\nfunction App() {\n const greetings = \"Hello World\";\n return (\n <div className=\"App\">\n <h1> {greetings} <\/h1>\n <\/div>\n );\n }\n}<\/code><\/pre>\nApp<\/code>. Criamos uma vari\u00e1vel antes da fun\u00e7\u00e3o render()<\/code>.<\/p>\nPor que React?<\/h2>\n
\n
\n
\n
\n
Quem usa React?<\/h2>\n
Casos de uso do React<\/h2>\n
\n
Funcionalidades do React<\/h2>\n
\n
\n
\n
Pr\u00f3s e contras do React<\/h2>\n
\n
\n
Come\u00e7ando com o React<\/h2>\n
Pr\u00e9-requisitos para usar o React<\/h3>\n
\n
let<\/code> e const<\/code><\/li>\n<\/ul>\nComo instalar o React<\/h3>\n
node -v<\/code><\/pre>\nnpx create-react-app react-kit<\/code><\/pre>\nnpm run start<\/code><\/pre>\n![\"Servidor](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/react-npm-start.png\")
Componentes React<\/h3>\n
Criando um componente da classe React<\/h3>\n
React.Component<\/code> e render() subclass.<\/code><\/p>\nclass Student extends React.Component {\n constructor() {\n super();\n this.state = {language: \"JavaScript\"};\n }\n render() {\n return <p>I am learning {this.state.language} <\/p>;\n }\n}<\/code><\/pre>\nlanguage<\/code> com um valor de string de \u201cJavaScript\u201d. Usaremos esta vari\u00e1vel em nosso markup. Este exemplo mostra como podemos misturar JavaScript e HTML sem fazer refer\u00eancia a nenhum m\u00e9todo DOM.<\/p>\nCriando um componente funcional React<\/h3>\n
function Student() {\n const language = \"JavaScript\";\n return (\n <div>\n <p>I am learning { language } <\/p>\n <\/div>\n );\n}<\/code><\/pre>\nStudent<\/code>. Sempre comece o nome de seus componentes com uma letra mai\u00fascula. Essa vari\u00e1vel tamb\u00e9m foi passada para a marca\u00e7\u00e3o como fizemos na \u00faltima se\u00e7\u00e3o, sem manipular o DOM usando m\u00e9todos DOM do JavaScript puro.<\/p>\nStudent<\/code> que foi renderizada, mas\u00a0\u00e0 medida que avan\u00e7amos no tutorial, usaremos um Hook chamado<\/span>\u00a0<\/span>useState<\/code> Hook para criar nossas vari\u00e1veis de estado.<\/span><\/p>\nTrabalhando com eventos no React<\/h3>\n
onClick={changeName}<\/code> ao inv\u00e9s de aspas onClick=\u201dchangeName\u201d<\/code><\/p>\nimport { useState } from \"react\";\nfunction App() {\n const [name, setName] = useState(\"John\");\n const changeName = () => {\n setName(\"James\");\n };\n return (\n <div className=\u201dApp\u201d>\n <p>His name is {name}<\/p>\n <button onClick={changeName}> Click me <\/button>\n <\/div>\n );\n}\nexport default App;<\/code><\/pre>\nonClick<\/code>.<\/p>\nTrabalhando com estados no React<\/h3>\n
useState<\/code> Hook. Os hooks nos permitem acessar recursos adicionais do React sem escrever uma classe.<\/p>\nuseState<\/code> Hook em um componente funcional, quaisquer altera\u00e7\u00f5es feitas em nossas vari\u00e1veis de estado n\u00e3o refletir\u00e3o no DOM, portanto o estado permanecer\u00e1 inalterado.<\/p>\nimport { useState } from \"react\";\nfunction App() {\n const [name, setName] = useState(\"John\");\n const changeName = () => {\n setName(\"James\");\n };\n return (\n <div className=\u201dApp\u201d>\n <p>His name is {name}<\/p>\n <button onClick={changeName}> Click me <\/button>\n <\/div>\n );\n}\nexport default App;<\/code><\/pre>\nuseState<\/code> do React. Ent\u00e3o criamos uma vari\u00e1vel de estado chamado name<\/strong> e uma fun\u00e7\u00e3o \u2014 setName<\/strong> \u2014 que ser\u00e1 utilizada para atualizar o valor da vari\u00e1vel name<\/strong>. O valor inicial da vari\u00e1vel name \u00e9 armazenado no useState<\/code> Hook como \u201cJohn\u201d.<\/p>\nTrabalhando com Hooks no React<\/h3>\n
useStatet<\/code>. Nesta se\u00e7\u00e3o, veremos como usar o hook useEffect<\/code>.<\/p>\nuseEffect<\/code> hook realiza um efeito cada vez que uma altera\u00e7\u00e3o ocorre em um estado. Por padr\u00e3o, este hook \u00e9 executado na primeira renderiza\u00e7\u00e3o e sempre que o estado \u00e9 atualizado, mas podemos configurar e vincular um efeito a uma vari\u00e1vel de estado respectiva.<\/p>\nimport { useState, useEffect } from \"react\";\nfunction App() {\n const [day, setDay] = useState(1);\n useEffect(() => {\n console.log(`You are in day ${day} of the year`);\n });\n return (\n <div>\n <button onClick={() => setDay(day + 1)}>Click to increase day<\/button>\n <\/div>\n );\n}\nexport default App;<\/code><\/pre>\nuseEffect<\/code>.<\/p>\nuseEffect<\/code>\u00a0registre uma mensagem no console \u2014 isso acontece toda vez que a vari\u00e1vel do name<\/strong>\u00a0muda.<\/p>\nTrabalhando com Props no React<\/h3>\n
function App() {\n return (\n <div>\n <\/div>\n );\n}\nexport default App;<\/code><\/pre>\nfunction Bio() {\n return (\n <div>\n <p>My name is John<\/p>\n <p>I am a JavaScript developer<\/p>\n <\/div>\n );\n}\nexport default Bio;<\/code><\/pre>\nimport Bio from \".\/Bio\";\nfunction App() {\n return (\n <div className=\"App\">\n <Bio\/>\n <\/div>\n );\n}\nexport default App;<\/code><\/pre>\ndiv<\/code> em nosso componente App<\/strong>.\u00a0Quando voc\u00ea visualiza isso no navegador, voc\u00ea ver\u00e1 o c\u00f3digo que criamos no componente Bio<\/strong> sendo renderizado.<\/span><\/p>\nfunction Bio({name, language}) {\n return (\n <div>\n <p>My name is { name }<\/p>\n <p>I am a { language } developer<\/p>\n <\/div>\n );\n\n}\nexport default Bio;<\/code><\/pre>\nname<\/code> e language<\/code> como par\u00e2metros. Estes par\u00e2metros foram ent\u00e3o usados dinamicamente em nossa marca\u00e7\u00e3o.<\/p>\n export default Bio;<\/code> para que possamos import\u00e1-lo para qualquer outro componente que necessita da sua l\u00f3gica.<\/p>\nimport Bio from \".\/Bio\";\nfunction App() {\n return (\n <div className=\"App\">\n <Bio name=\"James\" language=\"Python\"\/>\n <\/div>\n );\n}\nexport default App;<\/code><\/pre>\nOnde aprender mais<\/h2>\n
\n<\/p>\nResumo<\/h2>\n