Rescreva essa parte do artigo com as seguintes condições:

1. Não elimine NENHUMA informação dada no artigo. 
2; Conceitos ou referências devem ser mantigos em inglês. 
3; Apenas transcreva o artigo para português SUPER SIMPLES para crianças, ou seja, sem palavras complicadas. 
4. Adicione títulos e sub-títulos quando necessário. 
"Rendering Techniques
React Course
Introduction
Now that we have learned how JSX works and how to write it, this lesson will cover how we can render multiple elements and conditionally render UI in JSX.

Lesson overview
This section contains a general overview of topics that you will learn in this lesson.

Render a list of elements/components in JSX.
Conditionally render UI.
Rendering a list of elements in JSX
Let us say we want to create a component that lists multiple animals:

function App() {
  return (
    <div>
      <h1>Animals: </h1>
      <ul>
        <li>Lion</li>
        <li>Cow</li>
        <li>Snake</li>
        <li>Lizard</li>
      </ul>
    </div>
  );
}
It is perfectly acceptable, but what if we want to render more than just four? It can be tedious and long, and most of the time, we will be dealing with a data structure (like a list) rather than hard-coding each animal. You have previously learned that we can embed expressions inside JSX with curly braces. So let us do just that:

function App() {
  const animals = ["Lion", "Cow", "Snake", "Lizard"];

  return (
    <div>
      <h1>Animals: </h1>
      <ul>
        {animals.map((animal) => {
          return <li key={animal}>{animal}</li>;
        })}
      </ul>
    </div>
  );
}
We define an array called animals. Now inside our JSX, we use map to return a new array of li elements, adding animal as its text. It should now render the same as the previous snippet we wrote. This is because JSX has the ability to automatically render arrays. The following code is identical:

function App() {
  const animals = ["Lion", "Cow", "Snake", "Lizard"];
  const animalsList = animals.map((animal) => <li key={animal}>{animal}</li>)

  return (
    <div>
      <h1>Animals: </h1>
      <ul>
        {animalsList}
      </ul>
    </div>
  );
}
You may be curious as to what the key is in our <li> element. We will dive into how keys work in the next lesson. But, to explain briefly, it is to let React know the identity of each element in the list. React must know this information if you are dealing with a dynamic list where you add or remove elements. Since we are only dealing with a static list, it does not matter for now.

Rendering a list of components in JSX
We will use props here, and you will learn more about them in a future lesson. For now, you just need to know that props are arguments that are passed into components. We will just be writing a short implementation.

function ListItem(props) {
  return <li>{props.animal}</li>
}

function List(props) {
  return (
    <ul>
      {props.animals.map((animal) => {
        return <ListItem key={animal} animal={animal} />;
      })}
    </ul>
  );
}

function App() {
  const animals = ["Lion", "Cow", "Snake", "Lizard"];

  return (
    <div>
      <h1>Animals: </h1>
      <List animals={animals} />
    </div>
  );
}
We have moved our <ul> element to a different component called <List />. It still returns the <ul> element, but we can do a lot more with it as a component.

This component accepts a props which is an object containing the animals that we defined as a property when we wrote <List animals={animals} />. Do note that you can name it anything, for example, <List animalList={animals} />. You will still need to pass the animals to the property, but now you will use props.animalList instead of props.animals.

We have also created a different component for the <li> element called <ListItem />, which also accepts props, and uses props.animal to render the text. It should now render the same thing.

“Missing in props validation”
You may notice squiggly lines under your props, for example, under animal inside the <ListItem /> component above.

Hovering over these will tell you they are missing in props validation. For now, this can safely be ignored as it is just a default ESLint rule warning about prop types, something that will be covered later in the course.

You may want to turn off this rule by adding the following to your eslint.config.js file:

  rules: {
    // Your other rules
    "react/prop-types": "off"
  }
Conditionally rendering UI
Let us make some decisions within our component. What if we only want to render an animal that starts with the letter L? To make these decisions, we would use some sort of conditional expression. Let us continue using the code above, but for brevity’s sake, we will be removing the <ListItem /> component.

Using the ternary operator
One way to conditionally render an element is with a ternary operator, using a boolean value to decide what to render:

function List(props) {
  return (
    <ul>
      {props.animals.map((animal) => {
        return animal.startsWith("L") ? <li key={animal}>{animal}</li> : null;
      })}
    </ul>
  );
}

function App() {
  const animals = ["Lion", "Cow", "Snake", "Lizard"];

  return (
    <div>
      <h1>Animals: </h1>
      <List animals={animals} />
    </div>
  );
}"