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.

      React is a JavaScript library for rendering user interfaces (UI). UI is built from small units like buttons, text, and images. React lets you combine them into reusable, nestable <em>components.</em> From web sites to phone apps, everything on the screen can be broken down into components. In this chapter, you’ll learn to create, customize, and conditionally display React components.#thedivisor#<li class="leading-relaxed mb-1"><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">How to write your first React component</a></li>
<li class="leading-relaxed mb-1"><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">When and how to create multi-component files</a></li>
<li class="leading-relaxed mb-1"><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/writing-markup-with-jsx">How to add markup to JavaScript with JSX</a></li>
<li class="leading-relaxed mb-1"><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">How to use curly braces with JSX to access JavaScript functionality from your components</a></li>
<li class="leading-relaxed mb-1"><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">How to configure components with props</a></li>
<li class="leading-relaxed mb-1"><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/conditional-rendering">How to conditionally render components</a></li>
<li class="leading-relaxed mb-1"><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/rendering-lists">How to render multiple components at a time</a></li>
<li class="leading-relaxed mb-1"><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/keeping-components-pure">How to avoid confusing bugs by keeping components pure</a></li>
<li class="leading-relaxed mb-1"><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/understanding-your-ui-as-a-tree">Why understanding your UI as trees is useful</a></li>#thedivisor#React applications are built from isolated pieces of UI called <em>components</em>. A React component is a JavaScript function that you can sprinkle with markup. Components can be as small as a button, or as large as an entire page. Here is 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 rendering three <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:#thedivisor#Read <strong class="font-bold"><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></strong> to learn how to declare and use React components.#thedivisor#You can declare many components in one file, but large files can get difficult to navigate. To solve this, you can <em>export</em> a component into its own file, and then <em>import</em> that component from another file:#thedivisor#Read <strong class="font-bold"><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">Importing and Exporting Components</a></strong> to learn how to split components into their own files.#thedivisor#Each React component is a JavaScript function that may contain some markup that React renders into the browser. React components use a syntax extension called JSX to represent that markup. JSX looks a lot like HTML, but it is a bit stricter and can display dynamic information.#thedivisor#If we paste existing HTML markup into a React component, it won’t always work:#thedivisor#If you have existing HTML like this, you can fix it using a <a href="https://transform.tools/html-to-jsx" 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">converter</a>:#thedivisor#Read <strong class="font-bold"><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/writing-markup-with-jsx">Writing Markup with JSX</a></strong> to learn how to write valid JSX.