{"id":1020,"date":"2024-06-21T22:30:00","date_gmt":"2024-06-22T01:30:00","guid":{"rendered":"https:\/\/kangaroo.host\/blog\/posso-usar-react-hospedagem-cpanel\/"},"modified":"2024-11-01T23:07:57","modified_gmt":"2024-11-02T02:07:57","slug":"posso-usar-react-hospedagem-cpanel","status":"publish","type":"post","link":"https:\/\/kangaroo.host\/blog\/posso-usar-react-hospedagem-cpanel\/","title":{"rendered":"\u00c9 poss\u00edvel usar React em hospedagem?"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Ol\u00e1, Pequeno Gafanhoto! Como vai? Que o <a href=\"https:\/\/react.dev\/\" target=\"_blank\" rel=\"noopener\"><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-luminous-vivid-orange-color\"><strong>React<\/strong><\/mark><\/a> \u00e9 possivelmente o maior e mais utilizado framework JavaScript, tudo mundo sabe, mas \u00e9 muito comum que desenvolvedores mais voltados apenas ao front-end ainda n\u00e3o tenham experi\u00eancia com o deploy, ou seja, a publica\u00e7\u00e3o do site.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Pensando nisso, nosso artigo de hoje \u00e9 pensado justamente em expandir seus horizontes para conhecer novas possibilidades de deploy para suas aplica\u00e7\u00f5es. Ent\u00e3o, vamos come\u00e7ar?<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Sum\u00e1rio<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>O que \u00e9?<\/li>\n\n\n\n<li>Requisitos para o deploy<\/li>\n\n\n\n<li>\u00c9 poss\u00edvel usar em hospedagem?<\/li>\n\n\n\n<li>Como funciona o deploy?<\/li>\n\n\n\n<li>Conclus\u00e3o<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">O que \u00e9?<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/kangaroo.host\/blog\/wp-content\/uploads\/2024\/06\/Site-react.png\" alt=\"Site react\" class=\"wp-image-8619\"\/><figcaption class=\"wp-element-caption\">Reprodu\u00e7\u00e3o: site oficial<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">O React \u00e9 uma biblioteca JavaScript, desenvolvida inicialmente pela equipe do Facebook (hoje, Meta). O seu intuito era simplificar o processo de desenvolvimento do Angular, criando uma sintaxe mais simples e que permitisse um desenvolvimento mais r\u00e1pido.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ganhando cada vez mais o apoio da comunidade, o React hoje \u00e9 a biblioteca\/framework mais utilizada para a constru\u00e7\u00e3o de aplica\u00e7\u00f5es altamente interativas atrav\u00e9s do seu excelente sistema de componentes.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Requisitos do deploy<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">A implementa\u00e7\u00e3o de aplica\u00e7\u00f5es React \u00e9 essencialmente simples, e requer basicamente que esteja dispon\u00edvel o <a href=\"https:\/\/nodejs.org\/en\" target=\"_blank\" rel=\"noopener\"><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-luminous-vivid-orange-color\">NodeJS<\/mark><\/strong><\/a>, para instalar o restante das depend\u00eancias de toda a aplica\u00e7\u00e3o, incluindo, claro, o pr\u00f3prio React.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Uma vez que o principal requisito \u00e9 o NodeJS, todos os tipos de servi\u00e7o que tenham disponibilizado esse recurso dever\u00e3o estar aptos para receber a implementa\u00e7\u00e3o do framework, precisando apenas seguir com a instala\u00e7\u00e3o das depend\u00eancias.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Posso usar o React em uma hospedagem?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Com base nos requisitos acima, a resposta curta \u00e9 que sim, mas depende de seu provedor! Dependendo de seu provedor de hospedagem e plano escolhido, \u00e9 poss\u00edvel que seu plano n\u00e3o tenha as funcionalidades para a implementa\u00e7\u00e3o de aplica\u00e7\u00f5es NodeJS.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Sem esses recursos, infelizmente n\u00e3o seria poss\u00edvel usar aplica\u00e7\u00f5es baseadas em frameworks como o React, Vue, entre outros. Por isso, confira sempre os recursos disponibilizados pelo servi\u00e7o, para garantir que haja o suporte para o NodeJS e, se poss\u00edvel, acesso ao terminal SSH, para um gerenciamento ainda mais completo.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Como funciona o deploy?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">De maneira geral, o deploy (implementa\u00e7\u00e3o) de um aplicativo React (assim como outros baseados em Node) \u00e9 feita usando as ferramentas de gest\u00e3o de ambientes NodeJS. No caso de hospedagens baseadas no painel de controle cPanel, como \u00e9 o caso de nossos planos aqui na KangarooHost, essa ferramenta \u00e9 a &#8220;Setup NodeJS App&#8221;.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Atrav\u00e9s de ferramenta, \u00e9 poss\u00edvel criar um ambiente isolado rodando o Node, o que permitir\u00e1 definir todas as configura\u00e7\u00f5es da sua aplica\u00e7\u00e3o, desde a vers\u00e3o at\u00e9 os arquivos que v\u00e3o iniciar o seu script.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Caso voc\u00ea queira conferir com mais detalhes como funciona todo esse processo de configura\u00e7\u00e3o do ambiente e o que deve ser feito, recomendamos conferir nosso outro artigo, onde ensinamos <a href=\"https:\/\/kangaroo.host\/blog\/aplicacao-nodejs-no-cpanel\/\" data-type=\"post\" data-id=\"7785\">como hospedar NodeJS no cPanel<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclus\u00e3o<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Com isso, agora voc\u00ea poder\u00e1 ter uma no\u00e7\u00e3o melhor do que procurar quando precisar colocar em produ\u00e7\u00e3o a sua nova aplica\u00e7\u00e3o React, podendo at\u00e9 mesmo utilizar dentro de seu ambiente cPanel de forma totalmente simples e r\u00e1pida.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Aqui na KangarooHost, claro, contamos com todos esses recursos para tamb\u00e9m receber o seu site com tudo o que ele precisa para voc\u00ea por o seu projeto no ar! Por isso, n\u00e3o deixe de conferir os <a href=\"\/hospedagem-de-site\/\">nossos planos<\/a> e nos vemos na pr\u00f3xima o\/<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ol\u00e1, Pequeno Gafanhoto! Como vai? Que o React \u00e9 possivelmente o maior e mais utilizado framework JavaScript, tudo mundo sabe, mas \u00e9 muito comum que desenvolvedores mais voltados apenas ao front-end ainda n\u00e3o tenham experi\u00eancia com o deploy, ou seja, a publica\u00e7\u00e3o do site. Pensando nisso, nosso artigo de hoje \u00e9 pensado justamente em expandir [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1022,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[71],"tags":[239,169,266,267,97,240,268,269,99,270,271],"class_list":["post-1020","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desenvolvimento","tag-angular","tag-aplicacao","tag-app","tag-deploy","tag-framework","tag-javascript","tag-js","tag-nodejs","tag-react","tag-script","tag-vue"],"_links":{"self":[{"href":"https:\/\/kangaroo.host\/blog\/wp-json\/wp\/v2\/posts\/1020","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kangaroo.host\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kangaroo.host\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kangaroo.host\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kangaroo.host\/blog\/wp-json\/wp\/v2\/comments?post=1020"}],"version-history":[{"count":0,"href":"https:\/\/kangaroo.host\/blog\/wp-json\/wp\/v2\/posts\/1020\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kangaroo.host\/blog\/wp-json\/wp\/v2\/media\/1022"}],"wp:attachment":[{"href":"https:\/\/kangaroo.host\/blog\/wp-json\/wp\/v2\/media?parent=1020"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kangaroo.host\/blog\/wp-json\/wp\/v2\/categories?post=1020"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kangaroo.host\/blog\/wp-json\/wp\/v2\/tags?post=1020"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}