Agregando funciones a la app con React

Clase 6 de 57 • Curso de Redux por Bedu

Contenido del curso

Bienvenido al curso

Repaso React

Introducción a Redux

11
¿Qúe es Redux, cuándo usarlo y por qué?
00:15 min

Fases de Redux

Fases Extra

Compartir información en Redux

Métodos HTTP

Conclusión

Tomar examen

Comentarios

Michel Roberto Traña Tablada

student•

Para quienes no están muy familiarizados con React: esto de poner etiquetas HTML dentro de arreglos en JavaScript es una funcionalidad extendida que se logra utilizando babel y se llama JSX. Esta viene pre-configurada con create-react-app y si intentas utilizarla fuera de este proyecto deberás emplear tu solo babel para que traspile JSX a JavaScript que entienden casi todos los navegadores. Otro detalle es que si en nuestro proyecto no importamos la librería react tampoco funcionará.

Lian Nivin

student•

gracias por la informacion!

Roberto Del Valle

student•

Gracias por el aporte.

Carlos Huarcaya

student•

Otra forma mas bonita :D

import React from "react";

export default function App() {
  const users = [
    { name: "Carlos", email: "carlosh.mitma@gmail.com", domain: "sonne.io" },
    { name: "Sol", email: "svm@gmail.com", domain: "sonne.com" }
  ];
  const renderRows = () => {
    return users.map((item, idx) => {
      return (
        <tr>
          <td>{item.name}</td>
          <td>{item.email}</td>
          <td>{item.domain}</td>
        </tr>
      );
    });
  };
  return (
    <div className="margen">
      <table className="table">
        <thead>
          <tr>
            <th>Nombre</th>
            <th>Correo</th>
            <th>Enlace</th>
          </tr>
        </thead>
        <tbody>{renderRows()}</tbody>
      </table>
    </div>
  );
}

jorge rincon

student•

Me ha gustado más esta forma y la he copiado en mi App.js Gracias!

Frank Antonio Piñin Ato

student•

podrian explicar para que sirve el IDX aqui: users.map((item, idx)

Osvaldo Trejo

student•

Otra forma de poder renderizar los datos

import React from 'react';


const App = () => {
  let users = [
    {id: '1',mail: 'osvaldorn10@gmail.com', name: 'Osvaldo Trejo', domain: 'osvaldo.com'},
    {id: '2',mail: 'osvaldotr07@gmail.com', name: 'Osvi Trejo', domain: 'osvi.com'}
  ]
  
  return (
    <React.Fragment >
      <div className="container-table">
        <table className="table">
          <tr>
            <th>Nombre</th>
            <th>Correo</th>
            <th>Enlace</th>
          </tr>
          <tbody>
            {users.map((item, id) => 
              <tr key={item.id} >
                <td>{item.name}</td>
                <td>{item.mail}</td>
                <td>{item.domain}</td>
              </tr>
            )}
          </tbody>
        </table>
      </div>
    </React.Fragment>
  )
}
export default App;

LUIS MIGUEL GUERRERO GUTIERREZ

student•

JSX : Fundamentalmente, solo es azúcar sintáctico para la función de React: React.createElement(component, props, ...children) (por eso necesitamos tener a React dentro del scope del proyecto)

Según la gente de facebook: JSX es una extensión de ECMAScript (aka: JavaScript o JS) sin definición semántica y que tiene una sintaxis muy parecida al XML.

No existe intención alguna de implementarlo en motores o navegadores y menos aún tomarlo como una propuesta para ser incorporada en la especificación de ECMAScript. Fue creado con la intención de que los preprocesadores (ej. Babel.js) lo transformen en ECMAScript estándar.

Alejandro Miguel

student•

Frank Antonio Piñin Ato

student•

Es muy bueno el profesor, tiene un aire al creador de coders en youtube me gusta la forma en la que ensena. Felicitacion

Federico Guillermo Moreira Tejera

student•

Concuerdo contigo frankp10. Me encanta la forma de enseñanza que utiliza

Miguel Angel Reyes Moreno

student•

En vez de hacer padding-top:10px; y padding-bottom:10px, es mejor:

.tabla td {
  padding-block: 10px;
}

Esto se aprende en los nuevos cursos de CSS de Platzi :)

Joseph Manuel Salen Pantoja

student•

Navegadores que soportan padding-block :green_heart:

Fuente: Can I Use

Mariana Valencia Gallego

student•

No conocía el uso de los square brackets en una arrow function. Chévere manera de retornar un array.

Aunque en este caso hubiera sido igual simplemente crear una variable sin función

Rafael Mora

student•

Cuando omites las llaves es como si pusieras un return a esa linea, es un atajo

Paul Cortes

student•

genial forma de poner las filas funcion:

 const ponerFilas = () =&gt; [
    &lt;tr&gt;
      &lt;td&gt;Paul&lt;/td&gt;
      &lt;td&gt;paul@paul.com&lt;/td&gt;
      &lt;td&gt;paul.com&lt;/td&gt;
    &lt;/tr&gt;,
    &lt;tr&gt;
      &lt;td&gt;Jeniffer&lt;/td&gt;
      &lt;td&gt;jeniffer@jeniffer.com&lt;/td&gt;
      &lt;td&gt;jeniffer.com&lt;/td&gt;
    &lt;/tr&gt;,

  ];

Alvaro Cuiza Laime

student•

otra opción para poner las filas seria con un map:

{ponerFilas().map((row)=>(
              row
 ))}

Raycris Maldonado

student•

Otra forma de hacer el codigo utilizando styled components y map para recorrer un arreglo.

import React from "react";
import styled from "styled-components";

const users = [
  {
    name: "Raycris",
    email: "Raycris97@gmail.com",
    link: "https://gitdub.com/raycris",
  },
  {
    name: "Juan",
    email: "JuancitoPricolito@gmail.com",
    link: "Pricolito.com",
  },
];
export const App = () => {
  return (
    <Margen>
      <Tabla>
        <thead>
          <tr>
            <th>name</th>
            <th>email</th>
            <th>link</th>
          </tr>
        </thead>
        <tbody>
          {users.map((user) => (
            <tr>
              <td>{user.name}</td>
              <td>{user.email}</td>
              <td>{user.link}</td>
            </tr>
          ))}
        </tbody>
      </Tabla>
    </Margen>
  );
};

export default App;

const Tabla = styled.table`
  width: 100%;
  text-align: left;
  td {
    padding-top: 10px;
    padding-bottom: 10px;
  }
`;

const Margen = styled.div`
  margin: 100px;
`;

Kevin Parra Lopez

student•

Pueden ahorrar lineas de codigo si aplican la teoria de las manecillas del reloj en sus estilos

De esta manera puedes aplicar los estilos arriba/abajo y a los lados

propiedad: arriba/abajo lados

Ejemplo: Tendra padding top y bottom de 10px y a los lados 0px

padding: 10px 0;

De esta manera puedes aplicar los estilos en todos los lados de la caja, corriendo en sentidos de las manecillas del reloj

propiedad: arriba derecha abajo izquierda

Ejemplo: De esta manera tendra padding arriba y abajo pero a los lados no

padding: 10px 0 10px 0

Kevin Martello Mayorga Cleveland

student•

Interesante

Elkin Omar Jiménez García

student•

Excelente apunte,Gracias Rodolfo :D

Johan García Trejo

student•

Para quienes no están muy familiarizados con React: esto de poner etiquetas HTML dentro de arreglos en JavaScript es una funcionalidad extendida que se logra utilizando babel y se llama JSX. Esta viene pre-configurada con create-react-app y si intentas utilizarla fuera de este proyecto deberás emplear tu solo babel para que traspile JSX a JavaScript que entienden casi todos los navegadores. Otro detalle es que si en nuestro proyecto no importamos la librería react tampoco funcionará.

Cristian Andres Ladino Peña

student•

Excelente clase. 🙂

Osvaldo Trejo

student•

estilos css

body {
  margin: 100px;
}
.container-table {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
}
.table {
  width: 100%;
}

.table td{
  padding: 10px 0;
}

Paul Cortes

student•

Excelente forma de adicionar los datos a la tabla excelente

Cristhian Laurente López

student•

exelente.

Heger Arias Santos

student•

Que hacen ?

Héctor Eduardo López Carballo

student•

Estoy estudiando ReactJS e intentando hacer proyectos personales para buscar empleo!

import React from "react";

export default function App() {
  const users = [
    { name: "Carlos", email: "carlosh.mitma@gmail.com", domain: "sonne.io" },
    { name: "Sol", email: "svm@gmail.com", domain: "sonne.com" }
  ];
  const renderRows = () => {
    return users.map((item, idx) => {
      return (
        <tr>
          <td>{item.name}</td>
          <td>{item.email}</td>
          <td>{item.domain}</td>
        </tr>
      );
    });
  };
  return (
    <div className="margen">
      <table className="table">
        <thead>
          <tr>
            <th>Nombre</th>
            <th>Correo</th>
            <th>Enlace</th>
          </tr>
        </thead>
        <tbody>{renderRows()}</tbody>
      </table>
    </div>
  );
}

import React from 'react';


const App = () => {
  let users = [
    {id: '1',mail: 'osvaldorn10@gmail.com', name: 'Osvaldo Trejo', domain: 'osvaldo.com'},
    {id: '2',mail: 'osvaldotr07@gmail.com', name: 'Osvi Trejo', domain: 'osvi.com'}
  ]
  
  return (
    <React.Fragment >
      <div className="container-table">
        <table className="table">
          <tr>
            <th>Nombre</th>
            <th>Correo</th>
            <th>Enlace</th>
          </tr>
          <tbody>
            {users.map((item, id) => 
              <tr key={item.id} >
                <td>{item.name}</td>
                <td>{item.mail}</td>
                <td>{item.domain}</td>
              </tr>
            )}
          </tbody>
        </table>
      </div>
    </React.Fragment>
  )
}
export default App;

Según la gente de facebook: JSX es una extensión de ECMAScript (aka: JavaScript o JS) sin definición semántica y que tiene una sintaxis muy parecida al XML.

No existe intención alguna de implementarlo en motores o navegadores y menos aún tomarlo como una propuesta para ser incorporada en la especificación de ECMAScript. Fue creado con la intención de que los preprocesadores (ej. Babel.js) lo transformen en ECMAScript estándar.

 const ponerFilas = () =&gt; [
    &lt;tr&gt;
      &lt;td&gt;Paul&lt;/td&gt;
      &lt;td&gt;paul@paul.com&lt;/td&gt;
      &lt;td&gt;paul.com&lt;/td&gt;
    &lt;/tr&gt;,
    &lt;tr&gt;
      &lt;td&gt;Jeniffer&lt;/td&gt;
      &lt;td&gt;jeniffer@jeniffer.com&lt;/td&gt;
      &lt;td&gt;jeniffer.com&lt;/td&gt;
    &lt;/tr&gt;,

  ];

import React from "react";
import styled from "styled-components";

const users = [
  {
    name: "Raycris",
    email: "Raycris97@gmail.com",
    link: "https://gitdub.com/raycris",
  },
  {
    name: "Juan",
    email: "JuancitoPricolito@gmail.com",
    link: "Pricolito.com",
  },
];
export const App = () => {
  return (
    <Margen>
      <Tabla>
        <thead>
          <tr>
            <th>name</th>
            <th>email</th>
            <th>link</th>
          </tr>
        </thead>
        <tbody>
          {users.map((user) => (
            <tr>
              <td>{user.name}</td>
              <td>{user.email}</td>
              <td>{user.link}</td>
            </tr>
          ))}
        </tbody>
      </Tabla>
    </Margen>
  );
};

export default App;

const Tabla = styled.table`
  width: 100%;
  text-align: left;
  td {
    padding-top: 10px;
    padding-bottom: 10px;
  }
`;

const Margen = styled.div`
  margin: 100px;
`;

body {
  margin: 100px;
}
.container-table {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
}
.table {
  width: 100%;
}

.table td{
  padding: 10px 0;
}

Agregando funciones a la app con React

Bienvenido al curso

Conoce a tu profesor y todo lo que aprenderás sobre Redux

¿Qué conocimientos me recomiendan para tomar este curso?

Repaso React

¿Qué es React y cómo funciona?

Preparando nuestro entorno de trabajo

Creación de la app con React