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