Rescreva essa parte da string com as seguintes condições:
      1. Não elimine NENHUMA informação dada no artigo.
      2. Termos, variáveis, expressões ou referências devem ser SEMPRE mantidos em inglês.
      3. Apenas transcreva o artigo para um português mais simples, tornando ele mais literal e direto, sem alterar o contexto.
      4. Não remova as tags HTML e nem os "#thedivisor#".
      5. Você deve me enviar sua resposta em texto puro, sem markdown.

      #thedivisor#Components are regular JavaScript functions, so you can keep multiple components in the same file. This is convenient when components are relatively small or tightly related to each other. If this file gets crowded, you can always move <code dir="ltr" class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">Profile</code> to a separate file. You will learn how to do this shortly on the <a class="inline text-link dark:text-link-dark border-b border-link border-opacity-0 hover:border-opacity-100 duration-100 ease-in transition leading-normal" href="/learn/importing-and-exporting-components">page about imports.</a>#thedivisor#Because the <code dir="ltr" class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">Profile</code> components are rendered inside <code dir="ltr" class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">Gallery</code>—even several times!—we can say that <code dir="ltr" class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">Gallery</code> is a <strong class="font-bold">parent component,</strong> rendering each <code dir="ltr" class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">Profile</code> as a “child”. This is part of the magic of React: you can define a component once, and then use it in as many places and as many times as you like.#thedivisor#Components can render other components, but <strong class="font-bold">you must never nest their definitions:</strong>#thedivisor#The snippet above is <a class="inline text-link dark:text-link-dark border-b border-link border-opacity-0 hover:border-opacity-100 duration-100 ease-in transition leading-normal" href="/learn/preserving-and-resetting-state#different-components-at-the-same-position-reset-state">very slow and causes bugs.</a> Instead, define every component at the top level:#thedivisor#When a child component needs some data from a parent, <a class="inline text-link dark:text-link-dark border-b border-link border-opacity-0 hover:border-opacity-100 duration-100 ease-in transition leading-normal" href="/learn/passing-props-to-a-component">pass it by props</a> instead of nesting definitions.#thedivisor#Your React application begins at a “root” component. Usually, it is created automatically when you start a new project. For example, if you use <a href="https://codesandbox.io/" target="_blank" rel="nofollow noopener noreferrer" class="inline text-link dark:text-link-dark border-b border-link border-opacity-0 hover:border-opacity-100 duration-100 ease-in transition leading-normal">CodeSandbox</a> or if you use the framework <a href="https://nextjs.org/" target="_blank" rel="nofollow noopener noreferrer" class="inline text-link dark:text-link-dark border-b border-link border-opacity-0 hover:border-opacity-100 duration-100 ease-in transition leading-normal">Next.js</a>, the root component is defined in <code dir="ltr" class="inline text-code text-secondary dark:text-secondary-dark px-1 rounded-md no-underline bg-gray-30 bg-opacity-10 py-px">pages/index.js</code>. In these examples, you’ve been exporting root components.#thedivisor#Most React apps use components all the way down. This means that you won’t only use components for reusable pieces like buttons, but also for larger pieces like sidebars, lists, and ultimately, complete pages! Components are a handy way to organize UI code and markup, even if some of them are only used once.#thedivisor#<a class="inline text-link dark:text-link-dark border-b border-link border-opacity-0 hover:border-opacity-100 duration-100 ease-in transition leading-normal" href="/learn/start-a-new-react-project">React-based frameworks</a> take this a step further. Instead of using an empty HTML file and letting React “take over” managing the page with JavaScript, they <em>also</em> generate the HTML automatically from your React components. This allows your app to show some content before the JavaScript code loads.#thedivisor#Still, many websites only use React to <a class="inline text-link dark:text-link-dark border-b border-link border-opacity-0 hover:border-opacity-100 duration-100 ease-in transition leading-normal" href="/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page">add interactivity to existing HTML pages.</a> They have many root components instead of a single one for the entire page. You can use as much—or as little—React as you need.#thedivisor#You’ve just gotten your first taste of React! Let’s recap some key points.