El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Componentes y Props

Siguiente ►
►

Introducción

En React Native, los componentes son los bloques de construcción fundamentales de cualquier aplicación. Los componentes permiten dividir la interfaz de usuario en piezas independientes, reutilizables y manejables. Los "props" (abreviatura de "properties") son la forma en que se pasan datos de un componente a otro.

Conceptos Clave

  1. Componentes:

    • Componentes Funcionales: Son funciones de JavaScript que aceptan props como argumento y devuelven elementos de React.
    • Componentes de Clase: Son clases de ES6 que extienden de React.Component y tienen un método render que devuelve elementos de React.

  2. Props:

    • Son datos que se pasan de un componente padre a un componente hijo.
    • Son inmutables, lo que significa que no pueden ser modificadas por el componente que las recibe.

Componentes Funcionales

Los componentes funcionales son la forma más sencilla de definir un componente en React Native. Aquí hay un ejemplo básico:

import React from 'react';
import { Text, View } from 'react-native';

const Greeting = (props) => {
  return (
    <View>
      <Text>Hello, {props.name}!</Text>
    </View>
  );
};

export default Greeting;

En este ejemplo:

  • Greeting es un componente funcional que acepta props.
  • props.name se utiliza para mostrar el nombre pasado al componente.

Componentes de Clase

Los componentes de clase son más complejos y se utilizan cuando se necesita manejar el estado o los métodos del ciclo de vida. Aquí hay un ejemplo:

import React, { Component } from 'react';
import { Text, View } from 'react-native';

class Greeting extends Component {
  render() {
    return (
      <View>
        <Text>Hello, {this.props.name}!</Text>
      </View>
    );
  }
}

export default Greeting;

En este ejemplo:

  • Greeting es un componente de clase que extiende React.Component.
  • this.props.name se utiliza para acceder a las props.

Pasando Props

Las props se pasan a los componentes de la siguiente manera:

import React from 'react';
import { View } from 'react-native';
import Greeting from './Greeting';

const App = () => {
  return (
    <View>
      <Greeting name="Alice" />
      <Greeting name="Bob" />
    </View>
  );
};

export default App;

En este ejemplo:

  • Greeting se utiliza dos veces con diferentes valores de name.
  • Cada instancia de Greeting recibe un valor diferente para props.name.

Ejercicio Práctico

Ejercicio 1: Crear un Componente de Bienvenida

  1. Crea un nuevo componente funcional llamado Welcome que acepte una prop name y muestre un mensaje de bienvenida.
  2. Usa el componente Welcome en tu aplicación principal y pásale diferentes nombres.

Solución

// Welcome.js
import React from 'react';
import { Text, View } from 'react-native';

const Welcome = (props) => {
  return (
    <View>
      <Text>Welcome, {props.name}!</Text>
    </View>
  );
};

export default Welcome;

// App.js
import React from 'react';
import { View } from 'react-native';
import Welcome from './Welcome';

const App = () => {
  return (
    <View>
      <Welcome name="Alice" />
      <Welcome name="Bob" />
    </View>
  );
};

export default App;

Ejercicio 2: Crear un Componente de Perfil

  1. Crea un componente de clase llamado Profile que acepte props name y age.
  2. Muestra el nombre y la edad en el componente Profile.
  3. Usa el componente Profile en tu aplicación principal y pásale diferentes valores para name y age.

Solución

// Profile.js
import React, { Component } from 'react';
import { Text, View } from 'react-native';

class Profile extends Component {
  render() {
    return (
      <View>
        <Text>Name: {this.props.name}</Text>
        <Text>Age: {this.props.age}</Text>
      </View>
    );
  }
}

export default Profile;

// App.js
import React from 'react';
import { View } from 'react-native';
import Profile from './Profile';

const App = () => {
  return (
    <View>
      <Profile name="Alice" age={25} />
      <Profile name="Bob" age={30} />
    </View>
  );
};

export default App;

Conclusión

En esta sección, hemos aprendido sobre los componentes y las props en React Native. Los componentes son esenciales para construir interfaces de usuario modulares y reutilizables, mientras que las props permiten pasar datos entre componentes. Con estos conceptos, estás listo para construir aplicaciones más complejas y dinámicas.

En el próximo módulo, exploraremos los componentes básicos y el estilizado en React Native.

◄ Anterior
◄
Siguiente ►
►
El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados