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.

      #thedivisor#When the shortcuts get in the way of writing plain code, try using an <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">if</code> statement and a variable. You can reassign variables defined with <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let" 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"><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">let</code></a>, so start by providing the default content you want to display, the name:#thedivisor#Use an <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">if</code> statement to reassign a JSX expression to <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">itemContent</code> if <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">isPacked</code> is <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">true</code>:#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/javascript-in-jsx-with-curly-braces#using-curly-braces-a-window-into-the-javascript-world">Curly braces open the “window into JavaScript”.</a> Embed the variable with curly braces in the returned JSX tree, nesting the previously calculated expression inside of JSX:#thedivisor#This style is the most verbose, but it’s also the most flexible. Here it is in action:#thedivisor#Like before, this works not only for text, but for arbitrary JSX too:#thedivisor#If you’re not familiar with JavaScript, this variety of styles might seem overwhelming at first. However, learning them will help you read and write any JavaScript code — and not just React components! Pick the one you prefer for a start, and then consult this reference again if you forget how the other ones work.#thedivisor#<li class="leading-relaxed mb-1">In React, you control branching logic with JavaScript.</li>
<li class="leading-relaxed mb-1">You can return a JSX expression conditionally with an <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">if</code> statement.</li>
<li class="leading-relaxed mb-1">You can conditionally save some JSX to a variable and then include it inside other JSX by using the curly braces.</li>
<li class="leading-relaxed mb-1">In JSX, <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">{cond ? &lt;A /&gt; : &lt;B /&gt;}</code> means <em>“if <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">cond</code>, render <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;A /&gt;</code>, otherwise <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;B /&gt;</code>”</em>.</li>
<li class="leading-relaxed mb-1">In JSX, <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">{cond &amp;&amp; &lt;A /&gt;}</code> means <em>“if <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">cond</code>, render <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;A /&gt;</code>, otherwise nothing”</em>.</li>
<li class="leading-relaxed mb-1">The shortcuts are common, but you don’t have to use them if you prefer plain <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">if</code>.</li>#thedivisor#Use the conditional operator (<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">cond ? a : b</code>) to render a ❌ if <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">isPacked</code> isn’t <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">true</code>.