React Conceptos Básicos- Components, Props, State

1. Components

Components son React bloques de construcción independientes que se pueden reutilizar. Se dividen en elementos de interfaz de usuario más pequeños y se pueden combinar para formar archivos components. Por ejemplo, una aplicación puede tener components como Header, Sidebar y Content. Cada componente tiene sus propias responsabilidades y puede recibir props y state mostrar los datos correspondientes.

Ejemplo:

// 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 son valores pasados components ​​desde el exterior. Ayudan a pasar datos de padre components a hijo components. Props son de solo lectura y no se pueden cambiar dentro del componente. Para usar props, pasamos valores a los atributos del componente y los usamos en la parte de la interfaz de usuario.

Ejemplo:

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

3. State

State in React son datos mutables que se pueden cambiar dentro de un componente. Cada componente puede tener el suyo propio state para almacenar y administrar datos dinámicos. Cuando los state cambios, React actualiza automáticamente la interfaz de usuario correspondiente. State se administra solo en clase components y se inicializa en el constructor del componente. Para actualizar el state, usamos el State método `set()`.

Ejemplo:

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>  
   );  
  }  
}