diff --git a/beta/src/pages/learn/add-react-to-a-website.md b/beta/src/pages/learn/add-react-to-a-website.md index 0d810ea13..6b1487880 100644 --- a/beta/src/pages/learn/add-react-to-a-website.md +++ b/beta/src/pages/learn/add-react-to-a-website.md @@ -1,22 +1,22 @@ --- -title: Add React to a Website +title: Añadir React a un sitio web --- -React has been designed from the start for gradual adoption, and you can use as little or as much React as you need. Whether you're working with micro-frontends, an existing system, or just giving React a try, you can start adding interactive React components to an HTML page with just a few lines of code—and no build tooling! +React se ha diseñado desde un inicio para una adopción gradual, así puedes usar tan poco o mucho de React como necesites. Ya sea que estás trabajando con *micro-frontends*, un sistema existente o simplemente probando React, puedes empezar a añadir componentes interactivos de React a una página HTML con solo unas pocas líneas de código- ¡y sin herramientas para compilar! -## Add React in one minute {/*add-react-in-one-minute*/} +## Añade React en un minuto {/*add-react-in-one-minute*/} -You can add a React component to an existing HTML page in under a minute. Try this out with your own website or [an empty HTML file](https://gist.github.com/rachelnabors/7b33305bf33776354797a2e3c1445186/archive/859eac2f7079c9e1f0a6eb818a9684a464064d80.zip)—all you need is an internet connection and a text editor like Notepad (or VSCode—check out our guide on [how to set yours up](/learn/editor-setup/))! +Puedes añadir componentes de React a una página HTML existente en menos de un minuto. Pruébalo con tu propio sitio web [o un archivo HTML vacío](https://gist.github.com/rachelnabors/7b33305bf33776354797a2e3c1445186/archive/859eac2f7079c9e1f0a6eb818a9684a464064d80.zip)—todo lo que necesitas es una conexión a internet y un editor de texto como Notepad (o VSCode-¡chequea nuestra guía sobre [cómo puedes configurar el tuyo](/learn/editor-setup/)!). -### Step 1: Add an element to the HTML {/*step-1-add-an-element-to-the-html*/} +### Paso 1: Añade un elemento al HTML {/*step-1-add-an-element-to-the-html*/} -In the HTML page you want to edit, add an HTML element like an empty `
` tag with a unique `id` to mark the spot where you want to display something with React. +En la página HTML que quieres editar, añade un elemento HTML, algo como una etiqueta `
` vacía con un `id` único que marque el lugar dónde quieres mostrar algo en React. -You can place a "container" element like this `
` anywhere inside the `` tag. React will replace any existing content inside HTML elements, so they are usually empty. You can have as many of these HTML elements on one page as you need. +Puedes ubicar un elemento «contenedor» como este `
` en cualquier lugar dentro de la etiqueta ``. React reemplazará cualquier contenido existente dentro de los elementos HTML, así que por lo general están vacíos. Puedes tener tantos de estos elementos HTML en una página como lo necesites. ```html {3} @@ -26,17 +26,17 @@ You can place a "container" element like this `
` anywhere inside the ` ``` -### Step 2: Add the Script Tags {/*step-2-add-the-script-tags*/} +### Paso 2: Añade las etiquetas script {/*step-2-add-the-script-tags*/} -In the HTML page, right before the closing `` tag, add three ` ``` -## Try React with JSX {/*try-react-with-jsx*/} +## Prueba React con JSX {/*try-react-with-jsx*/} -The examples above rely on features that are natively supported by browsers. This is why **like_button.js** uses a JavaScript function call to tell React what to display: +Los ejemplos de arriba dependen de funcionalidades que son compatibles de forma nativa con los navegadores. Es por esto que **like_button.js** utiliza una llamada a una función para decirle a React qué tiene que mostrar: ```js return React.createElement('button', {onClick: () => setLiked(true)}, 'Like'); ``` -However, React also offers an option to use [JSX](/learn/writing-markup-with-jsx), an HTML-like JavaScript syntax, instead: +Sin embargo, React también ofrece una opción para usar [JSX](/learn/writing-markup-with-jsx), una sintaxis de JavaScript similar a HTML. Permite escribir: ```jsx return ; ``` -These two code snippets are equivalent. JSX is popular syntax for describing markup in JavaScript. Many people find it familiar and helpful for writing UI code--both with React and with other libraries. You might see "markup sprinkled throughout your JavaScript" in other projects! +Estos dos fragmentos de código son equivalentes. JSX es una sintaxis popular para describir marcado en JavaScript. Muchas personas lo encuentran familiar y útil para escribir código de IU--tanto con React como con otras bibliotecas. ¡Puede que veas «marcado esparcido por tu JavaScript» en otros proyectos! -> You can play with transforming HTML markup into JSX using [this online converter](https://babeljs.io/en/repl#?babili=false&browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=DwIwrgLhD2B2AEcDCAbAlgYwNYF4DeAFAJTw4B88EAFmgM4B0tAphAMoQCGETBe86WJgBMAXJQBOYJvAC-RGWQBQ8FfAAyaQYuAB6cFDhkgA&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=es2015%2Creact%2Cstage-2&prettier=false&targets=&version=7.4.3). +> Puedes interactuar con la transformación de marcado HTML en JSX usando este [convertir en línea](https://babeljs.io/en/repl#?babili=false&browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=DwIwrgLhD2B2AEcDCAbAlgYwNYF4DeAFAJTw4B88EAFmgM4B0tAphAMoQCGETBe86WJgBMAXJQBOYJvAC-RGWQBQ8FfAAyaQYuAB6cFDhkgA&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=es2015%2Creact%2Cstage-2&prettier=false&targets=&version=7.4.3). -### Try JSX {/*try-jsx*/} +### Prueba JSX {/*try-jsx*/} -The quickest way to try JSX in your project is to add the Babel compiler to your page's `` along with React and ReactDOM like so: +La forma más rápida de probar JSX en tu proyecto es añadir el compilador de Babel al `` de tu página junto con React y ReactDOM de esta forma: ```html {6} @@ -154,7 +154,7 @@ The quickest way to try JSX in your project is to add the Babel compiler to your ``` -Now you can use JSX in any ` ``` -To convert **like_button.js** to use JSX: +Para convertir **like_button.js** para que use JSX: -1. In **like_button.js**, replace +1. En **like_button.js**, reemplaza ```js return React.createElement( @@ -177,63 +177,63 @@ return React.createElement( ); ``` -with: +con: ```jsx return ; ``` -2. In **index.html**, add `type="text/babel"` to the like button's script tag: +2. En **index.html**, añade `type="text/babel"` a la etiqueta script del botón: ```html ``` -Here is [an example HTML file with JSX](https://raw.githubusercontent.com/reactjs/reactjs.org/main/static/html/single-file-example.html) that you can download and play with. +Aquí hay [un ejemplo de un archivo HTML con JSX](https://raw.githubusercontent.com/reactjs/reactjs.org/main/static/html/single-file-example.html) que puedes descargar y jugar con él. -This approach is fine for learning and creating simple demos. However, it makes your website slow and **isn't suitable for production**. When you're ready to move forward, remove this new `