Creación de Templates y Secciones en JavaScript
Clase 6 de 16 • Curso de Single Page Application con JavaScript Vanilla
Resumen
Debemos crear una carpeta llamada Templates donde estarán los templates que se van a repetir en nuestra página.
const Header = () => {
const view = `
<div class="Header-main">
<div class="Header-logo">
<h1>
<a href="/">
100tifi.co
</a>
</h1>
</div>
<div class="Header-nav">
<a href="#/about/">
</a>
</div>
</div>
`
return view;
}
export default Header;
Crea un nuevo archivo en el código
Luego nos movemos la carpeta page y creamos el archivo Character.js
const Character = () => {
const view = `
<div class="Character-inner">
<article class="Characters-card">
<img src="image" alt="name">
</article>
<h2>Name</h2>
<article class="Character-card">
<h3>Episode:</h3>
<h3>Status:</h3>
<h3>Species:</h3>
<h3>Gender:</h3>
<h3>Origin:</h3>
<h3>Last Location:</h3>
</article>
</div>
`
return view;
}
export default Character;
Contribución creada con los aportes de: Jesus Federico David Herrera.