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.

      <em>Components</em> are one of the core concepts of React. They are the foundation upon which you build user interfaces (UI), which makes them the perfect place to start your React journey!#thedivisor#<li class="leading-relaxed mb-1">What a component is</li>
<li class="leading-relaxed mb-1">What role components play in a React application</li>
<li class="leading-relaxed mb-1">How to write your first React component</li>#thedivisor#On the Web, HTML lets us create rich structured documents with its built-in set of tags 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">&lt;h1&gt;</code> and <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;li&gt;</code>:#thedivisor#This markup represents this article <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;article&gt;</code>, its heading <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;h1&gt;</code>, and an (abbreviated) table of contents as an ordered list <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;ol&gt;</code>. Markup like this, combined with CSS for style, and JavaScript for interactivity, lies behind every sidebar, avatar, modal, dropdown—every piece of UI you see on the Web.#thedivisor#React lets you combine your markup, CSS, and JavaScript into custom “components”, <strong class="font-bold">reusable UI elements for your app.</strong> The table of contents code you saw above could be turned into 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">&lt;TableOfContents /&gt;</code> component you could render on every page. Under the hood, it still uses the same HTML tags 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">&lt;article&gt;</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">&lt;h1&gt;</code>, etc.#thedivisor#Just like with HTML tags, you can compose, order and nest components to design whole pages. For example, the documentation page you’re reading is made out of React components:#thedivisor#As your project grows, you will notice that many of your designs can be composed by reusing components you already wrote, speeding up your development. Our table of contents above could be added to any screen with <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;TableOfContents /&gt;</code>! You can even jumpstart your project with the thousands of components shared by the React open source community like <a href="https://chakra-ui.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">Chakra UI</a> and <a href="https://material-ui.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">Material UI.</a>#thedivisor#Traditionally when creating web pages, web developers marked up their content and then added interaction by sprinkling on some JavaScript. This worked great when interaction was a nice-to-have on the web. Now it is expected for many sites and all apps. React puts interactivity first while still using the same technology: <strong class="font-bold">a React component is a JavaScript function that you can <em>sprinkle with markup</em>.</strong> Here’s what that looks like (you can edit the example below):#thedivisor#And here’s how to build a component:#thedivisor#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">export default</code> prefix is a <a href="https://developer.mozilla.org/docs/web/javascript/reference/statements/export" 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">standard JavaScript syntax</a> (not specific to React). It lets you mark the main function in a file so that you can later import it from other files. (More on importing in <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>!)