diff --git a/content/docs/add-react-to-a-website.md b/content/docs/add-react-to-a-website.md index 11b99d37a..86c8ce7de 100644 --- a/content/docs/add-react-to-a-website.md +++ b/content/docs/add-react-to-a-website.md @@ -1,6 +1,6 @@ --- id: add-react-to-a-website -title: Add React to a Website +title: Agregar React a un sitio web permalink: docs/add-react-to-a-website.html redirect_from: - "docs/add-react-to-an-existing-app.html" @@ -8,127 +8,127 @@ prev: getting-started.html next: create-a-new-react-app.html --- -Use as little or as much React as you need. +Utiliza sólo lo que necesites de React. -React has been designed from the start for gradual adoption, and **you can use as little or as much React as you need**. Perhaps you only want to add some "sprinkles of interactivity" to an existing page. React components are a great way to do that. +React fue diseñado desde el principio para que se pudiera adoptar de forma gradual, y **puedas utilizar sólo las cosas que necesites de React**. Quizás solo quieras agregar una "pizca de interactividad" a una página existente. Los componentes de React son una gran manera de hacer eso. -The majority of websites aren't, and don't need to be, single-page apps. With **a few lines of code and no build tooling**, try React in a small part of your website. You can then either gradually expand its presence, or keep it contained to a few dynamic widgets. +La mayoría de sitios web no son, y no necesitan ser, aplicaciones de una sóla página. Con **unas pocas líneas de código y sin herramientas de compilación**, puedes probar React en lugares pequeños de tu sitio web. Y de allí puedes expandir su presencia de forma gradual, o mantenerlo contenido a unos pocos en unos widgets dinámicos. --- -- [Add React in One Minute](#add-react-in-one-minute) -- [Optional: Try React with JSX](#optional-try-react-with-jsx) (no bundler necessary!) +- [Agrega React en Un Minuto](#add-react-in-one-minute) +- [Opcional: Prueba React con JSX](#optional-try-react-with-jsx) (sin necesidad de usar bundler!) -## Add React in One Minute {#add-react-in-one-minute} +## Agrega React en Un Minuto {#add-react-in-one-minute} -In this section, we will show how to add a React component to an existing HTML page. You can follow along with your own website, or create an empty HTML file to practice. +En esta sección, vamos a mostrarte como agregar un componente de React a una página HTML existente. Puedes seguir los pasos en tu sitio web, o crear un nuevo archivo HTML para practicar. -There will be no complicated tools or install requirements -- **to complete this section, you only need an internet connection, and a minute of your time.** +No habrá necesidad de usar herramientas complicadas u otros requerimientos para instalar -- **para completar esta sección, sólo necesitas de una conexión a internet y un minuto de tu tiempo.** -Optional: [Download the full example (2KB zipped)](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605/archive/f6c882b6ae18bde42dcf6fdb751aae93495a2275.zip) +Opcional: [Descargar el ejemplo completo (2KB comprimido)](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605/archive/f6c882b6ae18bde42dcf6fdb751aae93495a2275.zip) -### Step 1: Add a DOM Container to the HTML {#step-1-add-a-dom-container-to-the-html} +### Paso 1: Agrega un Contenedor del DOM al HTML {#step-1-add-a-dom-container-to-the-html} -First, open the HTML page you want to edit. Add an empty `
` tag to mark the spot where you want to display something with React. For example: +Para iniciar, abre la página HTML que deseas editar. Agrega una etiqueta `
` vacía para marcar el lugar donde deseas visualizar algo con React. Por ejemplo: ```html{3} - +
- + ``` -We gave this `
` a unique `id` HTML attribute. This will allow us to find it from the JavaScript code later and display a React component inside of it. +A este `
` le agregamos un atributo HTML `id` que es único. Esto nos permitirá encontrarlo desde el código Javascript más adelante y visualizar un componente de React adentro de este. ->Tip +>Consejo > ->You can place a "container" `
` like this **anywhere** inside the `` tag. You may have as many independent DOM containers on one page as you need. They are usually empty -- React will replace any existing content inside DOM containers. +>Puedes agregar un "contenedor" `
` como este en **cualquier sitio** dentro de la etiqueta ``. Puedes tener la cantidad de contenedores independientes en el DOM que desees. Por lo general éstos están vacíos -- React reemplazará cualquier contenido existente dentro de los contenedores del DOM. -### Step 2: Add the Script Tags {#step-2-add-the-script-tags} +### Paso 2: Agrega las etiquetas de Script {#step-2-add-the-script-tags} -Next, add three ` - + ``` -The first two tags load React. The third one will load your component code. +Las primeras dos etiquetas cargan React. La tercera carga tu código del componente. -### Step 3: Create a React Component {#step-3-create-a-react-component} +### Paso 3: Crea un Componente de React {#step-3-create-a-react-component} -Create a file called `like_button.js` next to your HTML page. +Crea un archivo llamado `like_button.js` en el mismo lugar donde tienes tu archivo HTML. -Open **[this starter code](https://cdn.rawgit.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js)** and paste it into the file you created. +Abre **[este código inicial](https://cdn.rawgit.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js)** y pégalo en el archivo que acabaste de crear. ->Tip +>Consejo > ->This code defines a React component called `LikeButton`. Don't worry if you don't understand it yet -- we'll cover the building blocks of React later in our [hands-on tutorial](/tutorial/tutorial.html) and [main concepts guide](/docs/hello-world.html). For now, let's just get it showing on the screen! +>Este código define un componente de React llamado `LikeButton`. No te preocupes si aún no lo entiendes -- vamos a cubrir los elementos básicos de React luego en nuestro [tutorial práctico](/tutorial/tutorial.html) y [guía de conceptos principal](/docs/hello-world.html). Por ahora, ¡vamos a hacer que se muestre en la pantalla! -After **[the starter code](https://cdn.rawgit.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js)**, add two lines to the bottom of `like_button.js`: +Después **[en el código inicial](https://cdn.rawgit.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js)**, agrega las siguientes dos lineas al final de `like_button.js`: ```js{3,4} -// ... the starter code you pasted ... +// ... el código inicial que pegaste ... const domContainer = document.querySelector('#like_button_container'); ReactDOM.render(e(LikeButton), domContainer); ``` -These two lines of code find the `
` we added to our HTML in the first step, and then display our "Like" button React component inside of it. +Estas dos lineas de código encuentran el `
` que agregamos en nuestro HTML en el primer paso y muestran el componente de React para nuestro botón de "Like" dentro del mismo. -### That's It! {#thats-it} +### ¡Eso es todo! {#thats-it} -There is no step four. **You have just added the first React component to your website.** +No hay un cuarto paso. **Ya agregaste tu primer componente de React a tu sitio web.** -Check out the next sections for more tips on integrating React. +Dale un vistazo a las siguientes secciones para más consejos sobre como integrar React. -**[View the full example source code](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605)** +**[Mira el código fuente del ejemplo completo](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605)** -**[Download the full example (2KB zipped)](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605/archive/f6c882b6ae18bde42dcf6fdb751aae93495a2275.zip)** +**[Descargar el ejemplo completo (2KB comprimido)](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605/archive/f6c882b6ae18bde42dcf6fdb751aae93495a2275.zip)** -### Tip: Reuse a Component {#tip-reuse-a-component} +### Consejo: Reusar un Componente {#tip-reuse-a-component} -Commonly, you might want to display React components in multiple places on the HTML page. Here is an example that displays the "Like" button three times and passes some data to it: +Por lo general, es deseado mostrar componentes de React en múltiples lugares de una página HTML. Aquí hay un ejemplo que muestra el botón de "Like" tres veces y le pasa algunos datos al mismo: -[View the full example source code](https://gist.github.com/gaearon/faa67b76a6c47adbab04f739cba7ceda) +[Mira el código fuente del ejemplo completo](https://gist.github.com/gaearon/faa67b76a6c47adbab04f739cba7ceda) -[Download the full example (2KB zipped)](https://gist.github.com/gaearon/faa67b76a6c47adbab04f739cba7ceda/archive/9d0dd0ee941fea05fd1357502e5aa348abb84c12.zip) +[Descargar el ejemplo completo (2KB comprimido)](https://gist.github.com/gaearon/faa67b76a6c47adbab04f739cba7ceda/archive/9d0dd0ee941fea05fd1357502e5aa348abb84c12.zip) ->Note +>Nota > ->This strategy is mostly useful while React-powered parts of the page are isolated from each other. Inside React code, it's easier to use [component composition](/docs/components-and-props.html#composing-components) instead. +>Esta estrategía es útil cuando las partes de la página que funcionan en React están aisladas entre sí. En código de React, es mucho más fácil usar [composición de componentes](/docs/components-and-props.html#composing-components) en su lugar. -### Tip: Minify JavaScript for Production {#tip-minify-javascript-for-production} +### Consejo: Compactar JavaScript para Producción {#tip-minify-javascript-for-production} -Before deploying your website to production, be mindful that unminifed JavaScript can significantly slow down the page for your users. +Antes de desplegar tu sitio web a producción, debes ser consciente que no compactar tu JavaScript puede disminuir de forma considerable la carga de tu página. -If you already minify the application scripts, **your site will be production-ready** if you ensure that the deployed HTML loads the versions of React ending in `production.min.js`: +Si ya has compactado los scripts de tu aplicación, **tu sitio estará listo para producción** si aseguras que el HTML desplegado carga las versiones de React finalizadas en `production.min.js`: ```js ``` -If you don't have a minification step for your scripts, [here's one way to set it up](https://gist.github.com/gaearon/42a2ffa41b8319948f9be4076286e1f3). +Si no tienes un paso para compactar tus scripts, [aquí hay una forma en que puedes establecerlo](https://gist.github.com/gaearon/42a2ffa41b8319948f9be4076286e1f3). -## Optional: Try React with JSX {#optional-try-react-with-jsx} +## Opcional: Prueba React con JSX {#optional-try-react-with-jsx} -In the examples above, we only relied on features that are natively supported by the browsers. This is why we used a JavaScript function call to tell React what to display: +En los ejemplos anteriores, hemos dependido solamente de características que son soportadas de forma nativa por los navegadores. Es por esto que usamos una llamada a una función de JavaScript para decirle a React que mostrar: ```js const e = React.createElement; -// Display a "Like"