Crear template de personajes

En VSC para hacer mas facil escribir el HTML dentro de un .js, abajo a la derecha pueden cambiar el modo de lenguaje a “HTML”

Si es verdad que el profe va un poco rápido, pero también al ver este curso dentro de la ruta de Arquitectura Frontend podemos observar que está ubicado casi al último en la sección de Avanzado por lo cual se supone que tuvimos que haber pasado por 22 cursos antes que este. Deduzco que los comentarios más recientes son de estudiantes que quieren completar el desafío Agente punto y coma incluyéndome, pero para el nivel que se supone que debemos tener se entiende que no haya la necesidad de pararse a explicar ciertos temas. Muy buena la clase por cierto

Instalen la extensión es6-string-html en Visual Studio Code para obtener el siguiente resultado.

solo agreguen /* html */

Con todo respeto esto no parece un curso si no una demostración, al menos hasta el video 5 que es por donde voy. Una cosa es saber mucho, dominar un tecnologia y otra ser pedagogo, creo que el triunfo de la plataforma no esta en el dinero fondeado, ni en la cantidad de usuarios, si no en la calidad de sus educandos.

Excelente clase y excelente curso, no está de más que a medida que se construyen los templates se haga una referencia visual a lo que se está construyendo (eso sólo lo vimos al principio del curso).

const Character = () => {
    const view = `
    <div class="Characters-inner">
        <article class="Character-card">
            <img src="image" alt"name">
            <h2>Name</h2>
        </article>
        <article class="Character-card">
            <h3>Epsiodes:</h3>
            <h3>Status:</h3>
            <h3>Species:</h3>
            <h3>Gender</h3>
            <h3>Origin:</h3>
            <h3>Last Location:</h3>
        </article>
    </div>
    `;
    return view;
};

export default Character;```

Definitivamente se necesita seguir la carrera de Arquitectura Frontend para entender este curso y eso es lo que haré luego de completar el desafió para ser Agente Puntoycoma!!

Es cierto que para entender el curso es necesario conocer al menos los conceptos basicos como SPA, Babel, Npm, WebPack, etc. y si es un curso practico pero muy completo tomando en cuenta que cubre la instalación de dependencias, configuración del entorno de trabajo y el recorrido realizando el proyecto.

Siento que va rápido pero tras hacer los cursos de javascript y front-end se entiende más. Me falta el de Webpack para entender lo de ese archivo webpack.config.js de resto vamos bien pero el profesor va algo rápido.

Además alguno se puede perder en que estamos haciendo la plantilla para las páginas que luego llenaremos con la información de los personajes que traeremos desde una API.

Resumen de la clase:

Creando Template Personajes

Debemos crear una carpeta llamada Templates donde estaran los templates que se van a repetir en nuestra pagina.

Header.js

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;

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;

Tome el curso practico de React js y sinceramente siento que ahi se explica mucho mejor incluso la parte de webpack la entendi mejor que en el propio curso de Webpack.

Yo estoy siguiendo la ruta de Fronted y la verdad si entendi seria bueno que miraran primero el curso de jquery a JavaScript de Leonidas, pero seria bueno que el profe explicara un poco ademas habla muy rapido, por lo menos hubiera mostrado que estamos creando los personajes con sus caracteristicas para cuando llamemos la api, en las clases anteriores igual hay cosas que seria bueno que las explicara no le toma mucho tiempo.

Hola! no alcancé a notar si lo explicaban en el video, ustedes saben el porque de crear plantillas html en un .js y no directamente en un archivo html? 😮, gracias de antemano 😄

Hasta ahora, ha sido un curso meramente práctico. En donde se ha podido ver qué es lo que falta por aprender (JS Vanilla, npm, WebPack)
Toca ir a reforzar esos conocimientos!

De acuerdo. Hasta ahora el profesor parece leyendo un guion y no enseñando.

Siento que no tiene mucho sentido escribir tanto código sin ir mirando como se va renderizando todo, pues aunque se tengan claros los conceptos de html, clases ids la gracia de ver esto en video no es solo ver un monton de instrucciones en un editor, sino también ver como se representa eso en la pantalla, al fin y al cabo se trata de frontend no?

Si alguién está trabajando con una versión superior a 5.0.0 de webpack y tiene el siguiente error.

internal/modules/cjs/loader.js:834
  throw err;
  ^

Lo único que tiene que hacer el modificar el script de la siguiente manera y ¡voilá!

"scripts": {
  "start": "webpack serve"
}```

Dicen que habla rapido y yo pongo a 2x la velocidad del video XD.

Eh yo tambien quiero el plugin para que se auto genere el html en archivos js, si me lo pudieran facilitar 🥺

Muy flayero este curso!!!

Porque se le coloca el # a la ruta del about?

VSC pueden cambiar entre lenguajes con Ctrl + k m se abre arriba una “pestañita” y escriben el lenguaje que quieran.

recuerden Ctrl + k (todo junto) y despues la m (sin presionar Ctrl)

Saludos 😃

Hay una extensión en VS Code que se llama “Auto-close tag” que cierra automaticamente los tags HTML-XML y también funciona dentro de **template literals **de JS

Alguien sabe que tema/plugin esta usando el profe Oscar en VSC para que le muestre el código brillante?

Continuamos. Gracias por el plugin compartido.

const Header = () => {
    const view = `
    <div class="Hearder-main">
        <div class="Header-logo">
            <h1>
                <a href="/">
                    100tifi.co
                </a>
            </h1>
        </div>
        <div class="Header-nav">
            <a href="#/about/">
                About
            </a>
        </div>
    </div>
    `;
    return view
}

export default Header;```

Grandiosa explicación, el código totalmente legible 😁

Es increible lo facil que se hace cuando ves el curso por segunda vez

Abajo a la derecha dice javascript, busque arriba html lo seleccioné y me deja escribir de mejor forma html.

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;

el profesor va muy rápido, es difícil seguirlo y no porque no tenga conocimientos, cualquiera que estemos aquí puede hacer unos cuantos Html, pero mientras nosotros escribimos y vemos el video uno se queda atrás toca estar pasusando y hace desconcentrar o tener que regresar el video en todo momento, el profesor con su experiencia escribe mas rápido que la mayoría, aparte ya tiene la maquetación que va a hacer en su cabeza entonces es mas rápido para el escribir,

para proximos cursos estaria bueno que escribiera un poco mas lento, no hace falta que explique porque html se supone que ya debemos saberlo,
pero si que nos de tiempo de ver lo que esta haciendo y escribirlo,

Estaría bueno poder hacer este curso… EL problema con los paquetes de npm lo complica bastante.

cómo siempre, a las prisas y sólo dando instrucciones, nada de explicar ,que caso tiene solo armar la app sin entender nada ???

const Character = ()=>{
    const view = `
    <div  class="Characters-inner">
        <article class="Chracters-card">
            <img src="image" alt="name">
            <h2>Name</h2>
        </article>
        <article class="Characters-card">
            <h3>Episodes:</h3>
            <h3>Status:</h3>
            <h3>Species:</h3>
            <h3>Gender:</h3>
            <h3>Origin:</h3>
            <h3>Last Location:</h3>
        </article>
    </div>
    `;
    return view;
}

export default Character;

Si estan utilizando WebStorm como IDE, les dejo un truco para identar o formatear el HTML literal en un archivo .js :

Simplemente deben agregar el comentario //language=HTML una línea antes de donde van a escribir su html literal. Ejemplo:

const Character = () => {
    //language=HTML
    const view = `
    	<div class="Character-inner"> 
		...
	</div>
	.... `;
};

Character.js Code:

const Character = () => {
    const view = `
    <div class="Characters-inner">
        <article class="Characters-card">
            <img src="images" alt="name">
            <h2>
                Name
            </h2>
        </article>
        <article class="Characters-card">
            <h3>
                Episodes:
            </h3>
            <h3>
                Status:
            </h3>
            <h3>
                Species:
            </h3>
            <h3>
                Gender:
            </h3>
            <h3>
                Origin:
            </h3>
            <h3>
                Last location:
            </h3>
        </article>
    </div>
    `;
    
    return view;
}

export default Character;

esta clase es excelente, solo que al inicio no se entiende porque hay detalles que no se explican pero basicamente se trabaja con una carpeta main.js que tiene que ver con el manejo del BOM, otro que llamaremos index.js que es el diccionario o mejor dicho se crea un objeto donde se importara todas las paginas y se establecera una relacion con key: value y otra carpeta que seria el router.js donde sucede la magia, aqui se establece la relacion entre el main.js y el index.js y puede funcionar con un switch por ejemplo, no se si sea de ayuda

Template Header

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/">
                About
            </a>
        </div>
    </div>`
    return view;
}

export default Header;

Template Character

const Characer = () => {
    const view = `
        <div class="Characters-inner">
            <article class="Characters-card">
                <img src="image" alt="name">
                <h2>Name</h2>
            </article>
            <article class="Characters-card">
                <h3>Episodes:</h3>
                <h3>Status:</h3>
                <h3>Species:</h3>
                <h3>Gender:</h3>
                <h3>Origin:</h3>
                <h3>Last Location:</h3>
            </article>
        </div>
    `;
    return view;
}

export default Characer;

Para poder editar facilmente el html y js les recomiendo cambiar el lenguaje a JSX en la barra de abajo en VS code

En VSCode pueden instalar un plugin llamado lit-html

ext install bierner.lit-html

Esto ayuda mucho a poder tratar el html dentro de los template literals

f

por qué utilizar un

<div class="Header-main"></div>

en lugar de utilizar una etiqueta con valor semántico como ser

<header></header>

???

Muy buenas explicaciones y el código es totalmente claro, aquí se ve la habilidad y la memoria que tienes para escribir las etiquetas sin la ayuda de los editores de código.

const Character = () => {
    const view = `
<div class="Characters-inner">
    <article class="Characters-card">
        <img src="image" alt="name">
        <h2>Name</h2>
    </article class="Character-card">
        <h3>Episodes:</h3>
        <h3>Status</h3>
        <h3>Species</h3>
        <h3>Gender</h3>
        <h3>Origin</h3>
        <h3>Last Location</h3>
    <article>

    </article>
</div>`;
    return view;

};
export default Character;

• Crear el template del header
• Crear la pagina de character

La creación de los componentes tiene mucha similitud con React.

**Nota: ** esas comillas se sacan con alt + 96

codigo ASCII

esto de templates en laravel yo los uso como layouts

todo entendido 😄

Me encanta!

Sigamos! Que interesante este curso!

me sige saliendo error

Genial 😃

Es un curso muy interesante. Sigamos.

Pueden cambiar el modo de lenguaje del archivo de “JavaScript” a “JAVASCRIPT REACT” en la parte inferior derecha de su VSC para poder usar los autocompletados de Html en su archivo .js y a la ves tener los autocompletados de javascript en el archivo.

Muy buena clase, todo ok hasta el momento 😃

Genial, un poco rapido pero creo que se entiendo lo que vamos haciendo, me motiva mucho ver los comentarios de compañeros que han repetido el curso 💪💪

const Character = () => {
    const view = `
    <div className="Characters-inner">
        <article className="Characters-card">
            <img src="image" alt="name-image"/>
            <h2>Name</h2>
            <article className="Characters-card">
                <h3>Episodes:</h3>
                <h3>Status:</h3>
                <h3>Species:</h3>
                <h3>Gender:</h3>
                <h3>Origin:</h3>
                <h3>Last location:</h3>
            </article>
        </article>
    </div>
    `;
    return view;
}

export default Character;

un ataja en VSC para poner clases dentro de una etiqueta es:
.Character-inner -> esto creara un DIV con esa clase

Para un article por ejemplo:
article.Characters-card -> crea un article con esa clase.

Van a Setting (Ctrl + ,) > Extensions > Emmet > "Edit in settings.json y agregan:

"emmet.includeLanguages": {
        "javascript": "html"
    },

Y con eso les tomará los atajos del html dentro de javascript
ej: article.Character-card>h3*4

El curso no tienen repositorio?

Increíble clase, estoy recordando muchas cosas, gracias Oscar

Alguien sabe por que me renderiza asi:

Mi codigo es :

/* eslint-disable no-tabs */
const Header = () => {
  const view = `
<div class="Hearder-main">
        <divclass="Header-logo">
            <h1>
                <a 	href="#/">
                    Rick and Morty
                </a>
            </h1>
        </div>
        <div class="Header-nav">
            <a href="#/about/">
                About
            </a>
        </div>
</div>    `;
  return view;
};

export default Header;

por si utilizan emmet con estas dos lineas pueden generar todo el template solo es copiar una y darle tab y despues las siguiente y listo
article.Characters-card>img[src=“image”, alt=“name”]>h2{Name}
article.Characters-card>h3{Episodes:}+h3{Status:}+h3{Species:}+h3{Gender:}+h3{Origin:}+h3{“Last location:”}

Tengo una duda en el caso de las estructuras de HTML que se hace con los template literals, ¿no es conveniente usar tags semánticos en vez de usar div’s? es decir usar <main></main> en vez de <div class=“main”></div>.

¿En este caso no se usa HTML semántico? ¿Todo se crea usando divs?

si el profe puso en español mode … como carajos lefunciono en la clase pasada…yo tengo un typo y no se como arreglarlo…ni el profe contesta 😦

Hola, alguien me podría explicar por favor la diferencia entre crear los archivos en la carpeta pages o la carpeta template, no me quedo muy claro, gracias ☺️

¿La parte de los templetes es el equivalente a un componente en react?

Si tienen problemas al momento de codear fácilmente pueden bajar la velocidad de reproducción a 0.85x, se entiende un poco mejor y al codear da más tiempo.