{"id":114,"date":"2017-07-29T16:28:00","date_gmt":"2017-07-29T19:28:00","guid":{"rendered":"https:\/\/cahfelix.tech\/blog\/?p=114"},"modified":"2025-10-27T13:11:41","modified_gmt":"2025-10-27T16:11:41","slug":"introducao-ao-react","status":"publish","type":"post","link":"https:\/\/cahfelix.tech\/blog\/introducao-ao-react\/","title":{"rendered":"Introdu\u00e7\u00e3o ao React"},"content":{"rendered":"\n<p id=\"99bc\">O React \u00e9 uma&nbsp;<strong>biblioteca JavaScript<\/strong>&nbsp;criada pelo Facebook. N\u00e3o \u00e9 um framework! Seu foco \u00e9 exclusivo:&nbsp;<strong>criar interfaces visuais<\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"61e5\">Mas qual a diferen\u00e7a de framework e lib?<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"398\" src=\"https:\/\/cahfelix.tech\/blog\/wp-content\/uploads\/2025\/10\/react-1024x398.webp\" alt=\"\" class=\"wp-image-115\" srcset=\"https:\/\/cahfelix.tech\/blog\/wp-content\/uploads\/2025\/10\/react-1024x398.webp 1024w, https:\/\/cahfelix.tech\/blog\/wp-content\/uploads\/2025\/10\/react-300x117.webp 300w, https:\/\/cahfelix.tech\/blog\/wp-content\/uploads\/2025\/10\/react-768x298.webp 768w, https:\/\/cahfelix.tech\/blog\/wp-content\/uploads\/2025\/10\/react.webp 1400w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p id=\"d552\">Um&nbsp;<strong>framework<\/strong>&nbsp;\u00e9 um conjunto de ferramentas que ajuda a resolver diversos problemas de uma aplica\u00e7\u00e3o. Um exemplo famoso \u00e9 o&nbsp;<strong>Angular<\/strong>, que j\u00e1 traz estrutura para rotas, servi\u00e7os, comunica\u00e7\u00e3o com o back-end, entre outros.<\/p>\n\n\n\n<p id=\"a032\">J\u00e1 uma&nbsp;<strong>biblioteca (lib)<\/strong>&nbsp;\u00e9 mais enxuta e voltada para resolver problemas espec\u00edficos.<\/p>\n\n\n\n<p id=\"8115\">No caso do React, ele \u00e9 uma lib focada apenas na&nbsp;<strong>renderiza\u00e7\u00e3o de componentes<\/strong>. Ele n\u00e3o \u00e9 um MVC completo, mas sim apenas o&nbsp;<strong>V<\/strong>&nbsp;(View), ou seja, a camada de visualiza\u00e7\u00e3o.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"825f\">O que o React trouxe de novo?<\/h2>\n\n\n\n<p id=\"fb80\">O React introduziu uma forma diferente de pensar interfaces:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Em vez de p\u00e1ginas monol\u00edticas, voc\u00ea pode dividi-las em\u00a0<strong>componentes independentes e reutiliz\u00e1veis<\/strong>.<\/li>\n\n\n\n<li>Essa abordagem \u00e9 chamada de\u00a0<strong>Interface baseada em componentes<\/strong>\u00a0e facilita muito a manuten\u00e7\u00e3o e evolu\u00e7\u00e3o do c\u00f3digo.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"0bec\">O que o React faz (e n\u00e3o faz)?<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u2705\u00a0<strong>Est\u00e1<\/strong>\u00a0preocupado apenas em renderizar componentes.<\/li>\n\n\n\n<li>\u274c\u00a0<strong>N\u00e3o<\/strong>\u00a0gerencia o estado da aplica\u00e7\u00e3o sozinho.<\/li>\n\n\n\n<li>\u274c\u00a0<strong>N\u00e3o<\/strong>\u00a0faz requisi\u00e7\u00f5es ao back-end.<\/li>\n\n\n\n<li>\u274c\u00a0<strong>N\u00e3o<\/strong>\u00a0traz camadas de service, controller, rotas etc.<\/li>\n<\/ul>\n\n\n\n<p id=\"0929\">Resumindo: ele recebe&nbsp;<strong>propriedades<\/strong>, computa&nbsp;<strong>estado<\/strong>&nbsp;e retorna uma&nbsp;<strong>representa\u00e7\u00e3o virtual do DOM<\/strong>&nbsp;(Virtual DOM).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"2f1c\">Mas d\u00e1 para construir aplica\u00e7\u00f5es complexas s\u00f3 com o React?<\/h2>\n\n\n\n<p id=\"404a\">A resposta \u00e9:&nbsp;<strong>Sim!<\/strong><\/p>\n\n\n\n<p id=\"db93\">O React sozinho cuida apenas da View, mas o seu&nbsp;<strong>ecossistema<\/strong>&nbsp;\u00e9 enorme. Ao combin\u00e1-lo com bibliotecas de roteamento, gerenciamento de estado (Redux, Context API, Zustand, etc.) e ferramentas de build, conseguimos montar aplica\u00e7\u00f5es completas e escal\u00e1veis.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"dc1f\">Conclus\u00e3o<\/h2>\n\n\n\n<p id=\"d0ec\">Este artigo foi apenas uma introdu\u00e7\u00e3o a essa poderosa biblioteca, que ganhou enorme popularidade no mercado por oferecer uma forma&nbsp;<strong>eficiente e perform\u00e1tica<\/strong>&nbsp;de criar interfaces.<\/p>\n\n\n\n<p id=\"b1c8\">Nos pr\u00f3ximos artigos podemos mergulhar em conceitos como componentes, estado, ciclo de vida e explorar o ecossistema que torna o React t\u00e3o flex\u00edvel.<\/p>\n\n\n\n<p id=\"ad91\">Obrigado por ler! \ud83d\ude42<\/p>\n\n\n\n<p><a href=\"https:\/\/medium.com\/@cahfelix?source=post_page---post_author_info--795d4cb4dd4---------------------------------------\"><\/a><\/p>\n\n\n\n<p><a href=\"https:\/\/medium.com\/@cahfelix?source=post_page---byline--795d4cb4dd4---------------------------------------\"><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>O React \u00e9 uma&nbsp;biblioteca JavaScript&nbsp;criada pelo Facebook. N\u00e3o \u00e9 um framework! Seu foco \u00e9 exclusivo:&nbsp;criar interfaces visuais. Mas qual a diferen\u00e7a de framework e lib? Um&nbsp;framework&nbsp;\u00e9 um conjunto de ferramentas&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[25],"tags":[43,42,41],"class_list":["post-114","post","type-post","status-publish","format-standard","hentry","category-engenharia-de-software","tag-front-end","tag-javascript","tag-react"],"aioseo_notices":[],"featured":false,"read_time":2,"_links":{"self":[{"href":"https:\/\/cahfelix.tech\/blog\/wp-json\/wp\/v2\/posts\/114","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cahfelix.tech\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cahfelix.tech\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cahfelix.tech\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cahfelix.tech\/blog\/wp-json\/wp\/v2\/comments?post=114"}],"version-history":[{"count":3,"href":"https:\/\/cahfelix.tech\/blog\/wp-json\/wp\/v2\/posts\/114\/revisions"}],"predecessor-version":[{"id":278,"href":"https:\/\/cahfelix.tech\/blog\/wp-json\/wp\/v2\/posts\/114\/revisions\/278"}],"wp:attachment":[{"href":"https:\/\/cahfelix.tech\/blog\/wp-json\/wp\/v2\/media?parent=114"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cahfelix.tech\/blog\/wp-json\/wp\/v2\/categories?post=114"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cahfelix.tech\/blog\/wp-json\/wp\/v2\/tags?post=114"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}