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’s 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:
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;
}