React – Definição e Atribuição

Um componente do React é uma função. Essa função aceita parâmetros durante a sua declaração que permitem personalizar o retorno dinamicamente durante a renderização na tela. A escrita de um componente segue as regras do javascript, com as particularidades de obrigatoriamente ter a primeira letra de seu nome em maíuscula e retornar um objeto JSX no final. O parâmetro passado durante a declaração do componente é DEFINIDO através de um objeto. A convenção do React nomeou esse objeto de "props", mas é possível utilizar qualquer nome, caso isso seja realmente necessário (pois vai fugir do proposto pelo desenvolvedor, apesar de não ser uma regra). Para escrever um componente React utiliza-se a seguinte sintaxe: function nome (props) {Código} Também é possível e muito comum se utilizar da seguinte convenção (utilizando arrow function): const nome = (props) => {Código} Como o React espera que o parâmetro "props" seja um objeto, será apresentado um erro caso a ATRIBUIÇÃO da propriedade não seja feita como uma chave do objeto. Por exemplo, se eu criar um componente declarando a existência de props e durante a atribuição eu não informar uma chave para receber o valor informado na utilização do componente, o React vai retornar um erro pois o retorno será entendido como um objeto inteiro. Situação: Vou criar um componente que vai retornar uma "div" contendo o nome informado na sua propriedade. function EscreverNome (props){ return <div>{props}</div> } const App = () =>{ return <EscrverNome props="Henrique" /> } Esse código vai gerar um erro pois para o React, "props" é um objeto inteiro, enquanto ele precisa de uma chave do objeto para atribuir o valor recebido durante a utilização do componente. function EscreverNome (props){ return <div>{props.nome}</div> } const App = () =>{ return <EscrverNome nome="Henrique" /> } Esse código vai funcionar, pois o React vai conseguir atribuir o valor declarado como propriedade do componente durante a sua utilização para a chave informada.