A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Completando las funciones para generar etiquetas HTML

14/23
Recursos

Aportes 16

Preguntas 0

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

Este es un micro-framework que nos ayuda a construir aplicaciones web utilizando Componentes, muy parecido a React y Vue:

驴seguros que este c贸digo es m谩s f谩cil de mantener?

Es un error de principiantes verificar si un objeto tiene propiedades con un simple obj.attr ? 鈥樷 : 鈥樷 porque un objecto vacio es truthy

Siguiendo el taller y con un poco de curiosidad las funciones que estamos utilizando pueden quedar de la manera siguiente.

// consiguiendo los atributes para las etiquetas HTML
const attributesToString = (obj = {}) => {
    const ENTRIES = Object.entries(obj);
    const ATTRS = [];
    for (let i = 0; i < ENTRIES.length; i += 1) {
        const AUX = ENTRIES[i];
        const ATTR = AUX[0];
        const VALUE = AUX[1];
        ATTRS.push(`${ATTR}="${VALUE}"`);
    }
    return ATTRS.join("");
};

// Creando etiquetas html con atributos
const createTagAttr = obj => (content = "") => {
    const { tag, attr } = obj;
    return `
      <${tag}${attr ? ` ${attributesToString(attr)}` : ""}>
        ${content}
      </${tag}>`;
};

// Generando tag de maner dinamica
const createTag = (tag) => {
    const TAG = (typeof tag === "string")
        ? createTagAttr({ tag })
        : createTagAttr(tag);
    return TAG;
};```

para poder invocar todo de la siguiente manera. 


createTag({tag:鈥渉1鈥, attr:{鈥渃lass鈥: 鈥淪uccess鈥潁})(鈥淕alletas mmmm鈥);


espero pueda ser de utilidad par alguien.

Tengo entendido que en la programaci贸n funcional no se hace uso de if. Soy nuevo en este paradigma

驴No ser铆a m谩s f谩cil solo mapear la lista?
pregunta seria jajjaja.

Les comparto una ligera optimizaci贸n al c贸digo del profe.

// Construccion del html tag con clase
const tagAttr = obj => (content = '') =>
  `<${obj.tag} ${obj.attrs && attrToString(obj.attrs)}> ${content} </${obj.tag}>`

// Metodo que ejecuta la construccion del tag
const tag = t =>
  (typeof t === 'string') ? tagAttr({tag: t}) : tagAttr(t)

Que fumada de clase again zD

Muy interesante la soluci贸n y todo pero, afortunadamente ya tom茅 el Curso de Manejo de Ansiedad como para permitirme usar jQuery por voluntad propia, m谩s a煤n teniendo React JS y dem谩s. 馃槄 Qui茅ranse mucho!馃槀

Un clousure recuerda el contexto en el que fue creado

const generateHTMLTag = tag => content => `<${tag}>${content}</${tag}>`
const h1 = generateHTMLTag('h1');
h1('bla bla bla'); //<h1>bla bla bla</h1>

cada vez m谩s confuso 鈥

Hmmm, comprendo el punto, esto me recuerda mucho al concepto de High Order Functions, pero pues pr谩cticamente hacer esto es muy similar a lo que vimos en el Curso de buenas pr谩cticas de escritura de c贸digo, dividir en funciones

Comprender el uso de las tres funciones me costo ver los v铆deos un par de veces mas pero ahora quedo perfectamente entendido

Muy chevere

Creo que la validaci贸n quedar铆a mejor de la siguiente manera

    `<${obj.tag}${Object.keys(obj.attrs).length > 0 && ' '}${attrsToString(obj.attrs)}>${content}</${obj.tag}>`

funciones en esta clase.

// tagAttrs
function tagAttrs (obj, content) {
  return (
    `<${obj.tag}${Object.keys(obj.attrs).length > 0 && ' '}${attrsToString(obj.attrs)}>${content}</${obj.tag}>`
  )
}

// create tag html

function tag (t) {
  if (typeof t === 'string') return tagAttrs({tag: t})
  
  return tagAttrs(t);
}

Yo le hice as铆:

const tagAttrs = obj => (content = '') => `
  <${obj.tag}
    ${obj.attrs? attrsToString(obj.attrs) : ''}
  >
    ${content}
  </${obj.tag}>
`

const tag = t => {
  if(typeof t === 'string') return tagAttrs({tag: t})
  return tagAttrs(t)
}