Fundamentos del Desarrollo Web Profesional

1

Frameworks y Librerías de JavaScript para Aplicaciones Web

2

Creación y Composición de Componentes en Desarrollo Web

3

Transformación de Páginas Web a Componentes Reutilizables

4

Reactividad y Estrategias de Renderizado en JavaScript

5

Diferencias entre Librerías y Frameworks en Desarrollo Web

6

Empaquetadores y herramientas esenciales para desarrollo frontend JS

Contexto y funcionamiento de los Frameworks JavaScript

7

Desarrollo de Aplicaciones con React.js: Componentes y Hooks

8

Ciclo de vida de componentes en ReactJS

9

Desarrollo de Aplicación RIA en Code Sandbox

10

Estado y Eventos en React para Aplicaciones Interactivas

11

Arquitectura y Funcionamiento de Angular: Componentes y Servicios

12

Demo de Aplicación Angular para Gestión de Películas

13

Vue.js: Características y Ventajas frente a Otros Frameworks

14

Creación de un Demo con Vue.js desde HTML Básico

15

Desarrollo de sitios web con Svelte: optimización y rendimiento

16

Creación de Aplicaciones con Svelte: Primeros Pasos Prácticos

Estilos con CSS, preprocesadores y CSS-in-JS

17

CSS en JS: Integración y Ventajas en Aplicaciones React

18

Estilos en Angular con CSS: Aplicación de Películas

19

Componentes en Vue.js y Preprocesadores CSS

20

Estilos avanzados con SASS en View Components

21

"Uso de Styled Components para Estilos Dinámicos en React"

22

Estilos Dinámicos con Theme Provider y Style Components

23

Variables CSS y Emotion en Svelte: Mejora tus Componentes

Cómo escalar sitios o aplicaciones web

24

Escalamiento de Aplicaciones Web: SPA, SSR y Generadores Estáticos

25

Desarrollo de Aplicaciones con Next.js: Rutas y Renderizado Dinámico

26

Organización de Proyectos en React: Contenedores y Presentacionales

27

Elección de Frameworks y Librerías JavaScript para Proyectos Web

28

Desarrollo Frontend: Próximos Pasos y Evaluación Final

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Creación de Aplicaciones con Svelte: Primeros Pasos Prácticos

16/28
Recursos

¿Cómo crear una aplicación con Svelte desde cero?

Crear una aplicación con Svelte es un proceso emocionante que nos permite entender cómo este framework facilita el desarrollo web. Svelte destaca por su sintaxis similar al HTML, su eficiencia, y cómo maneja la interacción con los usuarios. ¡Visualicemos cómo se hace!

¿Cómo iniciamos nuestro proyecto Svelte?

Para empezar un proyecto con Svelte, lo primero es crear un nuevo sandbox y elegir el template de Svelte. Al crear nuestro proyecto, verás un archivo package.json que enumera las dependencias del proyecto. Svelte usa Rollup para la construcción del código. Un archivo clave es rollup.config.js, que define esta configuración, disponible para que la examines en la sección de archivos y enlaces si deseas explorar cómo funciona Rollup más a fondo.

¿Cómo podemos estructurar nuestro contenido HTML en Svelte?

La estructura del HTML en Svelte se asemeja mucho a la del HTML convencional. Puedes incluir etiquetas <style> para estilos y <script> para lógica JavaScript. En nuestro caso, empezamos por maquetar una aplicación de películas:

<h2>Películas</h2>
<form>
  <h3>Terminator</h3>
  <button type="button">-</button>
  0
  <button type="button">+</button>
</form>

Aquí, tenemos un formulario para una película con dos botones y una cantidad por defecto de "0".

¿Cómo modularizamos en Svelte con componentes?

Transformar el formulario en un componente nos ayuda a organizar mejor nuestro código. Creamos un archivo Form.svelte y movemos allí el formulario. Luego, lo importamos al archivo principal del siguiente modo:

<script>
  import Form from './Form.svelte';
</script>

Este enfoque modular permite reutilizar componentes en distintas partes de la aplicación.

¿Cómo manejamos listas y ciclos en Svelte?

Svelte usa una sintaxis similar a Handlebars para manejar ciclos. Supongamos que tenemos un array de películas y deseamos renderizar un formulario por cada elemento. Empleamos una estructura #each:

<script>
  let peliculas = [{ name: 'Avengers', quantity: 0 }, { name: 'Terminator', quantity: 0 }];
</script>

<ul>
  {#each peliculas as movie}
    <li>
      <h3>{movie.name}</h3>
      <button on:click={() => movie.quantity--} disabled={movie.quantity <= 0}>-</button>
      {movie.quantity}
      <button on:click={() => movie.quantity++}>+</button>
    </li>
  {/each}
</ul>

¿Cómo integramos la funcionalidad en los botones?

Los eventos en Svelte se definen usando on. seguido del evento. Para actualizar la cantidad de películas, usamos una función de flecha:

<button on:click={() => movie.quantity--} disabled={movie.quantity <= 0}>-</button>
<button on:click={() => movie.quantity++} disabled={movie.quantity >= available}>+</button>

Aquí, los botones incrementan o decrementan la cantidad, asegurando que esta no baje de cero ni exceda la cantidad disponible.

¿Cómo manejamos estilos y CSS en Svelte?

Svelte facilita la incorporación de CSS directamente en los componentes. En el siguiente módulo aprenderemos a darle estilos usando CSS normal y preprocesadores. Además, descubriremos la metodología CSS en CSS para mantener los estilos encapsulados dentro de nuestros componentes.

Con estos conceptos, ya tienes una base sólida para continuar explorando más de Svelte. Recuerda, la práctica y el experimentación son fundamentales en el aprendizaje del desarrollo web. ¡Adelante, y sigue aprendiendo!

Aportes 24

Preguntas 3

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Array con la informacion de las peliculas

[
            {
              name: "Avengers",
              available: 3,
              quantity: 0,
            },
            {
              name: "Terminator",
              available: 5,
              quantity: 0,
            },
          ]

Bueno después de este modulo, mi top fue:

  • React
  • Vue
  • Svelte

😃

En el ejemplo me parece que Svelte es muy parecido a Vue. Ustedes qué opinan?

Saludos! Así es como hice un componente independiente para los botones:

<script>
  export let initialValue = 0;
  export let maxValue ;


 //Por defecto el contador comienza en 0
  let contador = initialValue;

  function aumentar() {
    contador++;
  }

  function disminuir() {
    contador--;
  }
</script>


<button type="button" on:click={disminuir} disabled={contador<=0}>-</button>
{contador}

/*Hacemos que el botón de aumentar se desactive cuando el contador alcance el valor máximo (que le pasaremos al llamar al componente)*/
<button type="button" on:click={aumentar} disabled={contador>=maxValue}>+</button>

Luego al llamar a los botones en el formulario sería de esta manera:

(Realmente no es necesario especificar el initialValue ya que por defecto es 0).

{#each movies as movie}
<form>
	<h3>{movie.name}</h3>
	<Buttons initialValue ={0} maxValue={movie.available}/>
</form>
{/each}

Rollup


Es un paquete de módulos para JavaScript que compila pequeños fragmentos de código en algo más grande y complejo, como una biblioteca o aplicación. Utiliza el nuevo formato estandarizado para módulos de código incluidos en la revisión ES6 de JavaScript, en lugar de soluciones idiosincrásicas anteriores como CommonJS y AMD. Los módulos ES le permiten combinar libremente y sin problemas las funciones individuales más útiles de sus bibliotecas favoritas. Esto eventualmente será posible de forma nativa en todas partes, pero Rollup te permite hacerlo hoy.



Para mas información puedes ver acá

Cuando escriban el nombre del componente al importarlo aseguresen de poner la primera letra en mayuscula ya que si usan el nombre

form

les saldra un error por usar el mismo nombre de la etiqueta form de html

Me quedo con ganas de aprender vue, pero en mi pais no hay mucha ofertas de trabajo asi que a react será

Yo me fui por DC, Snyder’s cut me gusto mucho.

<script>
  const movies = [
    {
      name: "Avatar",
      available: 5,
      quantity: 0
    },
    {
      name: "Superman man of Steel",
      available: 4,
      quantity: 0
    },
    {
      name: "Batman vs Superman",
      available: 5,
      quantity: 0
    },
    {
      name: "Wonder Woman",
      available: 1,
      quantity: 0
    },
    {
      name: "Acuaman",
      available: 6,
      quantity: 0
    },
    {
      name: "Snyder Cut: Justice Leage",
      available: 10,
      quantity: 0
    }
  ];
</script>

{#each movies as movie}
<form>
	<h3>{movie.name}</h3>
	<button type="button" on:click={() => movie.quantity += 1} disabled={movie.quantity >= movie.available}>+</button>
	{movie.quantity}
	<button type="button" on:click={() => movie.quantity -= 1} disabled={movie.quantity <= 0}>-</button>
</form>
{/each}

Primera vez que veo Svelte y fue como amor a primera vista -

Sobre Svelte muy sencilla la sintaxis me gusto pero si toca elegir me quedo con Vue JS y React a ver en que logro encontrar la oportunidad laboral en mi pais

Pensé que Vue era el framework más fácil y rápido de aprender, pero Svelte me sorprendió más de lo que me esperaba

<script>
  const movies = [
    { name: "Avengers", available: 5, quantity: 0 },
    { name: "Wonder Woman", available: 15, quantity: 0 }
  ];
</script>

{#each movies as movie}
<form>
	<h3>{movie.name}</h3>
	<button type="button" on:click={() => movie.quantity--} disabled={movie.quantity <= 0}>-</button>
	{movie.quantity}
	<button type="button" on:click={() => movie.quantity++} disabled={!(movie.quantity < movie.available)}>+</button>
</form>
{/each}

Hasta el momento está súper genial el curso, me ayudó a decidir que Angular será el primer framework que aprenda:)

Ya que terminamos esta sección de entrar en contexto y conocer algunos Frameworks importantes de JS me gustaría compartirles estas notas. 😄

https://complex-swamp-51c.notion.site/REACT-ANGULAR-VUE-y-SVELT-dfe8f4787c124c74a8192c7210ab2a3d

svelte luce muy facil e intuitivo, me gusto

Me resulta muy interesante Svelte. Me gusta su simpleza

Hasta ahora svelte es la que más me gustó, seguida de cerca por vue :smi

Mi ranking:

  1. React
  2. Vue
  3. Svelte
  4. Angular

Mi top de frameworks y/o librerías es:

  1. React
  2. Svelte
  3. Angular
  4. Vue
    😃

En español no se dice “SALVAR” eso es una traducción literal del inglés; la manera correcta es “GUARDAR”.

Sí se podría decir “Lo voy a guardar para salvarlo de cualquier accidente y que se pierda todo lo que he hecho”.

Nunca había visto Svelte 😮 me gusto 😃

Primero que nada, quiero mencionar que la estructura del proyecto para "Svelte" en Sandbox, cambió. Para que no tengan problemas en reestructurar el proyecto, mejor sólo hagan fork al proyecto del profesor David. Gato anti spoilers: . . . . . . . . (≽^•⩊•^≼)୭ . . . . . . . . (≽^•⩊•^≼)୭ . . . . . . . . (≽^•⩊•^≼)୭ . . . . . . . . (≽^•⩊•^≼)୭ . . . . . . . . (≽^•⩊•^≼)୭ . . . . . . . . (≽^•⩊•^≼)୭ . . . . . . . . (≽^•⩊•^≼)୭ . . . . . . . . (≽^•⩊•^≼)୭ . . . . . . . . (≽^•⩊•^≼)୭ . . . . . . . . (≽^•⩊•^≼)୭ Mi código consiste requiere trabajar en 4 archivos principales y son: 1\. App.svelte 2. Form.svelte 3. LessButton.svelte 4. PlusButton.svelte Y este fue el código: ```js //App.svelte <script> import Title from "./Title.svelte"; import Form from "./Form.svelte"; </script> <main>

Peliculas

<Form /> </main> //Form.svelte <script> import Less from "./LessButton.svelte"; import Plus from "./PlusButton.svelte"; const movies = [ { name: 'Revengers', maxTickets: 12, quantity: 0, }, { name: 'Spuder Moon', maxTickets: 10, quantity: 0, }, { name: 'Baturu Man', maxTickets: 8, quantity: 0, }, { name: 'Journey Rabbit', maxTickets: 2, quantity: 0, }, { name: 'Blue Penter', maxTickets: 3, quantity: 0, }, { name: 'River Gens, Mid Game', maxTickets: 5, quantity: 0, }, { name: 'Finally, The One Piece', maxTickets: 10, quantity: 0, }, ] </script> {#each movies as movie} <form> <h5> {movie.name} </h5> <Less bind:movieQuantity={movie.quantity}/> {movie.quantity} <Plus bind:movieQuantity={movie.quantity} bind:maxTickets={movie.maxTickets}/> </form> {/each} // LessButton.svelte <script> export let movieQuantity; const decrement = () => { if(movieQuantity > 0) { movieQuantity -= 1; } } </script> <button type="button" on:click = {decrement} disabled = {movieQuantity <= 0} > - </button> // PlusButton.svelte <script> export let movieQuantity; export let maxTickets; const increment = () => { console.log('Increment button clicked'); console.log('Before increment - movieQuantity:', movieQuantity); console.log('Before increment - maxTickets:', maxTickets); if(movieQuantity < maxTickets) { movieQuantity++; } console.log('After increment - movieQuantity:', movieQuantity); console.log('After increment - maxTickets:', maxTickets); } </script> <button type="button" on:click = {increment} disabled = {movieQuantity >= maxTickets} > + </button> ```
no se que IA usa codeSand pero prácticamente programa por mi antes de si quiera digan el código en el video del curso.