React Conceitos Básicos- Components, Props, State

1. Components

Components in React são blocos de construção independentes que podem ser reutilizados. Eles são divididos em elementos de interface do usuário menores e podem ser combinados para formar arquivos components. Por exemplo, um aplicativo pode ter components como Header, Sidebar e Content. Cada componente tem suas próprias responsabilidades e pode receber props e state exibir os dados correspondentes.

Exemplo:

// Functional Component  
function Greeting(props) {  
  return <h1>Hello, {props.name}!</h1>;  
}  
  
// Class Component  
class Greeting extends React.Component {  
  render() {  
    return <h1>Hello, {this.props.name}!</h1>;  
  }  
}

2. Props

Props in React são valores transmitidos components de fora. Eles ajudam a passar dados de pai components para filho components. Props são somente leitura e não podem ser alterados dentro do componente. Para usar props, passamos valores para os atributos do componente e os usamos na parte da interface do usuário.

Exemplo:

function Greeting(props) {  
  return <h1>Hello, {props.name}!</h1>;  
}  
  
ReactDOM.render(<Greeting name="John" />, document.getElementById('root'));

3. State

State in React são dados mutáveis ​​que podem ser alterados dentro de um componente. Cada componente pode ter seu próprio state para armazenar e gerenciar dados dinâmicos. Quando as state alterações, React atualiza automaticamente a interface do usuário correspondente. State é gerenciado apenas na classe components e é inicializado no construtor do componente. Para atualizar o state, usamos o State método `set()`.

Exemplo:

class Counter extends React.Component {  
  constructor(props) {  
    super(props);  
    this.state = { count: 0 };  
  }  
  
  increment() {  
    this.setState({ count: this.state.count + 1 });  
  }  
  
  render() {  
    return( 
      <div>  
        <p>Count: {this.state.count}</p>  
        <button onClick={() => this.increment()}>Increment</button>  
      </div>  
   );  
  }  
}