frontend

TOPICS


Febrero 2020

  React aplicaci贸n en 100 lineas de c贸digo
Febrero 2   |   React

El siguiente c贸digo permite entender como se construye aplicaci贸n muy simple en React

Pon atenci贸n a los comentarios en el c贸digo
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>React JS Search Results</title>
  <!-- Add React and Babel References -->
  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
</head>

<body>
  <section>
    <!-- Every React app must have what鈥檚 known as an entry point. 
    The entry point is an HTML element where we insert our React application into the page. -->
    <div id="root">
    </div>

    <!-- Our Script must have type="text/babel" for Babel to work-->
    <script type="text/babel"> //React code will go here
      // Babel converts this code that looks like HTML into valid JavaScript (JSX: JavaScript XML)
      // The functions in react must be Capitalize to differentiate from normal javascript functions
      // React Functions became Components
      // The Component must return JSX code between parenthesis function ComponentName() { return ( ...JSX Code ... ) }
      // Every React Component must return either JSX elements or other React components.

      /* PROPS (Passing data to the components)
        We can pass data to the function components using attributes and it is passed to the Link function as an argument
        <Link attributeName="value" />

        React collects and organizes the data passed to a given component as a single object.
        The name for data passed to a component, such as title, is props.
        All prop values exist within the function component itself on a props object.
      */

      /* SEPARATE DATA FROM UI
          Make and array of objects and pass down the link components through props.
          Since this is a common pattern in React, it has its own method .map() that works with JSX
          (don't confuse with JS array.map() it's similar but Reacts works only for JXS)
      */

      const linkData = [
        {
          title: "React - A JavaScript Library for Building User Interfaces",
          url: "https://reactjs.org",
          shortUrl: "reactjs.org",
          excerpt: "React makes it painless to create interactive UIs."
        },
        {
          title: "Jorge Anaya's Blog",
          url: "https://www.jorgeanaya.dev",
          shortUrl: "jorgeanaya.dev",
          excerpt: "Personal insights about coding and life"
        },
        {
          title: "Google",
          url: "https://www.google.com",
          shortUrl: "google.com",
          excerpt: "When everything fails then Google is your friend, GoogleIt!"
        }
      ]

      function Link(props) {
        // We use {} curly braces to insert or interpolate dynamic values wherever we need.
        return (
          <div>
            <a href="{props.url}">{props.title}</a>
            <div>
              <h3>{props.shortUrl}</h3>
            </div>
            <div> {props.excerpt}
            </div>
          </div>
        )
      }
      // Since React components can return other React components, we can make an App Component
      // The entire JSX expression is surrounded by curly braces
      // JSX allows us to insert any valid JavaScript expression between curly braces.
      function App() {
        return (
          <section>
            {linkData.map(function (link) {
              return (
                <Link
                  key={link.url} // Each child in a list should have a unique "key" prop
                  title={link.title}
                  url={link.url}
                  shortUrl={link.shortUrl}
                  excerpt={link.excerpt} />
              ); // return end, function, map() & expression end */
            })}
          </section>
        )
      }
      ReactDOM.render(<App />, document.getElementById('root'))
    </script>

</body>

</html>

Febrero 2019

  Encontrar elementos dentro de un NodeList usando jQuery
Febrero 3   |   Js

Con jquery.find() podemos buscar por un elemento o selector, en algunos casos ya recibimos esa variable conteniendo un NodeList para buscar dentro de estos elementos usemos .find()

 jquery.find()

            

// Obtener una lista de elementos e inicializarlos con otra funci贸n
\$(items).find(".collapse-card").paperCollapse();

// Combinarla con each(Integer index, Element element) para explorar su contenido.
\$(items).find(".collapse-card").each( (i,e) => console.log(e));
            
            
        

Referencias:

https://api.jquery.com/find/
https://api.jquery.com/each/

  Imagen responsiva usando la t茅cnica fluid-image
Febrero 3   |   Css

Lograr el comportamiento responsivo de un sitio web requiere de trabajar con varios elementos html, entre ellos las im谩genes son uno los mas solicitados. Para lograrlo existen varias t茅cnicas, una de las mas sencillas y que tiene m谩xima compatibilidad con casi cualquier browser (IE cuando digo casi eres tu el culpable 馃う鈥嶁檪锔) es la llamada Fluid Images (Im谩genes Fluidas).

Si bien no resuelve todos los problemas es un fix sencillo

 Fluid image

            

img {
max-width: 100%;
height: auto;
}