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#From the example app, we can build the render tree described above.#thedivisor#The tree consists of nodes, and each node stands for a component. <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>, <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">FancyText</code>, <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">Copyright</code>, for example, are all nodes in our tree.#thedivisor#The root node in a React render tree is the <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#the-root-component-file">root component</a> of the app. In this case, the root component 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">App</code>, and it is the first component that React renders. Each arrow in the tree goes from a parent component to a child component.#thedivisor#You’ll see in the render tree above that there are no HTML tags mentioned for each component. This is because the render tree only consists of React <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#components-ui-building-blocks">components</a>.#thedivisor#React, as a UI framework, is platform agnostic. On react.dev, we show examples that render to the web, using HTML markup as its UI components. But a React app can also render to mobile or desktop platforms, which might use different UI components like <a href="https://developer.apple.com/documentation/uikit/uiview" 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">UIView</a> or <a href="https://learn.microsoft.com/en-us/dotnet/api/system.windows.frameworkelement?view=windowsdesktop-7.0" 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">FrameworkElement</a>.#thedivisor#These platform UI components are not part of React. React render trees can help us understand our React app, no matter what platform the app renders on.#thedivisor#A render tree shows a single render pass of a React application. With <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">conditional rendering</a>, a parent component can render different children depending on the data received.#thedivisor#We can change the app to conditionally render either an inspirational quote or a color.#thedivisor#With conditional rendering, in different renders, the render tree can show different components.#thedivisor#In this case, depending on what <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">inspiration.type</code> is, we could 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;FancyText&gt;</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">&lt;Color&gt;</code>. The render tree can be different for each render pass.