No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Crear template de personajes

6/16
Recursos

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.

Aportes 73

Preguntas 5

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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

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 鈥減esta帽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

que extension autocompleta dentro de un template literal?

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 鈥淛avaScript鈥 a 鈥淛AVASCRIPT 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=鈥渋mage鈥, alt=鈥渘ame鈥漖>h2{Name}
article.Characters-card>h3{Episodes:}+h3{Status:}+h3{Species:}+h3{Gender:}+h3{Origin:}+h3{鈥淟ast 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鈥檚? es decir usar <main></main> en vez de <div class=鈥渕ain鈥></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鈥o tengo un typo y no se como arreglarlo鈥i 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.