📦 Declaraciones y estructuras JSX para construir interfaces dinámicas

📦 Declaraciones y estructuras JSX para construir interfaces dinámicas

En JSX, las declaraciones y estructuras nos permiten organizar la interfaz de manera clara y reactiva. Podemos usar variables, funciones y expresiones dentro del JSX para construir interfaces dinámicas según el estado o las props.

---

1️⃣ Declaraciones de variables dentro de JSX

Podemos declarar variables dentro del componente para usarlas en el JSX:

function Welcome(props) {
  const name = props.name;
  const greeting = `Hola, ${name}! Bienvenido a React.`;

  return <h1>{greeting}</h1>;
}

ReactDOM.createRoot(document.getElementById('root')).render(<Welcome name="Jorge" />);
  

Hola, Jorge! Bienvenido a React.

---

2️⃣ Usando funciones dentro de JSX

Las funciones nos permiten encapsular lógica y retornar JSX dinámico:

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

function UserGreeting(props) {
  const user = { firstName: 'Ana', lastName: 'García' };
  return <h2>¡Hola, {formatName(user)}!</h2>;
}

ReactDOM.createRoot(document.getElementById('root')).render(<UserGreeting />);
  

¡Hola, Ana García!

---

3️⃣ Estructuras condicionales y ternarios

Para renderizar distintos elementos según la condición, podemos usar operadores ternarios:

function StatusMessage(props) {
  return (
    <div>
      <p>{props.isOnline ? "Usuario en línea" : "Usuario desconectado"}</p>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<StatusMessage isOnline={true} />);
  

Usuario en línea

---

4️⃣ Renderizado de listas dinámicas

Podemos usar map() para crear listas dinámicas basadas en arrays:

function TaskList(props) {
  const tasks = ["Aprender React", "Practicar JSX", "Crear componentes"];
  return (
    <ul>
      {tasks.map((task, index) => <li key={index}>{task}</li>)}
    </ul>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<TaskList />);
  

• Aprender React
• Practicar JSX
• Crear componentes

---

5️⃣ Combinando estructuras y lógica

Podemos combinar variables, funciones y condicionales para crear interfaces altamente dinámicas:

function Dashboard(props) {
  const user = { name: "Jorge", points: 85 };

  function getLevel() {
    if (user.points >= 100) return "Avanzado";
    if (user.points >= 50) return "Intermedio";
    return "Principiante";
  }

  return (
    <div>
      <h1>Hola, {user.name}</h1>
      <p>Nivel: {getLevel()}</p>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<Dashboard />);
  

Hola, Jorge
Nivel: Intermedio

💡 Con estas estructuras podemos mantener el código limpio, legible y altamente dinámico.

← Volver al índice