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, 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#<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>#thedivisor#You may encounter files that leave off 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">.js</code> file extension like so:#thedivisor#Either <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> or <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> will work with React, though the former is closer to how <a href="https://developer.mozilla.org/docs/Web/JavaScript/Guide/Modules" 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">native ES Modules</a> work.#thedivisor#There are two primary ways to export values with JavaScript: default exports and named exports. So far, our examples have only used default exports. But you can use one or both of them in the same file. <strong class="font-bold">A file can have no more than one <em>default</em> export, but it can have as many <em>named</em> exports as you like.</strong>#thedivisor#How you export your component dictates how you must import it. You will get an error if you try to import a default export the same way you would a named export! This chart can help you keep track:#thedivisor#When you write a <em>default</em> import, you can put any name you want after <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">import</code>. For example, you could write <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">import Banana from './Button.js'</code> instead and it would still provide you with the same default export. In contrast, with named imports, the name has to match on both sides. That’s why they are called <em>named</em> imports!#thedivisor#<strong class="font-bold">People often use default exports if the file exports only one component, and use named exports if it exports multiple components and values.</strong> Regardless of which coding style you prefer, always give meaningful names to your component functions and the files that contain them. Components without names, like <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">export default () =&gt; {}</code>, are discouraged because they make debugging harder.#thedivisor#What if you want to show just one <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> instead of a gallery? You can export 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, too. But <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> already has a <em>default</em> export, and you can’t have <em>two</em> default exports. You could create a new file with a default export, or you could add a <em>named</em> export for <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>. <strong class="font-bold">A file can only have one default export, but it can have numerous named exports!</strong>#thedivisor#To reduce the potential confusion between default and named exports, some teams choose to only stick to one style (default or named), or avoid mixing them in a single file. Do what works best for you!#thedivisor#First, <strong class="font-bold">export</strong> <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> 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> using a named export (no <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">default</code> keyword):