Templates-Estilos-Lógica

Ejemplo

/-css
  /-modal.css
  /-timer.css
/-html
  /-modal.html
  /-timer.html
/-js
  /-modal.js
  /-timer.js

.Modal { ... }

.Modal-title { ... }

.Modal-content { ... }

<template id="modal">
  <div class="Modal">
    <h2 class="Modal-title">
      {{title}}
    </h2>
    <section class="Modal-content">
      {{content}}
    </section>
  </div>
</template>

function modal(
  title,
  content
) { ... }

modal(
  'Reloj',
  timer(
    new Date() + 1000
  )
);

¿Qué es un componente?

Componentes

Ejemplo

/-components
  /-modal
    /-logic.js
    /-styles.css
    /-template.html
  /-timer
    /-logic.js
    /-styles.css
    /-template.html

.Modal { ... }

.Modal-title { ... }

.Modal-content { ... }

<template id="modal">
  <div class="Modal">
    <h2 class="Modal-title">
      {{title}}
    </h2>
    <section class="Modal-content">
      {{content}}
    </section>
  </div>
</template>

function modal(
  title,
  content
) { ... }

modal(
  'Reloj',
  timer(
    new Date() + 1000
  )
);

Componentes de React

Ejemplo

/-components
  /-Modal.jsx
  /-Timer.jsx

function Modal({ title, children }) {
  return (
    <div style={styles.modal}>
      <h2 style={styles.title}>
        {props.title}
      </h2>
      <section style={styles.content}>
        {props.children}
      </section>
    </div>
  );
}

const styles = {
  modal: { ... },
  title: { ... },
  content: { ... },
};

render(
  <Modal title="Reloj">
    <Timer
      time={new Date() + 1000}
    />
  </Modal>,
  document.body
);