Estos cursos cortitos y prácticos son fantásticos! Permiten poner en práctica todo lo que se aprende en cursos teóricos más largos.
Development
¿Qué vamos a aprender?
Introducción a SPA
Configurar el entorno de trabajo
Preparar Webpack
Templates
Crear el Home
Crear template de personajes
Crear página de error 404
Router
Crear rutas del sitio
Conectar las rutas con los templates
Implementar y probar las conexiones
Fetch Data
Obtener personajes con la función de llamado a la API
Conectar la función con la descripción de personajes
Deploy
Configurar CSS para administrar elementos visuales
Github Pages
Crear el script para enviar a producción
Repaso, recomendaciones y tips para seguir aprendiendo
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Aportes 37
Preguntas 9
Estos cursos cortitos y prácticos son fantásticos! Permiten poner en práctica todo lo que se aprende en cursos teóricos más largos.
Aquí se podrían desestructurar los datos que tenemos en el HTML y tener un código (en mi opinión) más lindo y se que se entiende más.
.
export const Character = async () => {
const id = getHash();
const character = await getData(id);
const { image, name, episode, status, species, gender, origin, location} = character;
const view = `
<div class="Characters-inner">
<article class="Characters-card">
<img src="${image}" alt="${name}">
<h2>${name}</h2>
</article>
<article class="Character-card">
<h3>Episodes: ${episode.length}</h3>
<h3>Status: ${status}</h3>
<h3>Species: ${species}</h3>
<h3>Gender: ${gender}</h3>
<h3>Origin: ${origin.name}</h3>
<h3>Last Location: ${location.name}</h3>
</article
</div>
`;
return view;
};
.
Más info: https://github.com/FiliSantillan/Bits#bits
Si no les llegara a funcionar que les aparezca la info del personaje verifiquen que la URL de la API tenga el / al final
const API = 'https://rickandmortyapi.com/api/character/
'```
Este curso esta muy aspero!!! Creo que este y el de Jquery a Js abren un mundo de posibilidades para practicar con apps y APIs cuando uno esta comenzando.
Bien ahí!
Les comparto un problemita con el que me crucé, al momento de dar click a algún personaje no me aparecía l oque debería y me salía este error en consola:
El problema era que a la ruta de la API le faltaba un “/”, lo lo escribía así:
Y debería ser así:
Y voilà:
Lo cierto es que sí hay un refresh cuando se hace clic en la palabra 100tifi.co que está en el Header. Para evitarlo, cambien el valor del atributo href
a #
en vez de /
:
<a href="#">100tifi.co</a>
De esta manera, el evento hashchange
, que ejecuta la función router
, es disparado.
Se continúa con el curso.
UNA HORA buscando un error de por qué no hacía fetch la data, me saltaba el catch de getData
Hasta que veo que usé comillas simples ’ ’ en vez de
Nada, eso
xd
Tenia el sgt problema: daba clic a un personaje y la URL cambiaba pero el contenido de la web no.
solucion: habia exportado los templates HOME y Character con parentesis al final y en el /routes no habia puesto los parentesis!
Los typos son hell cuando no los encuentras,jajaja pero justo cuando das con ello se vuelve el heaven, 😃
Me pueden apoyar con este error, me muestra el listado de personajes, pero al dar clic en uno especifico no muestra los detalles. Al inspeccionar el elemento me muestra estos errores la consola:
TypeError: character is undefined (main.js line 469 > eval:13:25)
Fetch Error SyntaxError: “JSON.parse: unexpected character at line 1 column 1 of the JSON data” (getData.js:12:13)
Mi archivo getData.js
const API = 'https://rickandmortyapi.com/api/character/';
const getData = async (id) => {
const apiURL = id ? '${API}${id}' : API;
try {
const response = await fetch(apiURL);
const data = await response.json();
return data;
} catch (error){
console.log('Fetch Error', error);
};
};
export default getData;
**
Mi archivo Characters.js**
import getHash from '../utils/getHash';
import getData from '../utils/getData';
const Character = async () => {
const id = getHash();
const character = await getData(id);
const view = `
<div class="Characters-inner">
<article class="Characters-card">
<img src="${character.image}" alt="${character.name}">
<h2>${character.name}</h2>
</article>
<article class="Characters-card">
<h3>Episodes: <span>${character.episode.length}</span></h3>
<h3>Status: <span>${character.status}</span></h3>
<h3>Species: <span>${character.species}</span></h3>
<h3>Gender: <span>${character.gender}</span></h3>
<h3>Origin: <span>${character.origin.name}</span></h3>
<h3>Last Location: <span>${character.location.name}</span></h3>
</article>
</div>
`;
return view;
};
export default Character;
Dejo mi repositorio en el cual podrán encontrar una rama de cada clase.
https://github.com/ivallejo/Cientifico
https://github.com/ivallejo/Cientifico/tree/descripcionpersonaje
Solo me linkea el primer personaje, los demás renderiza el nombre y la foto pero no me da acceso a los detalles.
tuve errores pero bueno se soluciono y sirvió 😄
src/pages/Character.js
import getHash from '../utils/getHash';
import getData from '../utils/getData';
const Character = async () => {
const id = getHash();
const character = await getData(id);
const view = `
<div className="Characters-inner">
<article className="Characters-card">
<img src=${character.image} alt="${character.name}"/>
<h2>${character.name}</h2>
<article className="Characters-card">
<h3>Episodes: <span>${character.episode.length} </span></h3>
<h3>Status: <span>${character.status}</span></h3>
<h3>Species: <span>${character.species}</span></h3>
<h3>Gender: <span>${character.gender}</span></h3>
<h3>Origin: <span>${character.origin.name}</span></h3>
<h3>Last location: <span>${character.location.name}</span></h3>
</article>
</article>
</div>
`;
return view;
}
export default Character;
Es cierto que frameworks y librerías como React abstraen bastante el proceso de armado de una SPA, pero me pregunto si realmente vale la pena todo el hype que generan siendo JavaScipt vainilla una opción tan poderosa y completa. Hacer este curso me demostró lo impresionante que por sí mismo puede ser JavaScript.
Lo logré hacer solo y no estuvo tan diferente
pages
character.js
import getHash from '../utils/getHash';
import getData from '../utils/getData';
const Characer = async () => {
const id = getHash();
const character = await getData(id);
const view = `
<div class="Characters-inner">
<article class="Characters-card">
<img src="${character.image}" alt="${character.name}">
<h2>${character.name}</h2>
</article>
<article class="Characters-card">
<h3>Episodes: <span>${character.episode.length}</span></h3>
<h3>Status: <span>${character.status}</span></h3>
<h3>Species: <span>${character.especies}</span></h3>
<h3>Gender: <span>${character.gender}</span></h3>
<h3>Origin: <span>${character.origin.name}</span></h3>
<h3>Last Location: <span>${character.location.name}</span></h3>
</article>
</div>
`;
return view;
}
export default Characer;
Banda estuve como 2 horas buscando un error y resulto siendo que escribi .lenght en lugar de .length en el archivo resolveRoutes.js Me quiero volver changoooo!!!
uff mi cerebro me duele :c
cuando estamos en los detalles del personaje y damos clic a link de 100tifi.co si se hace refresh. Esto es normal verdad!
porque oscar dijo que no tiene refresca. Me imagino que no tiene que refrescar para cargar los detalles !
import getHash from '../utils/getHash';
import getData from '../utils/getData';
const Character = async () => {
const id = getHash();
const character = await getData(id);
const view = `
<div class="Characters-inner">
<article class="Character-card">
<img src="${character.image}" alt"${character.name}">
<h2>${character.name}</h2>
</article>
<article class="Character-card">
<h3>Epsiodes:<span>${character.episode.length}</span></h3>
<h3>Status:<span>${character.status}</span></h3>
<h3>Species:<span>${character.species}</span></h3>
<h3>Gender:<span>${character.gender}</span></h3>
<h3>Origin:<span>${character.origin.name}</span></h3>
<h3>Last Location:<span>${character.location.name}</span></h3>
</article>
</div>
`;
return view;
};
export default Character;```
Yo vengo del curso basico de Vue y al ver este otro, se estoy sintiendo muy bien afianzando conocimientos y relacionando, ya que este es como funciona React y Vue por debajo. Excelente.
Esto está muy genial
Vamos Genial 😄
ok muy bueno el curso
SUPER !!!
Genial, todo claro.
Me encanta como va quedando ❤️
Caharacter.js
import getHash from '../utils/getHash'
import getData from '../utils/getData'
const Character = async() => {
const id = getHash();
const character = await getData(id);
const view = `
<div class="Characters-inner">
<article class="Characters-card">
<img src="${character.image}" alt=""${character.name}">
<h2>${character.name}</h2>
</article class="Character-card">
<h3>Episodes: <span>${character.episode.length}</span></h3>
<h3>Status: <span>${character.status}</span></h3>
<h3>Species: <span> ${character.species}</span></h3>
<h3>Gender: <span>${character.gender}</span></h3>
<h3>Origin: <span> ${character.origin.name}</span></h3>
<h3>Last Location : <span> ${character.location.name}</span></h3>
<article>
</article>
</div>`;
return view;
};
export default Character;```
Qué curso tan genial!!!
Genial. que gran curso, como yo lo veo es como una introducción muy básica de lo que sigue, React, Vue, Angular
Ahora debemos editar el archivo Character.js para mostrar el resultado del personaje.
import getHash from '../utils/getHash';
import getData from '../utils/getData';
const Character = async () => {
const id = await getHash();
const character = await getData(id);
const view = `
<div class="Character-inner">
<article class="Characters-card">
<img src="${character.image}" alt="${character.name}">
</article>
<h2>${character.name}</h2>
<article class="Character-card">
<h3>Episode: <span>${character.episode.length}</span></h3>
<h3>Status: <span>${character.status}</span></h3>
<h3>Species: <span>${character.species}</span></h3>
<h3>Gender: <span>${character.gender}</span></h3>
<h3>Origin: <span>${character.origin.name}</span></h3>
<h3>Last Location: <span>${character.location.name}</span></h3>
</article>
</div>
`
return view;
}
export default Character;
Hola!, yo personalmente como reto, quise implementar todo el tema de routing en una clase, como se hace mas o menos en el curso de Router para SPA con JS si quieren ver como lo plantee aquí les dejo el repo, agradecería si lo ven y me dan feedback 😄. A lo mejor también les puede ayudar a entender mejor.
Les comparto también la clase con el router
Copié el código del profesor desde github y sigue saliendo “Error 404”. No era problema de mi código, alguien me puede ayudar?
import getHash from '../utils/getHash';
import getData from '../utils/getData';
const Character = async () => {
const id = getHash();
const character = await getData(id);
const view = `
<div class="Characters-inner">
<article class="Characters-card">
<img src="${character.image}" alt="${character.name}">
<h2>${character.name}</h2>
</article>
<article class="Characters-card">
<h3>Episodes: <span>${character.episode.length}</span></h3>
<h3>Status: <span>${character.status}</span></h3>
<h3>Species: <span>${character.species}</span></h3>
<h3>Gender: <span>${character.gender}</span></h3>
<h3>Origin: <span>${character.origin.name}</span></h3>
<h3>Last Location: ${character.location.name}</h3>
</article>
</div>
`;
return view;
};
export default Character;
const API = 'https://rickandmortyapi.com/api/character/';
const getData = async (id) => {
const apiURL = id ? `${API}${id}` : API;
try{
const response = await fetch(apiURL);
const data = await response.json();
return data;
} catch(error){
console.log('Fetch Error', error);
};
};
export default getData;
Es de los pocos profesores que pongo en velocidad 1x
Ya esta funcionando la App, trae los personajes y los muestra correctamente. Vamos a configurar un archivo CSS para mejorar la presentación.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.