react-from-zero/08-nested-components.html at master · andre-motta/react-from-zero

44 lines (34 loc) · 1.13 KB

<!doctype html>

<title>08 Componentes Aninhados - React do Zero</title>

// Componentes, como elementos, podem ser aninhados

// para isso, a propriedade filho é usada dentro do componente

// Esse componente apenas envelopa seus filhos em um elemento <li>

function Item(props) {

return <li>{props.children}</li>

}

// Esse componente envelopa seus filhos em um elemento <ul>

function List(props) {

return <ul>{props.children}</ul>

}

// Se a <List> for criada sem filhos ela recee um filho default

List.defaultProps = {

children: <Item>Empty</Item>

}

// Agora renderizamos duas <List>, com e sem Itens

var reactElement =

<div>

<List/>

<List>

<Item>First</Item>

<Item>Second</Item>

<Item>Third</Item>

</List>

</div>

var renderTarget = document.getElementById("app")

ReactDOM.render(reactElement, renderTarget)

</script>

Provide feedback