<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width,initial-scale=1">

<title>React.js :: Elixir Full-Stack</title>

<link rel="canonical" href="https://elixircl.github.io/elixir-fullstack/javascript/react.html">

<link rel="prev" href="javascript.html">

<link rel="next" href="sync.html">

<meta name="generator" content="Antora 3.1.14">

<link rel="stylesheet" href="../_/css/site.css">

</head>

<body class="article">

<header class="header">

<nav class="navbar">

<div class="navbar-brand">

<a class="navbar-item" href="https://elixircl.github.io/elixir-fullstack">Elixir Full-Stack</a>

<div class="navbar-item search hide-for-print">

<div id="search-field" class="field">

<input id="search-input" type="text" placeholder="Search the docs">

</div>

</div>

<button class="navbar-burger" aria-controls="topbar-nav" aria-expanded="false" aria-label="Toggle main menu">

<span></span>

<span></span>

<span></span>

</button>

</div>

<!--

<div id="topbar-nav" class="navbar-menu">

<div class="navbar-end">

<a class="navbar-item" href="#">Home</a>

<div class="navbar-item has-dropdown is-hoverable">

<a class="navbar-link" href="#">Products</a>

<div class="navbar-dropdown">

<a class="navbar-item" href="#">Product A</a>

<a class="navbar-item" href="#">Product B</a>

<a class="navbar-item" href="#">Product C</a>

</div>

</div>

<div class="navbar-item has-dropdown is-hoverable">

<a class="navbar-link" href="#">Services</a>

<div class="navbar-dropdown">

<a class="navbar-item" href="#">Service A</a>

<a class="navbar-item" href="#">Service B</a>

<a class="navbar-item" href="#">Service C</a>

</div>

</div>

<div class="navbar-item">

<span class="control">

<a class="button is-primary" href="#">Download</a>

</span>

</div>

</div>

</div>

-->

</nav>

</header>

<div class="body">

<div class="nav-container" data-component="ROOT" data-version="">

<aside class="nav">

<div class="panels">

<div class="nav-panel-menu is-active" data-panel="menu">

<nav class="nav-menu">

<button class="nav-menu-toggle" aria-label="Toggle expand/collapse all" style="display: none"></button>

<h3 class="title"><a href="../index.html">Elixir Full-Stack</a></h3>

<ul class="nav-list">

<li class="nav-item" data-depth="0">

<button class="nav-item-toggle"></button>

<span class="nav-text">Historia</span>

<ul class="nav-list">

<li class="nav-item" data-depth="1">

<a class="nav-link" href="../history/chapter.html">Historia de la World Wide Web y Aplicaciones Móviles</a>

</li>

</ul>

</li>

<li class="nav-item" data-depth="0">

<button class="nav-item-toggle"></button>

<span class="nav-text">Ecosistema Tecnológico y Laboral</span>

<ul class="nav-list">

<li class="nav-item" data-depth="1">

<a class="nav-link" href="../ecosystem/jobs.html">Mundo Laboral y su Estado del Arte</a>

</li>

<li class="nav-item" data-depth="1">

<a class="nav-link" href="../ecosystem/web.html">Ecosistema Web</a>

</li>

<li class="nav-item" data-depth="1">

<a class="nav-link" href="../ecosystem/llm.html">Large Language Models (LLM)</a>

</li>

</ul>

</li>

<li class="nav-item" data-depth="0">

<button class="nav-item-toggle"></button>

<span class="nav-text">Ingeniería en Software</span>

<ul class="nav-list">

<li class="nav-item" data-depth="1">

<a class="nav-link" href="../swe/stages.html">Etapas del Desarrollo de un Producto de Software</a>

</li>

<li class="nav-item" data-depth="1">

<a class="nav-link" href="../swe/patterns.html">Patrones y Arquitecturas de Software</a>

</li>

<li class="nav-item" data-depth="1">

<a class="nav-link" href="../swe/adr.html">Arquitecture Decision Records</a>

</li>

<li class="nav-item" data-depth="1">

<a class="nav-link" href="../swe/prd.html">Documento de Requerimiento de Producto (Product Requirement Document - PRD)</a>

</li>

<li class="nav-item" data-depth="1">

<a class="nav-link" href="../swe/wow.html">Way of Work</a>

</li>

<li class="nav-item" data-depth="1">

<a class="nav-link" href="../swe/uat.html">Pruebas de Aceptación de Usuario (User Aceptance Testing - UAT)</a>

</li>

<li class="nav-item" data-depth="1">

<a class="nav-link" href="../swe/deprecation.html">Versionado y Política de Compatibilidad y Obsolescencia</a>

</li>

</ul>

</li>

<li class="nav-item" data-depth="0">

<button class="nav-item-toggle"></button>

<span class="nav-text">Github</span>

<ul class="nav-list">

<li class="nav-item" data-depth="1">

<a class="nav-link" href="../github/chapter.html">Github, Static Site Generators, Markdown, Linux y Vim</a>

</li>

</ul>

</li>

<li class="nav-item" data-depth="0">

<button class="nav-item-toggle"></button>

<span class="nav-text">Hostings</span>

<ul class="nav-list">

<li class="nav-item" data-depth="1">

<a class="nav-link" href="../hosting/chapter.html">Hosting, Dominios y Cpanel</a>

</li>

</ul>

</li>

<li class="nav-item" data-depth="0">

<button class="nav-item-toggle"></button>

<span class="nav-text">Networking</span>

<ul class="nav-list">

<li class="nav-item" data-depth="1">

<a class="nav-link" href="../networking/chapter.html">Redes e Internet</a>

</li>

</ul>

</li>

<li class="nav-item" data-depth="0">

<button class="nav-item-toggle"></button>

<span class="nav-text">HTTP</span>

<ul class="nav-list">

<li class="nav-item" data-depth="1">

<a class="nav-link" href="../http/chapter.html">HTTP, JSON y APIS</a>

</li>

</ul>

</li>

<li class="nav-item" data-depth="0">

<button class="nav-item-toggle"></button>

<span class="nav-text">Seguridad</span>

<ul class="nav-list">

<li class="nav-item" data-depth="1">

<a class="nav-link" href="../security/security.html">Seguridad de las Aplicaciones</a>

</li>

<li class="nav-item" data-depth="1">

<a class="nav-link" href="../security/cryptography.html">Criptografía y Autenticación</a>

</li>

</ul>

</li>

<li class="nav-item" data-depth="0">

<button class="nav-item-toggle"></button>

<span class="nav-text">HTML</span>

<ul class="nav-list">

<li class="nav-item" data-depth="1">

<a class="nav-link" href="../html/chapter.html">HTML, CSS y GIT</a>

</li>

</ul>

</li>

<li class="nav-item" data-depth="0">

<button class="nav-item-toggle"></button>

<span class="nav-text">Javascript</span>

<ul class="nav-list">

<li class="nav-item" data-depth="1">

<a class="nav-link" href="javascript.html">Frontend con Javascript</a>

</li>

<li class="nav-item is-current-page" data-depth="1">

<a class="nav-link" href="react.html">React.js</a>

</li>

<li class="nav-item" data-depth="1">

<a class="nav-link" href="sync.html">Sincronización con Servidor</a>

</li>

</ul>

</li>

<li class="nav-item" data-depth="0">

<button class="nav-item-toggle"></button>

<span class="nav-text">Elixir</span>

<ul class="nav-list">

<li class="nav-item" data-depth="1">

<a class="nav-link" href="../elixir/elixir.html">El Lenguaje Elixir</a>

</li>

<li class="nav-item" data-depth="1">

<a class="nav-link" href="../elixir/cli.html">CLI</a>

</li>

<li class="nav-item" data-depth="1">

<a class="nav-link" href="../elixir/apirest.html">REST: Stoic API</a>

</li>

<li class="nav-item" data-depth="1">

<a class="nav-link" href="../elixir/liveview.html">LiveView: Stoic API</a>

</li>

<li class="nav-item" data-depth="1">

<a class="nav-link" href="../elixir/testing.html">Testing: Stoic API</a>

</li>

<li class="nav-item" data-depth="1">

<a class="nav-link" href="../elixir/ash.html">Ash: Stoic API</a>

</li>

<li class="nav-item" data-depth="1">

<a class="nav-link" href="../elixir/commands.html">Makefiles</a>

</li>

</ul>

</li>

<li class="nav-item" data-depth="0">

<button class="nav-item-toggle"></button>

<span class="nav-text">Aplicaciones Móviles</span>

<ul class="nav-list">

<li class="nav-item" data-depth="1">

<a class="nav-link" href="../mobile/chapter.html">Aplicaciones Móviles</a>

</li>

<li class="nav-item" data-depth="1">

<a class="nav-link" href="../mobile/pwa.html">Progresive Web Apps</a>

</li>

</ul>

</li>

<li class="nav-item" data-depth="0">

<button class="nav-item-toggle"></button>

<span class="nav-text">Videojuegos</span>

<ul class="nav-list">

<li class="nav-item" data-depth="1">

<a class="nav-link" href="../games/games.html">Videojuegos</a>

</li>

</ul>

</li>

<li class="nav-item" data-depth="0">

<button class="nav-item-toggle"></button>

<span class="nav-text">DevOps</span>

<ul class="nav-list">

<li class="nav-item" data-depth="1">

<a class="nav-link" href="../devops/devenvs.html">Ambientes de Desarrollo</a>

</li>

<li class="nav-item" data-depth="1">

<a class="nav-link" href="../devops/observability.html">Observabilidad e Instrumentación</a>

</li>

<li class="nav-item" data-depth="1">

<a class="nav-link" href="../devops/dora.html">Métricas DORA</a>

</li>

<li class="nav-item" data-depth="1">

<a class="nav-link" href="../devops/golden.html">Golden Signals</a>

</li>

</ul>

</li>

</ul>

</nav>

</div>

<div class="nav-panel-explore" data-panel="explore">

<div class="context">

<span class="title">Elixir Full-Stack</span>

<span class="version">Spanish</span>

</div>

<ul class="components">

<li class="component is-current">

<div class="title"><a href="../index.html">Elixir Full-Stack</a></div>

<ul class="versions">

<li class="version is-current is-latest">

<a href="../index.html">Spanish</a>

</li>

</ul>

</li>

</ul>

</div>

</div>

</aside>

</div>

<main class="article">

<div class="toolbar" role="navigation">

<button class="nav-toggle"></button>

<a href="../index.html" class="home-link"></a>

<nav class="breadcrumbs" aria-label="breadcrumbs">

<ul>

<li><a href="../index.html">Elixir Full-Stack</a></li>

<li>Javascript</li>

<li><a href="react.html">React.js</a></li>

</ul>

</nav>

<div class="edit-this-page"><a href="file:///antora/./modules/javascript/pages/react.adoc">Edit this Page</a></div>

</div>

<div class="content">

<aside class="toc sidebar" data-title="Contents" data-levels="2">

<div class="toc-menu"></div>

</aside>

<article class="doc">

<h1 class="page">React.js</h1>

<div id="preamble">

<div class="sectionbody">

<div class="paragraph">

<p><a href="https://react.dev/">React.js</a> es un framework de frontend en Javascript, tal cual es Vue.js, Svelte o Angular.

Sin embargo ha ganado una notable popularidad tanto en la comunidad de Javascript como

en la comunidad de <em>Elixir</em>, por lo que es probable encontrar muchos proyectos

que utilizan esta tecnología. Se recomienda que se estudie este framework ya que es muy

similar a como funciona <em>LiveView</em>.</p>

</div>

<div class="paragraph">

<p>Es por esto que se mostrará un proyecto de ejemplo que utiliza los siguientes componentes:</p>

</div>

<div class="ulist">

<ul>

<li>

<p><a href="https://react.dev/">React.js</a></p>

</li>

<li>

<p><a href="https://vite.dev/">Vite</a></p>

</li>

<li>

<p><a href="https://tailwindcss.com/">Tailwind</a></p>

</li>

<li>

<p><a href="https://tanstack.com/">Tanstack</a></p>

</li>

<li>

<p><a href="https://www.typescriptlang.org/">Typescript</a></p>

</li>

</ul>

</div>

<div class="admonitionblock note">

<table>

<tr>

<td class="icon">

<i class="fa icon-note" title="Note"></i>

</td>

<td class="content">

<div class="paragraph">

<p>Se recomienda utilizar un gestor de paquetes alternativo como <code>pnpm</code> (<a href="https://pnpm.io/es/" class="bare">https://pnpm.io/es/</a>)

en ves de <code>npm</code> vainilla. Ya que <code>pnpm</code> cuenta con mejoras en seguridad y velocidad.</p>

</div>

</td>

</tr>

</table>

</div>

<div class="paragraph">

<p>Hay que tener algunas consideraciones al momento de utilizar <em>React</em> y otras tecnologías exclusivas de frontend:</p>

</div>

<div class="ulist">

<ul>

<li>

<p>Puede haber condiciones de carrera al no sincronizarse con el servidor por problemas de conexión.</p>

</li>

<li>

<p>Mayor dificultad de tener un buen SEO ya que dependen de Javascript para funcionar.</p>

</li>

<li>

<p>Tienden a necesitar mayor cantidad de componentes y herramientas que utilizando solo JS Vainilla.</p>

</li>

</ul>

</div>

</div>

</div>

<div class="sect1">

<h2 id="rancho-ufo"><a class="anchor" href="#rancho-ufo"></a>Rancho UFO</h2>

<div class="sectionbody">

<div class="paragraph">

<p>El <a href="https://ranchoufo.cl">Rancho UFO</a> es un sitio web pensado para un centro deportivo de tenis en canchas

de arcilla y se ha creado utilizando un sitio web con react.js y tailwind.</p>

</div>

<div class="paragraph">

<p>El principal componente es el <code>index.html</code> que carga los javascript necesarios.</p>

</div>

<div class="listingblock">

<div class="title">index.html</div>

<div class="content">

<pre class="highlightjs highlight"><code class="language-html hljs" data-lang="html">&lt;!doctype html&gt;

&lt;html lang="es"&gt;

&lt;head&gt;

&lt;meta charset="UTF-8" /&gt;

&lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;

&lt;title&gt;Rancho Ruta UFO Tenis Club · Página Principal&lt;/title&gt;

&lt;meta

name="description"

content="Club de tenis con canchas profesionales, clases para todos los niveles, senderos naturales y experiencias de avistamiento de OVNIs. Donde el deporte se une con la naturaleza."

/&gt;

&lt;meta name="author" content="Ninjas.cl" /&gt;

&lt;meta

property="og:title"

content="Rancho Ruta UFO Tenis Club · Experiencias de Tenis de Otro Mundo"

/&gt;

&lt;meta

property="og:description"

content="Experiencia única de tenis en Quilpué, naturaleza y avistamiento de UFOs. Canchas profesionales, clases personalizadas, venta de arcilla e implementos deportivos."

/&gt;

&lt;meta property="og:type" content="website" /&gt;

&lt;meta

property="og:image"

content="https://ranchoufo.cl/ranchoufo.jpg"

/&gt;

&lt;meta name="twitter:card" content="summary_large_image" /&gt;

&lt;meta name="twitter:site" content="https://ranchoufo.cl" /&gt;

&lt;meta

name="twitter:image"

content="https://ranchoufo.cl/ranchoufo.jpg"

/&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;div id="root"&gt;&lt;/div&gt;

&lt;script type="module" src="/src/main.tsx"&gt;&lt;/script&gt;

&lt;/body&gt;

&lt;/html&gt;</code></pre>

</div>

</div>

<div class="listingblock">

<div class="title">src/main.tsx</div>

<div class="content">

<pre class="highlightjs highlight"><code class="language-tsx hljs" data-lang="tsx">import { createRoot } from "react-dom/client";

import App from "./App.tsx";

import "./index.css";

createRoot(document.getElementById("root")!).render(&lt;App /&gt;);</code></pre>

</div>

</div>

<div class="listingblock">

<div class="title">src/App.tsx</div>

<div class="content">

<pre class="highlightjs highlight"><code class="language-tsx hljs" data-lang="tsx">import { Toaster } from "@/components/ui/toaster";

import { Toaster as Sonner } from "@/components/ui/sonner";

import { TooltipProvider } from "@/components/ui/tooltip";

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

import { BrowserRouter, Routes, Route } from "react-router-dom";

import Home from "@/pages/home";

import NotFound from "@/pages/404";

const queryClient = new QueryClient();

const App = () =&gt; (

&lt;QueryClientProvider client={queryClient}&gt;

&lt;TooltipProvider&gt;

&lt;Toaster /&gt;

&lt;Sonner /&gt;

&lt;BrowserRouter&gt;

&lt;Routes&gt;

&lt;Route path="/" element={&lt;Home /&gt;} /&gt;

&lt;Route path="*" element={&lt;NotFound /&gt;} /&gt;

&lt;/Routes&gt;

&lt;/BrowserRouter&gt;

&lt;/TooltipProvider&gt;

&lt;/QueryClientProvider&gt;

);

export default App;</code></pre>

</div>

</div>

<div class="paragraph">

<p>Este es un ejemplo de un componente</p>

</div>

<div class="listingblock">

<div class="content">

<pre class="highlightjs highlight"><code class="language-tsx hljs" data-lang="tsx">import { ChevronDown } from "lucide-react";

import { Button } from "@/components/ui/button";

import heroImage from "@/assets/hero-tennis.jpg";

const Hero = () =&gt; {

return (

&lt;section

id="inicio"

className="relative min-h-screen flex items-center justify-center overflow-hidden"

&gt;

{/* Background Image with Overlay */}

&lt;div className="absolute inset-0 z-0"&gt;

&lt;img

src={heroImage}

alt="Rancho Tenis &amp; Naturaleza"

className="w-full h-full object-cover"

/&gt;

&lt;div className="absolute inset-0 bg-gradient-to-b from-primary/80 via-primary/60 to-background/95" /&gt;

&lt;/div&gt;

{/* Content */}

&lt;div className="relative z-10 container mx-auto px-4 text-center animate-fade-in"&gt;

&lt;div className="max-w-4xl mx-auto space-y-8"&gt;

&lt;h1 className="text-5xl md:text-7xl font-bold text-primary-foreground leading-tight"&gt;

Donde el Tenis es una experiencia de otro mundo.

&lt;/h1&gt;

&lt;p className="text-xl md:text-2xl text-primary-foreground/90 max-w-2xl mx-auto"&gt;

Juega tenis rodeado de naturaleza, participa en avistamiento de UFOs

y otras actividades recreativas y deportivas.

&lt;/p&gt;

&lt;div className="flex flex-col sm:flex-row gap-4 justify-center items-center pt-4"&gt;

&lt;a href="https://api.whatsapp.com/send?phone=56977449637&amp;text=Hola%20Rancho%20UFO%2C%20me%20gustar%C3%ADa%20hacer%20una%20reserva%20"&gt;

&lt;Button variant="hero" size="lg"&gt;

¡Haz click y reserva tu cancha ya!

&lt;/Button&gt;

&lt;/a&gt;

&lt;/div&gt;

&lt;/div&gt;

&lt;/div&gt;

{/* Scroll Indicator */}

&lt;div className="absolute bottom-8 left-1/2 transform -translate-x-1/2 z-10 animate-float"&gt;

&lt;ChevronDown className="w-8 h-8 text-primary-foreground" /&gt;

&lt;/div&gt;

&lt;/section&gt;

);

};

export default Hero;</code></pre>

</div>

</div>

</div>

</div>

<div class="sect1">

<h2 id="código-fuente"><a class="anchor" href="#código-fuente"></a>Código Fuente</h2>

<div class="sectionbody">

<div class="paragraph">

<p>Se puede ver el código completo de la aplicación en:</p>

</div>

<div class="paragraph">

<p><a href="https://github.com/ElixirCL/elixir-fullstack/tree/main/modules/javascript/examples/ranchoufo.cl" class="bare">https://github.com/ElixirCL/elixir-fullstack/tree/main/modules/javascript/examples/ranchoufo.cl</a></p>

</div>

</div>

</div>

<nav class="pagination">

<span class="prev"><a href="javascript.html">Frontend con Javascript</a></span>

<span class="next"><a href="sync.html">Sincronización con Servidor</a></span>

</nav>

</article>

</div>

</main>

</div>

<footer class="footer">

<p>This page was built using the Antora default UI.</p>

<p>The source code for this UI is licensed under the terms of the MPL-2.0 license.</p>

</footer>

<script id="site-script" src="../_/js/site.js" data-ui-root-path="../_"></script>

<script async src="../_/js/vendor/highlight.js"></script>

<script src="../_/js/vendor/lunr.js"></script>

<script src="../_/js/search-ui.js" id="search-ui-script" data-site-root-path=".." data-snippet-length="100" data-stylesheet="../_/css/search.css"></script>

<script async src="../search-index.js"></script>

</body>

</html>