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 inglê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.

      The magic of components lies in their reusability: you can create components that are composed of other components. But as you nest more and more components, it often makes sense to start splitting them into different files. This lets you keep your files easy to scan and reuse components in more places.#thedivisor#<li class="leading-relaxed mb-1">What a root component file is</li>
<li class="leading-relaxed mb-1">How to import and export a component</li>
<li class="leading-relaxed mb-1">When to use default and named imports and exports</li>
<li class="leading-relaxed mb-1">How to import and export multiple components from one file</li>
<li class="leading-relaxed mb-1">How to split components into multiple files</li>#thedivisor#In <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/your-first-component">Your First Component</a>, you made a <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> component and a <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> component that renders it:#thedivisor#These currently live in a <strong class="font-bold">root component file,</strong> named <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">App.js</code> in this example. Depending on your setup, your root component could be in another file, though. If you use a framework with file-based routing, such as Next.js, your root component will be different for every page.#thedivisor#What if you want to change the landing screen in the future and put a list of science books there? Or place all the profiles somewhere else? It makes sense to 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">Gallery</code> and <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> out of the root component file. This will make them more modular and reusable in other files. You can move a component in three steps:#thedivisor#<li class="leading-relaxed mb-1"><strong class="font-bold">Make</strong> a new JS file to put the components in.</li>
<li class="leading-relaxed mb-1"><strong class="font-bold">Export</strong> your function component from that file (using either <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_the_default_export" 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">default</a> or <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_named_exports" 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">named</a> exports).</li>
<li class="leading-relaxed mb-1"><strong class="font-bold">Import</strong> it in the file where you’ll use the component (using the corresponding technique for importing <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import#importing_defaults" 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">default</a> or <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import#import_a_single_export_from_a_module" 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">named</a> exports).</li>#thedivisor#Here both <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> and <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> have been moved out of <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">App.js</code> into a new file called <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.js</code>. Now you can change <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">App.js</code> to import <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> from <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.js</code>:#thedivisor#Notice how this example is broken down into two component files now:#thedivisor#<li class="leading-relaxed mb-1"><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.js</code>:<!-- -->
<ul class="ms-6 my-3 list-disc">
<li class="leading-relaxed mb-1">Defines 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> component which is only used within the same file and is not exported.</li>
<li class="leading-relaxed mb-1">Exports 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">Gallery</code> component as a <strong class="font-bold">default export.</strong></li>
</ul>
</li>
<li class="leading-relaxed mb-1"><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">App.js</code>:<!-- -->
<ul class="ms-6 my-3 list-disc">
<li class="leading-relaxed mb-1">Imports <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> as a <strong class="font-bold">default import</strong> from <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.js</code>.</li>
<li class="leading-relaxed mb-1">Exports the root <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">App</code> component as a <strong class="font-bold">default export.</strong></li>
</ul>
</li>#thedivisor#<li class="leading-relaxed mb-1">Defines 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> component which is only used within the same file and is not exported.</li>
<li class="leading-relaxed mb-1">Exports 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">Gallery</code> component as a <strong class="font-bold">default export.</strong></li>