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#The exact approach depends on your existing page setup, so let’s walk through some details.#thedivisor#A modular JavaScript environment lets you write your React components in individual files, as opposed to writing all of your code in a single file. It also lets you use all the wonderful packages published by other developers on the <a href="https://www.npmjs.com/" 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">npm</a> registry—including React itself! How you do this depends on your existing setup:#thedivisor#<li class="leading-relaxed mb-1">
<p class="whitespace-pre-wrap my-4"><strong class="font-bold">If your app is already split into files that use <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> statements,</strong> try to use the setup you already have. Check whether writing <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">&lt;div /&gt;</code> in your JS code causes a syntax error. If it causes a syntax error, you might need to <a href="https://babeljs.io/setup" 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">transform your JavaScript code with Babel</a>, and enable the <a href="https://babeljs.io/docs/babel-preset-react" 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">Babel React preset</a> to use JSX.</p>
</li>
<li class="leading-relaxed mb-1">
<p class="whitespace-pre-wrap my-4"><strong class="font-bold">If your app doesn’t have an existing setup for compiling JavaScript modules,</strong> set it up with <a href="https://vitejs.dev/" 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">Vite</a>. The Vite community maintains <a href="https://github.com/vitejs/awesome-vite#integrations-with-backends" 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">many integrations with backend frameworks</a>, including Rails, Django, and Laravel. If your backend framework is not listed, <a href="https://vitejs.dev/guide/backend-integration.html" 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">follow this guide</a> to manually integrate Vite builds with your backend.</p>
</li>#thedivisor#<strong class="font-bold">If your app is already split into files that use <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> statements,</strong> try to use the setup you already have. Check whether writing <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">&lt;div /&gt;</code> in your JS code causes a syntax error. If it causes a syntax error, you might need to <a href="https://babeljs.io/setup" 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">transform your JavaScript code with Babel</a>, and enable the <a href="https://babeljs.io/docs/babel-preset-react" 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">Babel React preset</a> to use JSX.#thedivisor#<strong class="font-bold">If your app doesn’t have an existing setup for compiling JavaScript modules,</strong> set it up with <a href="https://vitejs.dev/" 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">Vite</a>. The Vite community maintains <a href="https://github.com/vitejs/awesome-vite#integrations-with-backends" 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">many integrations with backend frameworks</a>, including Rails, Django, and Laravel. If your backend framework is not listed, <a href="https://vitejs.dev/guide/backend-integration.html" 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">follow this guide</a> to manually integrate Vite builds with your backend.#thedivisor#To check whether your setup works, run this command in your project folder:#thedivisor#Then add these lines of code at the top of your main JavaScript file (it might be 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">index.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">main.js</code>):#thedivisor#If the entire content of your page was replaced by a “Hello, world!”, everything worked! Keep reading.#thedivisor#Integrating a modular JavaScript environment into an existing project for the first time can feel intimidating, but it’s worth it! If you get stuck, try our <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="/community">community resources</a> or the <a href="https://chat.vitejs.dev/" 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">Vite Chat</a>.#thedivisor#In the previous step, you put this code at the top of your main file: