You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Solo necesitas npm para instalar el preprocesador de JSX. No lo necesitarás para nada más. Tanto React como el código de la aplicación se pueden quedar como etiquetas `<script>` sin cambios.
202
202
@@ -207,7 +207,7 @@ Solo necesitas npm para instalar el preprocesador de JSX. No lo necesitarás par
207
207
Puedes preprocesar JSX de forma tal que cada vez que guardes un archivo con JSX dentro, la transformación se vuelva a ejecutar y convierta el JSX en un archivo nuevo con JavaScript simple que el navegador puede entender. Aquí puedes ver cómo hacer la configuración:
208
208
209
209
1. Crea una carpeta llamada **`src`**.
210
-
2. En tu terminal, ejecuta este comando: `npx babel --watch src --out-dir . --presets react-app/prod ` (¡No esperes a que termine! Este comando inicia un *watcher* (observador) automático para las ediciones de JSX dentro de `src`).
210
+
2. En tu terminal, ejecuta este comando: `npx babel --watch src --out-dir . --presets babel-preset-react-app/prod ` (¡No esperes a que termine! Este comando inicia un *watcher* (observador) automático para las ediciones de JSX dentro de `src`).
211
211
3. Mueve tu **`like-button.js`** con JSX ([¡debería lucir así!](https://gist.githubusercontent.com/gaearon/be5ae0fbf563d6c5fe5c1563907b13d2/raw/4c0d0b8c7f4fcb341720424c28c72059f8174c62/like-button.js)) a la nueva carpeta **`src`**.
212
212
213
213
El *watcher* creará un **`like-button.js`** preprocesado con el código JavaScript simple que es adecuado para un navegador.
### Reading the select box value when submitting a form {/*reading-the-select-box-value-when-submitting-a-form*/}
225
225
226
-
Add a [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) around your textarea with a [`<button type="submit">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button) inside. It will call your `<form onSubmit>` event handler. By default, the browser will send the form data to the current URL and refresh the page. You can override that behavior by calling `e.preventDefault()`. To read the form data, use [`new FormData(e.target)`](https://developer.mozilla.org/en-US/docs/Web/API/FormData).
226
+
Add a [`<form>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) around your select box with a [`<button type="submit">`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button) inside. It will call your `<form onSubmit>` event handler. By default, the browser will send the form data to the current URL and refresh the page. You can override that behavior by calling `e.preventDefault()`. To read the form data, use [`new FormData(e.target)`](https://developer.mozilla.org/en-US/docs/Web/API/FormData).
Copy file name to clipboardExpand all lines: beta/src/content/reference/react-dom/hydrate.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -64,7 +64,7 @@ React se unirá al HTML que existe dentro del nodo DOM `domNode`, y se encargar
64
64
65
65
Llama a `hydrate` para unir un <CodeStep step={1}>componente de React</CodeStep> a un <CodeStep step={2}>nodo DOM del navegador</CodeStep> renderizado por el servidor.
*`id`: The string `id` prop of the `<Profiler>` tree that has just committed. This lets you identify which part of the tree was committed if you are using multiple profilers.
57
-
*`phase`: Either `"mount"`or `"update"`. This lets you know whether the tree has just been mounted for the first time or re-rendered due to a change in props, state, or hooks.
57
+
*`phase`: `"mount"`, `"update"`or `"nested-update"`. This lets you know whether the tree has just been mounted for the first time or re-rendered due to a change in props, state, or hooks.
58
58
*`actualDuration`: The number of milliseconds spent rendering the `<Profiler>` and its descendants for the current update. This indicates how well the subtree makes use of memoization (e.g. [`memo`](/reference/react/memo) and [`useMemo`](/reference/react/useMemo)). Ideally this value should decrease significantly after the initial mount as many of the descendants will only need to re-render if their specific props change.
59
59
*`baseDuration`: The number of milliseconds estimating how much time it would take to re-render the entire `<Profiler>` subtree without any optimizations. It is calculated by summing up the most recent render durations of each component in the tree. This value estimates a worst-case cost of rendering (e.g. the initial mount or a tree with no memoization). Compare `actualDuration` against it to see if memoization is working.
60
60
*`startTime`: A numeric timestamp for when React began rendering the current update.
Copy file name to clipboardExpand all lines: beta/src/content/reference/react/useMemo.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -633,7 +633,7 @@ Un nodo de JSX como `<List items={visibleTodos} />` es un objeto como `{ type: L
633
633
634
634
Sin embargo, si React ve exactamente el mismo JSX que durante el renderizado anterior, no intentará volver a renderizar tu componente. Esto se debe a que los nodos JSX son [inmutables.](https://es.wikipedia.org/wiki/Objeto_inmutable) Un objeto de nodo JSX no podría haber cambiado con el tiempo, por lo que React sabe que es seguro omitir un nuevo renderizado. Sin embargo, para que esto funcione, el nodo tiene que *ser realmente el mismo objeto*, no simplemente tener el mismo aspecto en el código. Esto es lo que hace `useMemo` en este ejemplo.
635
635
636
-
Envolver manualmente los nodos JSX en `useMemo` no es conveniente. Por ejemplo, no puedes hacerlo condicionalmente. Es por esto que lo común es envolver los componentes con [`memo`](/reference/react/memo) en lugar de envolver los nodos de JSX.
636
+
Envolver manualmente los nodos JSX en `useMemo` no es conveniente. Por ejemplo, no puedes hacerlo condicionalmente. Comúnmente es por esto que se envuelven los componentes con [`memo`](/reference/react/memo) en lugar de envolver los nodos de JSX.
0 commit comments