\n\n\n```\n\nNessa aula, vamos iniciar com o clássico Hello World, essencial ao trabalhar com qualquer linguagem ou framework. Dividi a aula em duas partes: primeiro, criaremos um arquivo modelo que servirá de base para os próximos conceitos. Usaremos o React com a tag script para focar nos fundamentos. Vou mostrar como criar um arquivo `modelo.html` e configurar a estrutura básica do HTML, incluindo a div que renderiza a aplicação. Na próxima aula, instalaremos extensões e faremos o Hello World funcionar.","duration":195,"isFree":false,"isLoggedOutWatchable":false,"hasTranscription":true,"tags":[],"video":{"jupiterVideoId":"637592c6-0178-4bc3-b6e8-4507d375df4d","platform":"nivo"},"route":"/jornada/react-2025/sala/fundamentos-9/grupo/formas-de-rodar-o-react-e-hello-world/aula/criando-arquivo-base","metadata":{"journey_id":"d941129a-2873-4670-b53a-05da566d1496","journey_title":"React","type":"cluster","is_expert_content":false,"node_id":"7be2f248-2d13-4ca3-9879-8f94907299fc","node_title":"Fundamentos","node_slug":"fundamentos-9","roadmap_slug":null,"cluster_id":"bed08bdb-10ff-4c27-b807-5ff653ec7b94","cluster_title":"Fundamentos","cluster_slug":"fundamentos-9","cluster_thumbnail_url":null,"lesson_group_id":"eac77bfd-b18a-4e1a-a2d0-6bdecb934b07","group_slug":"formas-de-rodar-o-react-e-hello-world","group_title":"Formas de rodar o React e Hello World","lesson_id":"393df3ea-440b-46a3-88ab-77515bcb7394","lesson_slug":"criando-arquivo-base","lesson_title":"Criando arquivo base"},"lessonGroup":{"id":"eac77bfd-b18a-4e1a-a2d0-6bdecb934b07","slug":"formas-de-rodar-o-react-e-hello-world","title":"Formas de rodar o React e Hello World"}},{"id":"e8f77d19-fed9-4f36-81a8-fd374e84242c","slug":"extensoes-uteis-para-o-react-no-vs-code","type":"VIDEO","title":"Extensões Úteis para o React no VSCode","lessonJourneyId":"e6102c05-6685-432f-b649-3cb08ef7dea6","description":"Antes de mergulharmos no Hello World, quero compartilhar duas extensões do VS Code que vão facilitar sua vida como desenvolvedor. A primeira é o Biome, um formatador de código que melhora a indentação automaticamente ao salvar. Basta instalá-lo e configurá-lo nas opções de formatação. A segunda é o Live Preview, que permite visualizar seu projeto em um navegador integrado. Na próxima aula, vamos criar nosso Hello World em React, que é super simples!","duration":139,"isFree":false,"isLoggedOutWatchable":false,"hasTranscription":true,"tags":[],"video":{"jupiterVideoId":"95293e83-f96e-4b64-b049-a498fef1284b","platform":"nivo"},"route":"/jornada/react-2025/sala/fundamentos-9/grupo/formas-de-rodar-o-react-e-hello-world/aula/extensoes-uteis-para-o-react-no-vs-code","metadata":{"journey_id":"d941129a-2873-4670-b53a-05da566d1496","journey_title":"React","type":"cluster","is_expert_content":false,"node_id":"7be2f248-2d13-4ca3-9879-8f94907299fc","node_title":"Fundamentos","node_slug":"fundamentos-9","roadmap_slug":null,"cluster_id":"bed08bdb-10ff-4c27-b807-5ff653ec7b94","cluster_title":"Fundamentos","cluster_slug":"fundamentos-9","cluster_thumbnail_url":null,"lesson_group_id":"eac77bfd-b18a-4e1a-a2d0-6bdecb934b07","group_slug":"formas-de-rodar-o-react-e-hello-world","group_title":"Formas de rodar o React e Hello World","lesson_id":"6cf4c7a0-3d80-460c-a105-d636900cfb9f","lesson_slug":"extensoes-uteis-para-o-react-no-vs-code","lesson_title":"Extensões Úteis para o React no VSCode"},"lessonGroup":{"id":"eac77bfd-b18a-4e1a-a2d0-6bdecb934b07","slug":"formas-de-rodar-o-react-e-hello-world","title":"Formas de rodar o React e Hello World"}},{"id":"29d97f3f-4ea2-4b1b-a5bd-c2945468a30b","slug":"nosso-primeiro-hello-world","type":"VIDEO","title":"Nosso primeiro \"Hello World\"","lessonJourneyId":"473f1d93-a568-4ece-996f-da6f82a615f8","description":"Agora que configuramos nosso ambiente no VS Code, vamos criar nosso primeiro projeto em React: o Hello World. Começamos copiando um arquivo modelo e renomeando-o. Em seguida, utilizamos `ReactDOM.createRoot` para buscar a div principal da nossa aplicação. O interessante é que, ao invés de usar strings, inserimos diretamente o HTML, aproveitando o JSX, que permite essa integração entre HTML e JavaScript. Na próxima aula, vamos aprofundar em HTML, CSS e JSX.","duration":190,"isFree":false,"isLoggedOutWatchable":false,"hasTranscription":true,"tags":[],"video":{"jupiterVideoId":"ed6d7f8c-12dc-4e93-919e-a04b85471193","platform":"nivo"},"route":"/jornada/react-2025/sala/fundamentos-9/grupo/formas-de-rodar-o-react-e-hello-world/aula/nosso-primeiro-hello-world","metadata":{"journey_id":"d941129a-2873-4670-b53a-05da566d1496","journey_title":"React","type":"cluster","is_expert_content":false,"node_id":"7be2f248-2d13-4ca3-9879-8f94907299fc","node_title":"Fundamentos","node_slug":"fundamentos-9","roadmap_slug":null,"cluster_id":"bed08bdb-10ff-4c27-b807-5ff653ec7b94","cluster_title":"Fundamentos","cluster_slug":"fundamentos-9","cluster_thumbnail_url":null,"lesson_group_id":"eac77bfd-b18a-4e1a-a2d0-6bdecb934b07","group_slug":"formas-de-rodar-o-react-e-hello-world","group_title":"Formas de rodar o React e Hello World","lesson_id":"7eada2f4-c324-4f64-8ceb-5983f685b16d","lesson_slug":"nosso-primeiro-hello-world","lesson_title":"Nosso primeiro \"Hello World\""},"lessonGroup":{"id":"eac77bfd-b18a-4e1a-a2d0-6bdecb934b07","slug":"formas-de-rodar-o-react-e-hello-world","title":"Formas de rodar o React e Hello World"}}]}],"journeyNode":{"id":"7be2f248-2d13-4ca3-9879-8f94907299fc","slug":"fundamentos-9","title":"Iniciação","description":"Nesse módulo você dará os seus primeiros passos com o React entendendo o que é React e o que não é, DOM x Virtual DOM, árvore de renderização, reconciliação, como reutilizar código por meio de componentes, formas de rodar o React e como criar o seu primeiro \"Hello World\"","isFreemium":false,"isBonus":false,"isFirstModule":true,"releaseAt":"2025-05-05T03:00:00.000Z"},"journey":{"id":"d941129a-2873-4670-b53a-05da566d1496","slug":"react-2025","title":"React","iconUrl":"https://xesque.rocketseat.dev/platform/1760965441182.svg","isFree":false,"freeUntil":null,"isEntryCourse":false,"isCertificable":true,"certificate":{},"contentType":"SPECIALIZATION","hasAfterAccess":false,"shouldRedirectToInternalPage":false,"plutoOfferSlug":"formacao-em-react","parentJourney":null},"forum":{"slug":"react-js"}},"dataUpdateCount":0,"dataUpdatedAt":1766184644446,"error":null,"errorUpdateCount":0,"errorUpdatedAt":0,"fetchFailureCount":0,"fetchFailureReason":null,"fetchMeta":null,"isInvalidated":false,"status":"success","fetchStatus":"idle"},"queryKey":["GetJourneyLessonByNodeSlug",{"nodeSlug":"fundamentos-9"}],"queryHash":"[\"GetJourneyLessonByNodeSlug\",{\"nodeSlug\":\"fundamentos-9\"}]"}]});
