diff --git a/src/components/MDX/Sandpack/DownloadButton.tsx b/src/components/MDX/Sandpack/DownloadButton.tsx index 77f081bd8..5f36eb3c4 100644 --- a/src/components/MDX/Sandpack/DownloadButton.tsx +++ b/src/components/MDX/Sandpack/DownloadButton.tsx @@ -5,6 +5,7 @@ import {useSyncExternalStore} from 'react'; import {useSandpack} from '@codesandbox/sandpack-react/unstyled'; import {IconDownload} from '../../Icon/IconDownload'; +import {AppJSPath, StylesCSSPath, SUPPORTED_FILES} from './createFileMap'; export interface DownloadButtonProps {} let supportsImportMap = false; @@ -32,8 +33,6 @@ function useSupportsImportMap() { return useSyncExternalStore(subscribe, getCurrentValue, getServerSnapshot); } -const SUPPORTED_FILES = ['/App.js', '/styles.css']; - export function DownloadButton({ providedFiles, }: { @@ -49,8 +48,8 @@ export function DownloadButton({ } const downloadHTML = () => { - const css = sandpack.files['/styles.css']?.code ?? ''; - const code = sandpack.files['/App.js']?.code ?? ''; + const css = sandpack.files[StylesCSSPath]?.code ?? ''; + const code = sandpack.files[AppJSPath]?.code ?? ''; const blob = new Blob([ ` diff --git a/src/components/MDX/Sandpack/Preview.tsx b/src/components/MDX/Sandpack/Preview.tsx index 059645550..9669e5f4f 100644 --- a/src/components/MDX/Sandpack/Preview.tsx +++ b/src/components/MDX/Sandpack/Preview.tsx @@ -54,7 +54,7 @@ export function Preview({ // When throwing a new Error in Sandpack - we want to disable the dev error dialog // to show the Error Boundary fallback - if (rawError && rawError.message.includes(`throw Error('Example error')`)) { + if (rawError && rawError.message.includes('Example Error:')) { rawError = null; } diff --git a/src/components/MDX/Sandpack/SandpackRoot.tsx b/src/components/MDX/Sandpack/SandpackRoot.tsx index df0c757f2..d47fd903c 100644 --- a/src/components/MDX/Sandpack/SandpackRoot.tsx +++ b/src/components/MDX/Sandpack/SandpackRoot.tsx @@ -9,6 +9,7 @@ import {SandpackLogLevel} from '@codesandbox/sandpack-client'; import {CustomPreset} from './CustomPreset'; import {createFileMap} from './createFileMap'; import {CustomTheme} from './Themes'; +import {template} from './template'; type SandpackProps = { children: React.ReactNode; @@ -70,17 +71,19 @@ function SandpackRoot(props: SandpackProps) { const codeSnippets = Children.toArray(children) as React.ReactElement[]; const files = createFileMap(codeSnippets); - files['/styles.css'] = { - code: [sandboxStyle, files['/styles.css']?.code ?? ''].join('\n\n'), - hidden: !files['/styles.css']?.visible, + files['/src/styles.css'] = { + code: [sandboxStyle, files['/src/styles.css']?.code ?? ''].join('\n\n'), + hidden: !files['/src/styles.css']?.visible, }; return (
{ return codeSnippets.reduce( (result: Record, codeSnippet: React.ReactElement) => { @@ -26,15 +30,16 @@ export const createFileMap = (codeSnippets: any) => { } } else { if (props.className === 'language-js') { - filePath = '/App.js'; + filePath = AppJSPath; } else if (props.className === 'language-css') { - filePath = '/styles.css'; + filePath = StylesCSSPath; } else { throw new Error( `Code block is missing a filename: ${props.children}` ); } } + if (result[filePath]) { throw new Error( `File ${filePath} was defined multiple times. Each file snippet should have a unique path name` diff --git a/src/components/MDX/Sandpack/index.tsx b/src/components/MDX/Sandpack/index.tsx index 6873547a1..6755ba8de 100644 --- a/src/components/MDX/Sandpack/index.tsx +++ b/src/components/MDX/Sandpack/index.tsx @@ -3,7 +3,7 @@ */ import {lazy, memo, Children, Suspense} from 'react'; -import {createFileMap} from './createFileMap'; +import {AppJSPath, createFileMap} from './createFileMap'; const SandpackRoot = lazy(() => import('./SandpackRoot')); @@ -57,7 +57,7 @@ export default memo(function SandpackWrapper(props: any): any { ); let activeCode; if (!activeCodeSnippet.length) { - activeCode = codeSnippet['/App.js'].code; + activeCode = codeSnippet[AppJSPath].code; } else { activeCode = codeSnippet[activeCodeSnippet[0]].code; } diff --git a/src/components/MDX/Sandpack/template.ts b/src/components/MDX/Sandpack/template.ts new file mode 100644 index 000000000..9ead18a14 --- /dev/null +++ b/src/components/MDX/Sandpack/template.ts @@ -0,0 +1,54 @@ +export const template = { + '/src/index.js': { + hidden: true, + code: `import React, { StrictMode } from "react"; +import { createRoot } from "react-dom/client"; +import "./styles.css"; + +import App from "./App"; + +const root = createRoot(document.getElementById("root")); +root.render( + + + +);`, + }, + '/package.json': { + hidden: true, + code: JSON.stringify( + { + name: 'react.dev', + version: '0.0.0', + main: '/src/index.js', + scripts: { + start: 'react-scripts start', + build: 'react-scripts build', + test: 'react-scripts test --env=jsdom', + eject: 'react-scripts eject', + }, + dependencies: { + react: '^18.0.0', + 'react-dom': '^18.0.0', + 'react-scripts': '^5.0.0', + }, + }, + null, + 2 + ), + }, + '/public/index.html': { + hidden: true, + code: ` + + + + + Document + + +
+ +`, + }, +}; diff --git a/src/components/Seo.tsx b/src/components/Seo.tsx index 5af169e13..dfc4f6104 100644 --- a/src/components/Seo.tsx +++ b/src/components/Seo.tsx @@ -24,6 +24,7 @@ const deployedTranslations = [ 'es', 'fr', 'ja', + 'tr', // We'll add more languages when they have enough content. // Please DO NOT edit this list without a discussion in the reactjs/react.dev repo. // It must be the same between all translations. diff --git a/src/content/blog/2023/03/16/introducing-react-dev.md b/src/content/blog/2023/03/16/introducing-react-dev.md index 32f56f708..5256ce851 100644 --- a/src/content/blog/2023/03/16/introducing-react-dev.md +++ b/src/content/blog/2023/03/16/introducing-react-dev.md @@ -57,7 +57,7 @@ Si te gusta aprender haciendo, te recomendamos que consultes el [tutorial de Tic -```js App.js +```js src/App.js import { useState } from 'react'; function Square({ value, onSquareClick }) { @@ -175,7 +175,7 @@ function calculateWinner(squares) { } ``` -```css styles.css +```css src/styles.css * { box-sizing: border-box; } diff --git a/src/content/community/conferences.md b/src/content/community/conferences.md index 1c164a098..9f020966e 100644 --- a/src/content/community/conferences.md +++ b/src/content/community/conferences.md @@ -10,72 +10,77 @@ Do you know of a local React.js conference? Add it here! (Please keep the list c ## Upcoming Conferences {/*upcoming-conferences*/} -### RedwoodJS Conference 2023 {/*redwoodjs-conference-2023*/} -September 26 - 29, 2023. Grants Pass, Oregon + remote (hybrid event) - -[Website](https://www.redwoodjsconf.com/) - [Twitter](https://twitter.com/redwoodjs) +### App.js Conf 2024 {/*appjs-conf-2024*/} +May 22 - 24, 2024. In-person in Kraków, Poland + remote -### React Alicante 2023 {/*react-alicante-2023*/} -September 28 - 30, 2023. Alicante, Spain +[Website](https://appjs.co) - [Twitter](https://twitter.com/appjsconf) -[Website](https://reactalicante.es/) - [Twitter](https://twitter.com/reactalicante) +### Render(ATL) 2024 🍑 {/*renderatl-2024-*/} +June 12 - June 14, 2024. Atlanta, GA, USA -### React Live 2023 {/*react-live-2023*/} -September 29, 2023. Amsterdam, Netherlands +[Website](https://renderatl.com) - [Discord](https://www.renderatl.com/discord) - [Twitter](https://twitter.com/renderATL) - [Instagram](https://www.instagram.com/renderatl/) - [Facebook](https://www.facebook.com/renderatl/) - [LinkedIn](https://www.linkedin.com/company/renderatl) - [Podcast](https://www.renderatl.com/culture-and-code#/) -[Website](https://reactlive.nl/) +### React India 2024 {/*react-india-2024*/} +October 17 - 19, 2024. In-person in Goa, India (hybrid event) + Oct 15 2024 - remote day -### React Native EU 2023 {/*react-native-eu-2023*/} -September 7 & 8, 2023. Wrocław, Poland +[Website](https://www.reactindia.io) - [Twitter](https://twitter.com/react_india) - [Facebook](https://www.facebook.com/ReactJSIndia) - [Youtube](https://www.youtube.com/channel/UCaFbHCBkPvVv1bWs_jwYt3w) -[Website](https://react-native.eu) - [Twitter](https://twitter.com/react_native_eu) - [Facebook](https://www.facebook.com/reactnativeeu) +## Past Conferences {/*past-conferences*/} -### RenderCon Kenya 2023 {/*rendercon-kenya-2023*/} -September 29 - 30, 2023. Nairobi, Kenya +### React Day Berlin 2023 {/*react-day-berlin-2023*/} +December 8 & 12, 2023. In-person in Berlin, Germany + remote first interactivity (hybrid event) -[Website](https://rendercon.org/) - [Twitter](https://twitter.com/renderconke) - [LinkedIn](https://www.linkedin.com/company/renderconke/) - [YouTube](https://www.youtube.com/channel/UC0bCcG8gHUL4njDOpQGcMIA) +[Website](https://reactday.berlin) - [Twitter](https://twitter.com/reactdayberlin) - [Facebook](https://www.facebook.com/reactdayberlin/) - [Videos](https://portal.gitnation.org/events/react-day-berlin-2023) -### React India 2023 {/*react-india-2023*/} -October 5 - 7, 2023. In-person in Goa, India (hybrid event) + Oct 3 2023 - remote day +### React Summit US 2023 {/*react-summit-us-2023*/} +November 13 & 15, 2023. In-person in New York, US + remote first interactivity (hybrid event) -[Website](https://www.reactindia.io) - [Twitter](https://twitter.com/react_india) - [Facebook](https://www.facebook.com/ReactJSIndia) - [Youtube](https://www.youtube.com/channel/UCaFbHCBkPvVv1bWs_jwYt3w) +[Website](https://reactsummit.us) - [Twitter](https://twitter.com/reactsummit) - [Facebook](https://www.facebook.com/reactamsterdam) - [Videos](https://portal.gitnation.org/events/react-summit-us-2023) -### React Brussels 2023 {/*react-brussels-2023*/} -October 13th 2023. In-person in Brussels, Belgium + Remote (hybrid) +### reactjsday 2023 {/*reactjsday-2023*/} +October 27th 2023. In-person in Verona, Italy and online (hybrid event) -[Website](https://www.react.brussels/) - [Twitter](https://twitter.com/BrusselsReact) +[Website](https://2023.reactjsday.it/) - [Twitter](https://twitter.com/reactjsday) - [Facebook](https://www.facebook.com/GrUSP/) - [YouTube](https://www.youtube.com/c/grusp) ### React Advanced 2023 {/*react-advanced-2023*/} October 20 & 23, 2023. In-person in London, UK + remote first interactivity (hybrid event) [Website](https://www.reactadvanced.com/) - [Twitter](https://twitter.com/ReactAdvanced) - [Facebook](https://www.facebook.com/ReactAdvanced) - [Videos](https://portal.gitnation.org/events/react-advanced-conference-2023) -### reactjsday 2023 {/*reactjsday-2023*/} -October 27th 2023. In-person in Verona, Italy and online (hybrid event) +### React Brussels 2023 {/*react-brussels-2023*/} +October 13th 2023. In-person in Brussels, Belgium + Remote (hybrid) -[Website](https://2023.reactjsday.it/) - [Twitter](https://twitter.com/reactjsday) - [Facebook](https://www.facebook.com/GrUSP/) - [YouTube](https://www.youtube.com/c/grusp) +[Website](https://www.react.brussels/) - [Twitter](https://twitter.com/BrusselsReact) -### React Summit US 2023 {/*react-summit-us-2023*/} -November 13 & 15, 2023. In-person in New York, US + remote first interactivity (hybrid event) +### React India 2023 {/*react-india-2023*/} +October 5 - 7, 2023. In-person in Goa, India (hybrid event) + Oct 3 2023 - remote day -[Website](https://reactsummit.us) - [Twitter](https://twitter.com/reactsummit) - [Facebook](https://www.facebook.com/reactamsterdam) - [Videos](https://portal.gitnation.org/events/react-summit-us-2023) +[Website](https://www.reactindia.io) - [Twitter](https://x.com/react_india) - [Facebook](https://www.facebook.com/ReactJSIndia) - [Youtube](https://www.youtube.com/channel/UCaFbHCBkPvVv1bWs_jwYt3w) -### React Day Berlin 2023 {/*react-day-berlin-2023*/} -December 8 & 12, 2023. In-person in Berlin, Germany + remote first interactivity (hybrid event) +### RenderCon Kenya 2023 {/*rendercon-kenya-2023*/} +September 29 - 30, 2023. Nairobi, Kenya -[Website](https://reactday.berlin) - [Twitter](https://twitter.com/reactdayberlin) - [Facebook](https://www.facebook.com/reactdayberlin/) - [Videos](https://portal.gitnation.org/events/react-day-berlin-2023) +[Website](https://rendercon.org/) - [Twitter](https://twitter.com/renderconke) - [LinkedIn](https://www.linkedin.com/company/renderconke/) - [YouTube](https://www.youtube.com/channel/UC0bCcG8gHUL4njDOpQGcMIA) -### App.js Conf 2024 {/*appjs-conf-2024*/} -May 22 - 24, 2024. In-person in Kraków, Poland + remote +### React Live 2023 {/*react-live-2023*/} +September 29, 2023. Amsterdam, Netherlands -[Website](https://appjs.co) - [Twitter](https://twitter.com/appjsconf) +[Website](https://reactlive.nl/) -### Render(ATL) 2024 🍑 {/*renderatl-2024-*/} -June 12 - June 14, 2024. Atlanta, GA, USA +### React Alicante 2023 {/*react-alicante-2023*/} +September 28 - 30, 2023. Alicante, Spain -[Website](https://renderatl.com) - [Discord](https://www.renderatl.com/discord) - [Twitter](https://twitter.com/renderATL) - [Instagram](https://www.instagram.com/renderatl/) - [Facebook](https://www.facebook.com/renderatl/) - [LinkedIn](https://www.linkedin.com/company/renderatl) - [Podcast](https://www.renderatl.com/culture-and-code#/) +[Website](https://reactalicante.es/) - [Twitter](https://twitter.com/reactalicante) -## Past Conferences {/*past-conferences*/} +### RedwoodJS Conference 2023 {/*redwoodjs-conference-2023*/} +September 26 - 29, 2023. Grants Pass, Oregon + remote (hybrid event) + +[Website](https://www.redwoodjsconf.com/) - [Twitter](https://twitter.com/redwoodjs) + +### React Native EU 2023 {/*react-native-eu-2023*/} +September 7 & 8, 2023. Wrocław, Poland + +[Website](https://react-native.eu) - [Twitter](https://twitter.com/react_native_eu) - [Facebook](https://www.facebook.com/reactnativeeu) ### React Rally 2023 🐙 {/*react-rally-2023*/} August 17 & 18, 2023. Salt Lake City, UT, USA diff --git a/src/content/community/meetups.md b/src/content/community/meetups.md index a40677194..4eb763c6c 100644 --- a/src/content/community/meetups.md +++ b/src/content/community/meetups.md @@ -101,6 +101,7 @@ title: Reuniones de React * [Bangalore (React Native)](https://www.meetup.com/React-Native-Bangalore-Meetup) * [Chennai](https://www.meetup.com/React-Chennai/) * [Delhi NCR](https://www.meetup.com/React-Delhi-NCR/) +* [Mumbai](https://reactmumbai.dev) * [Pune](https://www.meetup.com/ReactJS-and-Friends/) ## Indonesia {/*indonesia*/} diff --git a/src/content/learn/add-react-to-an-existing-project.md b/src/content/learn/add-react-to-an-existing-project.md index 7bdc83210..cfb4882b9 100644 --- a/src/content/learn/add-react-to-an-existing-project.md +++ b/src/content/learn/add-react-to-an-existing-project.md @@ -67,7 +67,7 @@ Después agrega las siguientes líneas de código al principio de tu archivo Jav ``` -```js index.js active +```js src/index.js active import { createRoot } from 'react-dom/client'; // Borra el contenido HTML existente @@ -131,7 +131,7 @@ Esto te permite encontrar aquel elemento HTML con [`document.getElementById`](ht ``` -```js index.js active +```js src/index.js active import { createRoot } from 'react-dom/client'; function NavigationBar() { diff --git a/src/content/learn/adding-interactivity.md b/src/content/learn/adding-interactivity.md index cf347d726..2fddc519b 100644 --- a/src/content/learn/adding-interactivity.md +++ b/src/content/learn/adding-interactivity.md @@ -134,7 +134,7 @@ export default function Gallery() { } ``` -```js data.js +```js src/data.js export const sculptureList = [{ name: 'Homenaje a la neurocirugía', artist: 'Marta Colvin Andrade', diff --git a/src/content/learn/choosing-the-state-structure.md b/src/content/learn/choosing-the-state-structure.md index 0377f680c..b4c6a3289 100644 --- a/src/content/learn/choosing-the-state-structure.md +++ b/src/content/learn/choosing-the-state-structure.md @@ -612,7 +612,7 @@ export default function TravelPlan() { } ``` -```js places.js active +```js src/places.js active export const initialTravelPlan = { id: 0, title: '(Root)', @@ -868,7 +868,7 @@ export default function TravelPlan() { } ``` -```js places.js active +```js src/places.js active export const initialTravelPlan = { 0: { id: 0, @@ -1204,7 +1204,7 @@ function PlaceTree({ id, parentId, placesById, onComplete }) { } ``` -```js places.js +```js src/places.js export const initialTravelPlan = { 0: { id: 0, @@ -1543,7 +1543,7 @@ function PlaceTree({ id, parentId, placesById, onComplete }) { } ``` -```js places.js +```js src/places.js export const initialTravelPlan = { 0: { id: 0, @@ -1841,7 +1841,7 @@ Este componente `Reloj` recibe dos props: `color` y `tiempo`. Cuando seleccionas -```js Clock.js active +```js src/Clock.js active import { useState } from 'react'; export default function Clock(props) { @@ -1854,7 +1854,7 @@ export default function Clock(props) { } ``` -```js App.js hidden +```js src/App.js hidden import { useState, useEffect } from 'react'; import Clock from './Clock.js'; @@ -1896,7 +1896,7 @@ El problema es que este componente tiene un estado de `color` inicializado con e -```js Clock.js active +```js src/Clock.js active import { useState } from 'react'; export default function Clock(props) { @@ -1908,7 +1908,7 @@ export default function Clock(props) { } ``` -```js App.js hidden +```js src/App.js hidden import { useState, useEffect } from 'react'; import Clock from './Clock.js'; @@ -1948,7 +1948,7 @@ O, usando la sintaxis de desestructuración: -```js Clock.js active +```js src/Clock.js active import { useState } from 'react'; export default function Clock({ color, time }) { @@ -1960,7 +1960,7 @@ export default function Clock({ color, time }) { } ``` -```js App.js hidden +```js src/App.js hidden import { useState, useEffect } from 'react'; import Clock from './Clock.js'; @@ -2010,7 +2010,7 @@ Esta lista de empaque tiene un pie de página que muestra cuántos artículos es -```js App.js +```js src/App.js import { useState } from 'react'; import AddItem from './AddItem.js'; import PackingList from './PackingList.js'; @@ -2078,7 +2078,7 @@ export default function TravelPlan() { } ``` -```js AddItem.js hidden +```js src/AddItem.js hidden import { useState } from 'react'; export default function AddItem({ onAddItem }) { @@ -2099,7 +2099,7 @@ export default function AddItem({ onAddItem }) { } ``` -```js PackingList.js hidden +```js src/PackingList.js hidden import { useState } from 'react'; export default function PackingList({ @@ -2149,7 +2149,7 @@ Aunque podrías cambiar cuidadosamente cada controlador de evento para actualiza -```js App.js +```js src/App.js import { useState } from 'react'; import AddItem from './AddItem.js'; import PackingList from './PackingList.js'; @@ -2213,7 +2213,7 @@ export default function TravelPlan() { } ``` -```js AddItem.js hidden +```js src/AddItem.js hidden import { useState } from 'react'; export default function AddItem({ onAddItem }) { @@ -2234,7 +2234,7 @@ export default function AddItem({ onAddItem }) { } ``` -```js PackingList.js hidden +```js src/PackingList.js hidden import { useState } from 'react'; export default function PackingList({ @@ -2290,7 +2290,7 @@ Este código funciona, pero hay un pequeño fallo en la UI. Cuando presionas "Ma -```js App.js +```js src/App.js import { useState } from 'react'; import { initialLetters } from './data.js'; import Letter from './Letter.js'; @@ -2337,7 +2337,7 @@ export default function MailClient() { } ``` -```js Letter.js +```js src/Letter.js export default function Letter({ letter, isHighlighted, @@ -2367,7 +2367,7 @@ export default function Letter({ } ``` -```js data.js +```js src/data.js export const initialLetters = [{ id: 0, subject: '¿Listo para la aventura?', @@ -2399,7 +2399,7 @@ Para solucionar el problema, elimina la duplicación del estado. En lugar de alm -```js App.js +```js src/App.js import { useState } from 'react'; import { initialLetters } from './data.js'; import Letter from './Letter.js'; @@ -2446,7 +2446,7 @@ export default function MailClient() { } ``` -```js Letter.js +```js src/Letter.js export default function Letter({ letter, isHighlighted, @@ -2476,7 +2476,7 @@ export default function Letter({ } ``` -```js data.js +```js src/data.js export const initialLetters = [{ id: 0, subject: '¿Listo para la aventura?', @@ -2516,7 +2516,7 @@ En lugar de un único ID seleccionado, es posible que desees mantener una matriz -```js App.js +```js src/App.js import { useState } from 'react'; import { letters } from './data.js'; import Letter from './Letter.js'; @@ -2559,7 +2559,7 @@ export default function MailClient() { } ``` -```js Letter.js +```js src/Letter.js export default function Letter({ letter, onToggle, @@ -2584,7 +2584,7 @@ export default function Letter({ } ``` -```js data.js +```js src/data.js export const letters = [{ id: 0, subject: '¿Listo para la aventura?', @@ -2615,7 +2615,7 @@ En lugar de un solo `selectedId`, mantén un *array* `selectedIds` en el estado. -```js App.js +```js src/App.js import { useState } from 'react'; import { letters } from './data.js'; import Letter from './Letter.js'; @@ -2667,7 +2667,7 @@ export default function MailClient() { } ``` -```js Letter.js +```js src/Letter.js export default function Letter({ letter, onToggle, @@ -2692,7 +2692,7 @@ export default function Letter({ } ``` -```js data.js +```js src/data.js export const letters = [{ id: 0, subject: '¿Listo para la aventura?', @@ -2723,7 +2723,7 @@ Para solucionar esto, puede mantener un [Set](https://developer.mozilla.org/en-U -```js App.js +```js src/App.js import { useState } from 'react'; import { letters } from './data.js'; import Letter from './Letter.js'; @@ -2772,7 +2772,7 @@ export default function MailClient() { } ``` -```js Letter.js +```js src/Letter.js export default function Letter({ letter, onToggle, @@ -2797,7 +2797,7 @@ export default function Letter({ } ``` -```js data.js +```js src/data.js export const letters = [{ id: 0, subject: '¿Listo para la aventura?', diff --git a/src/content/learn/describing-the-ui.md b/src/content/learn/describing-the-ui.md index 5831f00db..2bb0e1e9a 100644 --- a/src/content/learn/describing-the-ui.md +++ b/src/content/learn/describing-the-ui.md @@ -69,7 +69,7 @@ Es posible declarar muchos componentes en un archivo, pero los archivos grandes -```js App.js hidden +```js src/App.js hidden import Gallery from './Gallery.js'; export default function App() { @@ -79,7 +79,7 @@ export default function App() { } ``` -```js Gallery.js active +```js src/Gallery.js active import Profile from './Profile.js'; export default function Gallery() { @@ -94,7 +94,7 @@ export default function Gallery() { } ``` -```js Profile.js +```js src/Profile.js export default function Profile() { return ( -```js App.js +```js src/App.js import { people } from './data.js'; import { getImageUrl } from './utils.js'; @@ -398,7 +398,7 @@ export default function List() { } ``` -```js data.js +```js src/data.js export const people = [{ id: 0, name: 'Creola Katherine Johnson', @@ -432,7 +432,7 @@ export const people = [{ }]; ``` -```js utils.js +```js src/utils.js export function getImageUrl(person) { return ( 'https://i.imgur.com/' + diff --git a/src/content/learn/escape-hatches.md b/src/content/learn/escape-hatches.md index 1e72b7e73..25ca57753 100644 --- a/src/content/learn/escape-hatches.md +++ b/src/content/learn/escape-hatches.md @@ -163,7 +163,7 @@ export default function ChatRoom() { } ``` -```js chat.js +```js src/chat.js export function createConnection() { // Una aplicación real se conectaría al servidor return { @@ -281,7 +281,7 @@ export default function App() { } ``` -```js chat.js +```js src/chat.js export function createConnection(serverUrl, roomId) { // Una aplicación real se conectaría al servidor return { @@ -395,7 +395,7 @@ export default function App() { } ``` -```js chat.js +```js src/chat.js export function createConnection(serverUrl, roomId) { // Una aplicación real se conectaría al servidor let connectedCallback; @@ -424,7 +424,7 @@ export function createConnection(serverUrl, roomId) { } ``` -```js notifications.js +```js src/notifications.js import Toastify from 'toastify-js'; import 'toastify-js/src/toastify.css'; @@ -528,7 +528,7 @@ export default function App() { } ``` -```js chat.js +```js src/chat.js export function createConnection(serverUrl, roomId) { // Una aplicación real se conectaría al servidor let connectedCallback; @@ -557,7 +557,7 @@ export function createConnection(serverUrl, roomId) { } ``` -```js notifications.js hidden +```js src/notifications.js hidden import Toastify from 'toastify-js'; import 'toastify-js/src/toastify.css'; @@ -647,7 +647,7 @@ export default function App() { } ``` -```js chat.js +```js src/chat.js export function createConnection({ serverUrl, roomId }) { // Una aplicación real se conectaría al servidor return { @@ -721,7 +721,7 @@ export default function App() { } ``` -```js chat.js +```js src/chat.js export function createConnection({ serverUrl, roomId }) { // Una aplicación real se conectaría al servidor return { @@ -797,7 +797,7 @@ function Dot({ position, opacity }) { } ``` -```js usePointerPosition.js +```js src/usePointerPosition.js import { useState, useEffect } from 'react'; export function usePointerPosition() { @@ -813,7 +813,7 @@ export function usePointerPosition() { } ``` -```js useDelayedValue.js +```js src/useDelayedValue.js import { useState, useEffect } from 'react'; export function useDelayedValue(value, delay) { diff --git a/src/content/learn/extracting-state-logic-into-a-reducer.md b/src/content/learn/extracting-state-logic-into-a-reducer.md index b8400ccfc..2063d5be5 100644 --- a/src/content/learn/extracting-state-logic-into-a-reducer.md +++ b/src/content/learn/extracting-state-logic-into-a-reducer.md @@ -23,7 +23,7 @@ A medida que tus componentes crecen en complejidad, puede volverse difícil segu -```js App.js +```js src/App.js import { useState } from 'react'; import AddTask from './AddTask.js'; import TaskList from './TaskList.js'; @@ -79,7 +79,7 @@ const initialTasks = [ ]; ``` -```js AddTask.js hidden +```js src/AddTask.js hidden import { useState } from 'react'; export default function AddTask({onAddTask}) { @@ -103,7 +103,7 @@ export default function AddTask({onAddTask}) { } ``` -```js TaskList.js hidden +```js src/TaskList.js hidden import { useState } from 'react'; export default function TaskList({tasks, onChangeTask, onDeleteTask}) { @@ -398,7 +398,7 @@ Puedes incluso utilizar el método `reduce()` con un estado inicial (`initialSta -```js index.js active +```js src/index.js active import tasksReducer from './tasksReducer.js'; let initialState = []; @@ -415,7 +415,7 @@ const output = document.getElementById('output'); output.textContent = JSON.stringify(finalState, null, 2); ``` -```js tasksReducer.js +```js src/tasksReducer.js export default function tasksReducer(tasks, action) { switch (action.type) { case 'added': { @@ -493,7 +493,7 @@ Y devuelve: -```js App.js +```js src/App.js import { useReducer } from 'react'; import AddTask from './AddTask.js'; import TaskList from './TaskList.js'; @@ -574,7 +574,7 @@ const initialTasks = [ ]; ``` -```js AddTask.js hidden +```js src/AddTask.js hidden import { useState } from 'react'; export default function AddTask({onAddTask}) { @@ -598,7 +598,7 @@ export default function AddTask({onAddTask}) { } ``` -```js TaskList.js hidden +```js src/TaskList.js hidden import { useState } from 'react'; export default function TaskList({tasks, onChangeTask, onDeleteTask}) { @@ -678,7 +678,7 @@ Si lo deseas, puedes incluso mover el reducer a un archivo diferente: -```js App.js +```js src/App.js import { useReducer } from 'react'; import AddTask from './AddTask.js'; import TaskList from './TaskList.js'; @@ -730,7 +730,7 @@ const initialTasks = [ ]; ``` -```js tasksReducer.js +```js src/tasksReducer.js export default function tasksReducer(tasks, action) { switch (action.type) { case 'added': { @@ -762,7 +762,7 @@ export default function tasksReducer(tasks, action) { } ``` -```js AddTask.js hidden +```js src/AddTask.js hidden import { useState } from 'react'; export default function AddTask({onAddTask}) { @@ -786,7 +786,7 @@ export default function AddTask({onAddTask}) { } ``` -```js TaskList.js hidden +```js src/TaskList.js hidden import { useState } from 'react'; export default function TaskList({tasks, onChangeTask, onDeleteTask}) { @@ -889,7 +889,7 @@ Al igual que para [actualizar objetos](/learn/updating-objects-in-state#write-co -```js App.js +```js src/App.js import { useImmerReducer } from 'use-immer'; import AddTask from './AddTask.js'; import TaskList from './TaskList.js'; @@ -964,7 +964,7 @@ const initialTasks = [ ]; ``` -```js AddTask.js hidden +```js src/AddTask.js hidden import { useState } from 'react'; export default function AddTask({onAddTask}) { @@ -988,7 +988,7 @@ export default function AddTask({onAddTask}) { } ``` -```js TaskList.js hidden +```js src/TaskList.js hidden import { useState } from 'react'; export default function TaskList({tasks, onChangeTask, onDeleteTask}) { @@ -1126,7 +1126,7 @@ Esto quiere decir que tu objeto de acción debería tener un `type: 'changed_sel -```js App.js +```js src/App.js import { useReducer } from 'react'; import Chat from './Chat.js'; import ContactList from './ContactList.js'; @@ -1160,7 +1160,7 @@ const contacts = [ ]; ``` -```js messengerReducer.js +```js src/messengerReducer.js export const initialState = { selectedId: 0, message: 'Hola', @@ -1188,7 +1188,7 @@ export function messengerReducer(state, action) { } ``` -```js ContactList.js +```js src/ContactList.js export default function ContactList({contacts, selectedId, dispatch}) { return (
@@ -1209,7 +1209,7 @@ export default function ContactList({contacts, selectedId, dispatch}) { } ``` -```js Chat.js +```js src/Chat.js import { useState } from 'react'; export default function Chat({contact, message, dispatch}) { @@ -1276,7 +1276,7 @@ Aquí hay un ejemplo actualizado para despachar los mensajes correspondientes: -```js App.js +```js src/App.js import { useReducer } from 'react'; import Chat from './Chat.js'; import ContactList from './ContactList.js'; @@ -1310,7 +1310,7 @@ const contacts = [ ]; ``` -```js messengerReducer.js +```js src/messengerReducer.js export const initialState = { selectedId: 0, message: 'Hola', @@ -1338,7 +1338,7 @@ export function messengerReducer(state, action) { } ``` -```js ContactList.js +```js src/ContactList.js export default function ContactList({contacts, selectedId, dispatch}) { return (
@@ -1362,7 +1362,7 @@ export default function ContactList({contacts, selectedId, dispatch}) { } ``` -```js Chat.js +```js src/Chat.js import { useState } from 'react'; export default function Chat({contact, message, dispatch}) { @@ -1420,7 +1420,7 @@ Actualmente, si se presiona "Enviar" no pasa nada. Agrega un controlador de even -```js App.js +```js src/App.js import { useReducer } from 'react'; import Chat from './Chat.js'; import ContactList from './ContactList.js'; @@ -1454,7 +1454,7 @@ const contacts = [ ]; ``` -```js messengerReducer.js +```js src/messengerReducer.js export const initialState = { selectedId: 0, message: 'Hola', @@ -1482,7 +1482,7 @@ export function messengerReducer(state, action) { } ``` -```js ContactList.js +```js src/ContactList.js export default function ContactList({contacts, selectedId, dispatch}) { return (
@@ -1506,7 +1506,7 @@ export default function ContactList({contacts, selectedId, dispatch}) { } ``` -```js Chat.js active +```js src/Chat.js active import { useState } from 'react'; export default function Chat({contact, message, dispatch}) { @@ -1559,7 +1559,7 @@ Hay un par de maneras de hacerlo en el controlador de evento del botón de "Envi -```js App.js +```js src/App.js import { useReducer } from 'react'; import Chat from './Chat.js'; import ContactList from './ContactList.js'; @@ -1593,7 +1593,7 @@ const contacts = [ ]; ``` -```js messengerReducer.js +```js src/messengerReducer.js export const initialState = { selectedId: 0, message: 'Hola', @@ -1621,7 +1621,7 @@ export function messengerReducer(state, action) { } ``` -```js ContactList.js +```js src/ContactList.js export default function ContactList({contacts, selectedId, dispatch}) { return (
@@ -1645,7 +1645,7 @@ export default function ContactList({contacts, selectedId, dispatch}) { } ``` -```js Chat.js active +```js src/Chat.js active import { useState } from 'react'; export default function Chat({contact, message, dispatch}) { @@ -1707,7 +1707,7 @@ Sin embargo, _desde la perspectiva del usuario_, enviar un mensaje es una acció -```js App.js +```js src/App.js import { useReducer } from 'react'; import Chat from './Chat.js'; import ContactList from './ContactList.js'; @@ -1741,7 +1741,7 @@ const contacts = [ ]; ``` -```js messengerReducer.js active +```js src/messengerReducer.js active export const initialState = { selectedId: 0, message: 'Hola', @@ -1775,7 +1775,7 @@ export function messengerReducer(state, action) { } ``` -```js ContactList.js +```js src/ContactList.js export default function ContactList({contacts, selectedId, dispatch}) { return (
@@ -1799,7 +1799,7 @@ export default function ContactList({contacts, selectedId, dispatch}) { } ``` -```js Chat.js active +```js src/Chat.js active import { useState } from 'react'; export default function Chat({contact, message, dispatch}) { @@ -1904,7 +1904,7 @@ La sintaxis de [propiedad calculada](https://developer.mozilla.org/en-US/docs/W -```js App.js +```js src/App.js import { useReducer } from 'react'; import Chat from './Chat.js'; import ContactList from './ContactList.js'; @@ -1938,7 +1938,7 @@ const contacts = [ ]; ``` -```js messengerReducer.js +```js src/messengerReducer.js export const initialState = { selectedId: 0, message: 'Hola', @@ -1972,7 +1972,7 @@ export function messengerReducer(state, action) { } ``` -```js ContactList.js +```js src/ContactList.js export default function ContactList({contacts, selectedId, dispatch}) { return (
@@ -1996,7 +1996,7 @@ export default function ContactList({contacts, selectedId, dispatch}) { } ``` -```js Chat.js +```js src/Chat.js import { useState } from 'react'; export default function Chat({contact, message, dispatch}) { @@ -2081,7 +2081,7 @@ Esta es la solución completa: -```js App.js +```js src/App.js import { useReducer } from 'react'; import Chat from './Chat.js'; import ContactList from './ContactList.js'; @@ -2115,7 +2115,7 @@ const contacts = [ ]; ``` -```js messengerReducer.js +```js src/messengerReducer.js export const initialState = { selectedId: 0, messages: { @@ -2158,7 +2158,7 @@ export function messengerReducer(state, action) { } ``` -```js ContactList.js +```js src/ContactList.js export default function ContactList({contacts, selectedId, dispatch}) { return (
@@ -2182,7 +2182,7 @@ export default function ContactList({contacts, selectedId, dispatch}) { } ``` -```js Chat.js +```js src/Chat.js import { useState } from 'react'; export default function Chat({contact, message, dispatch}) { @@ -2269,7 +2269,7 @@ Recuerda que una función reducer toma dos argumentos --el estado inicial y el o -```js App.js +```js src/App.js import { useReducer } from './MyReact.js'; import Chat from './Chat.js'; import ContactList from './ContactList.js'; @@ -2303,7 +2303,7 @@ const contacts = [ ]; ``` -```js messengerReducer.js +```js src/messengerReducer.js export const initialState = { selectedId: 0, messages: { @@ -2346,7 +2346,7 @@ export function messengerReducer(state, action) { } ``` -```js MyReact.js active +```js src/MyReact.js active import { useState } from 'react'; export function useReducer(reducer, initialState) { @@ -2358,7 +2358,7 @@ export function useReducer(reducer, initialState) { } ``` -```js ContactList.js hidden +```js src/ContactList.js hidden export default function ContactList({contacts, selectedId, dispatch}) { return (
@@ -2382,7 +2382,7 @@ export default function ContactList({contacts, selectedId, dispatch}) { } ``` -```js Chat.js hidden +```js src/Chat.js hidden import { useState } from 'react'; export default function Chat({contact, message, dispatch}) { @@ -2443,7 +2443,7 @@ Despachar una acción llama al reducer con el estado actual y la acción, y guar -```js App.js +```js src/App.js import { useReducer } from './MyReact.js'; import Chat from './Chat.js'; import ContactList from './ContactList.js'; @@ -2477,7 +2477,7 @@ const contacts = [ ]; ``` -```js messengerReducer.js +```js src/messengerReducer.js export const initialState = { selectedId: 0, messages: { @@ -2520,7 +2520,7 @@ export function messengerReducer(state, action) { } ``` -```js MyReact.js active +```js src/MyReact.js active import { useState } from 'react'; export function useReducer(reducer, initialState) { @@ -2535,7 +2535,7 @@ export function useReducer(reducer, initialState) { } ``` -```js ContactList.js hidden +```js src/ContactList.js hidden export default function ContactList({contacts, selectedId, dispatch}) { return (
@@ -2559,7 +2559,7 @@ export default function ContactList({contacts, selectedId, dispatch}) { } ``` -```js Chat.js hidden +```js src/Chat.js hidden import { useState } from 'react'; export default function Chat({contact, message, dispatch}) { diff --git a/src/content/learn/importing-and-exporting-components.md b/src/content/learn/importing-and-exporting-components.md index e0d949683..005f723a9 100644 --- a/src/content/learn/importing-and-exporting-components.md +++ b/src/content/learn/importing-and-exporting-components.md @@ -66,7 +66,7 @@ Aquí tanto `Profile` y `Gallery` se han movido fuera de `App.js` en un nuevo ar -```js App.js +```js src/App.js import Gallery from './Gallery.js'; export default function App() { @@ -76,7 +76,7 @@ export default function App() { } ``` -```js Gallery.js +```js src/Gallery.js function Profile() { return ( -```js App.js +```js src/App.js import Gallery from './Gallery.js'; import { Profile } from './Gallery.js'; @@ -194,7 +194,7 @@ export default function App() { } ``` -```js Gallery.js +```js src/Gallery.js export function Profile() { return ( -```js App.js +```js src/App.js import Gallery from './Gallery.js'; import { Profile } from './Gallery.js'; @@ -281,8 +281,13 @@ export default function App() { } ``` +<<<<<<< HEAD ```js Gallery.js active // ¡Muéveme a Profile.js! +======= +```js src/Gallery.js active +// Move me to Profile.js! +>>>>>>> bbb08a5a04b0221137e5d60472fc979747af2954 export function Profile() { return ( -```js App.js +```js src/App.js import Gallery from './Gallery.js'; import { Profile } from './Profile.js'; @@ -335,7 +340,7 @@ export default function App() { } ``` -```js Gallery.js +```js src/Gallery.js import { Profile } from './Profile.js'; export default function Gallery() { @@ -350,7 +355,7 @@ export default function Gallery() { } ``` -```js Profile.js +```js src/Profile.js export function Profile() { return ( -```js App.js +```js src/App.js import Gallery from './Gallery.js'; import Profile from './Profile.js'; @@ -385,7 +390,7 @@ export default function App() { } ``` -```js Gallery.js +```js src/Gallery.js import Profile from './Profile.js'; export default function Gallery() { @@ -400,7 +405,7 @@ export default function Gallery() { } ``` -```js Profile.js +```js src/Profile.js export default function Profile() { return ( -```js App.js +```js src/App.js import { getImageUrl } from './utils.js' const person = { @@ -561,7 +561,7 @@ export default function TodoList() { } ``` -```js utils.js +```js src/utils.js export function getImageUrl(person) { return ( 'https://i.imgur.com/' + diff --git a/src/content/learn/keeping-components-pure.md b/src/content/learn/keeping-components-pure.md index 0c4a71538..8c6d2fd61 100644 --- a/src/content/learn/keeping-components-pure.md +++ b/src/content/learn/keeping-components-pure.md @@ -49,7 +49,7 @@ React está diseñado en torno a este concepto. **React supone que cada componen -```js App.js +```js src/App.js function Recipe({ drinkers }) { return (
    @@ -243,7 +243,7 @@ Renderizar es un *cálculo*, no debería tratar de "hacer" cosas. ¿Puedes expre -```js Clock.js active +```js src/Clock.js active export default function Clock({ time }) { let hours = time.getHours(); if (hours >= 0 && hours <= 6) { @@ -259,7 +259,7 @@ export default function Clock({ time }) { } ``` -```js App.js hidden +```js src/App.js hidden import { useState, useEffect } from 'react'; import Clock from './Clock.js'; @@ -305,7 +305,7 @@ Puedes arreglar este componente calculando el `className` e incluirlo en la sali -```js Clock.js active +```js src/Clock.js active export default function Clock({ time }) { let hours = time.getHours(); let className; @@ -322,7 +322,7 @@ export default function Clock({ time }) { } ``` -```js App.js hidden +```js src/App.js hidden import { useState, useEffect } from 'react'; import Clock from './Clock.js'; @@ -380,7 +380,7 @@ El código con errores está en `Profile.js`. ¡Asegúrate de leerlo todo de arr -```js Profile.js +```js src/Profile.js import Panel from './Panel.js'; import { getImageUrl } from './utils.js'; @@ -413,7 +413,7 @@ function Avatar() { } ``` -```js Panel.js hidden +```js src/Panel.js hidden import { useState } from 'react'; export default function Panel({ children }) { @@ -429,7 +429,7 @@ export default function Panel({ children }) { } ``` -```js App.js +```js src/App.js import Profile from './Profile.js'; export default function App() { @@ -448,7 +448,7 @@ export default function App() { } ``` -```js utils.js hidden +```js src/utils.js hidden export function getImageUrl(person, size = 's') { return ( 'https://i.imgur.com/' + @@ -481,7 +481,7 @@ Para corregir el error, elimine la variable `currentPerson`. En su lugar, pasa t -```js Profile.js active +```js src/Profile.js active import Panel from './Panel.js'; import { getImageUrl } from './utils.js'; @@ -511,7 +511,7 @@ function Avatar({ person }) { } ``` -```js Panel.js hidden +```js src/Panel.js hidden import { useState } from 'react'; export default function Panel({ children }) { @@ -527,7 +527,7 @@ export default function Panel({ children }) { } ``` -```js App.js +```js src/App.js import Profile from './Profile.js'; export default function App() { @@ -546,7 +546,7 @@ export default function App() { } ``` -```js utils.js hidden +```js src/utils.js hidden export function getImageUrl(person, size = 's') { return ( 'https://i.imgur.com/' + @@ -583,7 +583,7 @@ Implementaste el placeholder "Crear historia" para incluir más historias falsas -```js StoryTray.js active +```js src/StoryTray.js active export default function StoryTray({ stories }) { stories.push({ id: 'create', @@ -602,7 +602,7 @@ export default function StoryTray({ stories }) { } ``` -```js App.js hidden +```js src/App.js hidden import { useState, useEffect } from 'react'; import StoryTray from './StoryTray.js'; @@ -683,7 +683,7 @@ La solución más simple es no tocar el _array_ y renderizar "Crear historia" po -```js StoryTray.js active +```js src/StoryTray.js active export default function StoryTray({ stories }) { return (
      @@ -698,7 +698,7 @@ export default function StoryTray({ stories }) { } ``` -```js App.js hidden +```js src/App.js hidden import { useState, useEffect } from 'react'; import StoryTray from './StoryTray.js'; @@ -767,7 +767,7 @@ Como alternativa, podrías crear un _nuevo_ array (copiando el existente) antes -```js StoryTray.js active +```js src/StoryTray.js active export default function StoryTray({ stories }) { // ¡Copia el array! let storiesToDisplay = stories.slice(); @@ -790,7 +790,7 @@ export default function StoryTray({ stories }) { } ``` -```js App.js hidden +```js src/App.js hidden import { useState, useEffect } from 'react'; import StoryTray from './StoryTray.js'; diff --git a/src/content/learn/lifecycle-of-reactive-effects.md b/src/content/learn/lifecycle-of-reactive-effects.md index c77ba46d1..8d2837529 100644 --- a/src/content/learn/lifecycle-of-reactive-effects.md +++ b/src/content/learn/lifecycle-of-reactive-effects.md @@ -251,7 +251,7 @@ export default function App() { } ``` -```js chat.js +```js src/chat.js export function createConnection(serverUrl, roomId) { // Una implementación real se conectaría realmente al servidor. return { @@ -447,7 +447,7 @@ export default function App() { } ``` -```js chat.js +```js src/chat.js export function createConnection(serverUrl, roomId) { // Una implementación real en realidad se conectaría al servidor return { @@ -527,7 +527,7 @@ export default function App() { } ``` -```js chat.js +```js src/chat.js export function createConnection(serverUrl, roomId) { // Una implementación real en realidad conectaría al servidor return { @@ -646,7 +646,7 @@ export default function App() { } ``` -```js chat.js +```js src/chat.js export function createConnection(serverUrl, roomId) { // Una implementación real en realidad se conectaría al servidor return { @@ -837,7 +837,7 @@ export default function App() { } ``` -```js chat.js +```js src/chat.js export function createConnection(serverUrl, roomId) { // Una implementación real en realidad conectaría al servidor return { @@ -912,7 +912,7 @@ export default function App() { } ``` -```js chat.js +```js src/chat.js export function createConnection(serverUrl, roomId) { // Una implementación real en realidad conectaría al servidor return { @@ -1329,7 +1329,7 @@ Suprimir el linter es siempre sospechoso. ¿Podría ser esto un error? -```js App.js +```js src/App.js import { useState } from 'react'; import ChatRoom from './ChatRoom.js'; import { @@ -1374,7 +1374,7 @@ export default function App() { } ``` -```js ChatRoom.js active +```js src/ChatRoom.js active import { useState, useEffect } from 'react'; export default function ChatRoom({ roomId, createConnection }) { @@ -1389,7 +1389,7 @@ export default function ChatRoom({ roomId, createConnection }) { } ``` -```js chat.js +```js src/chat.js export function createEncryptedConnection(roomId) { // Una implementación real se conectaría realmente al servidor return { @@ -1427,7 +1427,7 @@ Si quitas la supresión del linter, verás un error de lint. El problema es que -```js App.js +```js src/App.js import { useState } from 'react'; import ChatRoom from './ChatRoom.js'; import { @@ -1472,7 +1472,7 @@ export default function App() { } ``` -```js ChatRoom.js active +```js src/ChatRoom.js active import { useState, useEffect } from 'react'; export default function ChatRoom({ roomId, createConnection }) { @@ -1486,7 +1486,7 @@ export default function ChatRoom({ roomId, createConnection }) { } ``` -```js chat.js +```js src/chat.js export function createEncryptedConnection(roomId) { // Una implementación real se conectaría realmente al servidor return { @@ -1522,7 +1522,7 @@ Es correcto que `createConnection` sea una dependencia. Sin embargo, este códig -```js App.js +```js src/App.js import { useState } from 'react'; import ChatRoom from './ChatRoom.js'; @@ -1560,7 +1560,7 @@ export default function App() { } ``` -```js ChatRoom.js active +```js src/ChatRoom.js active import { useState, useEffect } from 'react'; import { createEncryptedConnection, @@ -1581,7 +1581,7 @@ export default function ChatRoom({ roomId, isEncrypted }) { } ``` -```js chat.js +```js src/chat.js export function createEncryptedConnection(roomId) { // Una implementación real se conectaría realmente al servidor return { @@ -1633,7 +1633,7 @@ Si tienes dos procesos de sincronización independientes, necesitas escribir dos -```js App.js +```js src/App.js import { useState, useEffect } from 'react'; import { fetchData } from './api.js'; @@ -1687,7 +1687,7 @@ export default function Page() { } ``` -```js api.js hidden +```js src/api.js hidden export function fetchData(url) { if (url === '/planets') { return fetchPlanets(); @@ -1782,7 +1782,7 @@ Por eso tiene sentido describirlos como dos Efectos separados. Aquí tienes un e -```js App.js +```js src/App.js import { useState, useEffect } from 'react'; import { fetchData } from './api.js'; @@ -1855,7 +1855,7 @@ export default function Page() { } ``` -```js api.js hidden +```js src/api.js hidden export function fetchData(url) { if (url === '/planets') { return fetchPlanets(); @@ -1945,7 +1945,7 @@ En su lugar, para reducir la repetición, puede extraer algo de lógica en un Ho -```js App.js +```js src/App.js import { useState } from 'react'; import { useSelectOptions } from './useSelectOptions.js'; @@ -1991,7 +1991,7 @@ export default function Page() { } ``` -```js useSelectOptions.js +```js src/useSelectOptions.js import { useState, useEffect } from 'react'; import { fetchData } from './api.js'; @@ -2018,7 +2018,7 @@ export function useSelectOptions(url) { } ``` -```js api.js hidden +```js src/api.js hidden export function fetchData(url) { if (url === '/planets') { return fetchPlanets(); diff --git a/src/content/learn/managing-state.md b/src/content/learn/managing-state.md index 974722b0a..b11a07d55 100644 --- a/src/content/learn/managing-state.md +++ b/src/content/learn/managing-state.md @@ -308,7 +308,7 @@ Sin embargo, a veces esto no es lo que quieres. Por ejemplo, en esta aplicación -```js App.js +```js src/App.js import { useState } from 'react'; import Chat from './Chat.js'; import ContactList from './ContactList.js'; @@ -334,7 +334,7 @@ const contacts = [ ]; ``` -```js ContactList.js +```js src/ContactList.js export default function ContactList({ selectedContact, contacts, @@ -358,7 +358,7 @@ export default function ContactList({ } ``` -```js Chat.js +```js src/Chat.js import { useState } from 'react'; export default function Chat({ contact }) { @@ -403,7 +403,7 @@ React permite anular el comportamiento por defecto, y *forzar* a un componente a -```js App.js +```js src/App.js import { useState } from 'react'; import Chat from './Chat.js'; import ContactList from './ContactList.js'; @@ -429,7 +429,7 @@ const contacts = [ ]; ``` -```js ContactList.js +```js src/ContactList.js export default function ContactList({ selectedContact, contacts, @@ -453,7 +453,7 @@ export default function ContactList({ } ``` -```js Chat.js +```js src/Chat.js import { useState } from 'react'; export default function Chat({ contact }) { @@ -506,7 +506,7 @@ Los componentes con muchas actualizaciones de estado repartidas entre muchos con -```js App.js +```js src/App.js import { useReducer } from 'react'; import AddTask from './AddTask.js'; import TaskList from './TaskList.js'; @@ -589,7 +589,7 @@ const initialTasks = [ ]; ``` -```js AddTask.js hidden +```js src/AddTask.js hidden import { useState } from 'react'; export default function AddTask({ onAddTask }) { @@ -610,7 +610,7 @@ export default function AddTask({ onAddTask }) { } ``` -```js TaskList.js hidden +```js src/TaskList.js hidden import { useState } from 'react'; export default function TaskList({ @@ -733,7 +733,7 @@ export default function Page() { } ``` -```js Section.js +```js src/Section.js import { useContext } from 'react'; import { LevelContext } from './LevelContext.js'; @@ -749,7 +749,7 @@ export default function Section({ children }) { } ``` -```js Heading.js +```js src/Heading.js import { useContext } from 'react'; import { LevelContext } from './LevelContext.js'; @@ -776,7 +776,7 @@ export default function Heading({ children }) { } ``` -```js LevelContext.js +```js src/LevelContext.js import { createContext } from 'react'; export const LevelContext = createContext(0); @@ -807,7 +807,7 @@ Con este enfoque, un componente principal con estado complejo lo gestiona con un -```js App.js +```js src/App.js import AddTask from './AddTask.js'; import TaskList from './TaskList.js'; import { TasksProvider } from './TasksContext.js'; @@ -823,7 +823,7 @@ export default function TaskApp() { } ``` -```js TasksContext.js +```js src/TasksContext.js import { createContext, useContext, useReducer } from 'react'; const TasksContext = createContext(null); @@ -888,7 +888,7 @@ const initialTasks = [ ]; ``` -```js AddTask.js +```js src/AddTask.js import { useState, useContext } from 'react'; import { useTasksDispatch } from './TasksContext.js'; @@ -917,7 +917,7 @@ export default function AddTask({ onAddTask }) { let nextId = 3; ``` -```js TaskList.js +```js src/TaskList.js import { useState, useContext } from 'react'; import { useTasks, useTasksDispatch } from './TasksContext.js'; diff --git a/src/content/learn/manipulating-the-dom-with-refs.md b/src/content/learn/manipulating-the-dom-with-refs.md index 9ee608b40..a2690b07f 100644 --- a/src/content/learn/manipulating-the-dom-with-refs.md +++ b/src/content/learn/manipulating-the-dom-with-refs.md @@ -1099,7 +1099,7 @@ Necesitarás `forwardRef` para optar a exponer un nodo DOM de tu propio componen -```js App.js +```js src/App.js import SearchButton from './SearchButton.js'; import SearchInput from './SearchInput.js'; @@ -1115,7 +1115,7 @@ export default function Page() { } ``` -```js SearchButton.js +```js src/SearchButton.js export default function SearchButton() { return ( ; } ``` -```css styles.css +```css src/styles.css * { box-sizing: border-box; } @@ -455,7 +455,7 @@ export default function Board() { } ``` -```css styles.css +```css src/styles.css * { box-sizing: border-box; } @@ -627,7 +627,7 @@ Tu código actualizado debería verse así: -```js App.js +```js src/App.js function Square({ value }) { return ; } @@ -655,7 +655,7 @@ export default function Board() { } ``` -```css styles.css +```css src/styles.css * { box-sizing: border-box; } @@ -809,7 +809,7 @@ Después de realizar los cambios anteriores, tu código se verá así: -```js App.js +```js src/App.js import { useState } from 'react'; function Square() { @@ -852,7 +852,7 @@ export default function Board() { } ``` -```css styles.css +```css src/styles.css * { box-sizing: border-box; } @@ -990,7 +990,7 @@ Y tu código debería verse así: -```js App.js +```js src/App.js import { useState } from 'react'; function Square({ value }) { @@ -1021,7 +1021,7 @@ export default function Board() { } ``` -```css styles.css +```css src/styles.css * { box-sizing: border-box; } @@ -1232,7 +1232,7 @@ Así es como debería verse tu código: -```js App.js +```js src/App.js import { useState } from 'react'; function Square({ value, onSquareClick }) { @@ -1274,7 +1274,7 @@ export default function Board() { } ``` -```css styles.css +```css src/styles.css * { box-sizing: border-box; } @@ -1426,7 +1426,7 @@ function handleClick(i) { -```js App.js +```js src/App.js import { useState } from 'react'; function Square({value, onSquareClick}) { @@ -1477,7 +1477,7 @@ export default function Board() { } ``` -```css styles.css +```css src/styles.css * { box-sizing: border-box; } @@ -1528,7 +1528,7 @@ body { Ahora que muestras el turno del siguiente jugador, también debes mostrar cuándo se gana el juego y cuando no hay más turnos. Para hacer esto, agrega una función de ayuda llamada `calculateWinner` que toma una matriz de 9 cuadrados, busca un ganador y devuelve `'X'`, `'O'` o `null` según corresponda. No te preocupes demasiado por la función `calculateWinner`; no es específica de React: -```js App.js +```js src/App.js export default function Board() { //... } @@ -1598,7 +1598,7 @@ export default function Board() { -```js App.js +```js src/App.js import { useState } from 'react'; function Square({value, onSquareClick}) { @@ -1678,7 +1678,7 @@ function calculateWinner(squares) { } ``` -```css styles.css +```css src/styles.css * { box-sizing: border-box; } @@ -1876,7 +1876,7 @@ En este punto, haz movido el estado para vivir en el componente `Game`, y la int -```js App.js +```js src/App.js import { useState } from 'react'; function Square({ value, onSquareClick }) { @@ -1974,7 +1974,7 @@ function calculateWinner(squares) { } ``` -```css styles.css +```css src/styles.css * { box-sizing: border-box; } @@ -2087,7 +2087,7 @@ Resolverás este error en la siguiente sección. -```js App.js +```js src/App.js import { useState } from 'react'; function Square({ value, onSquareClick }) { @@ -2203,7 +2203,7 @@ function calculateWinner(squares) { } ``` -```css styles.css +```css src/styles.css * { box-sizing: border-box; } @@ -2317,7 +2317,7 @@ const moves = history.map((squares, move) => { -```js App.js +```js src/App.js import { useState } from 'react'; function Square({ value, onSquareClick }) { @@ -2434,7 +2434,7 @@ function calculateWinner(squares) { ``` -```css styles.css +```css src/styles.css * { box-sizing: border-box; } @@ -2538,7 +2538,7 @@ Si haces clic en cualquier paso en el historial del juego, el tablero de tres en -```js App.js +```js src/App.js import { useState } from 'react'; function Square({value, onSquareClick}) { @@ -2658,7 +2658,7 @@ function calculateWinner(squares) { } ``` -```css styles.css +```css src/styles.css * { box-sizing: border-box; } @@ -2748,7 +2748,7 @@ Mira el resultado final aquí: -```js App.js +```js src/App.js import { useState } from 'react'; function Square({ value, onSquareClick }) { @@ -2866,7 +2866,7 @@ function calculateWinner(squares) { } ``` -```css styles.css +```css src/styles.css * { box-sizing: border-box; } diff --git a/src/content/learn/typescript.md b/src/content/learn/typescript.md index 6c29196cd..0038f3f20 100644 --- a/src/content/learn/typescript.md +++ b/src/content/learn/typescript.md @@ -55,7 +55,7 @@ Tomando el [componente `MyButton`](/learn#components) de la guía [Inicio Rápid -```tsx App.tsx active +```tsx src/App.tsx active function MyButton({ title }: { title: string }) { return ( @@ -72,7 +72,7 @@ export default function MyApp() { } ``` -```js App.js hidden +```js src/App.js hidden import AppTSX from "./App.tsx"; export default App = AppTSX; ``` @@ -88,7 +88,7 @@ Esta sintaxis en línea es la forma más sencilla de proporcionar tipos para un -```tsx App.tsx active +```tsx src/App.tsx active interface MyButtonProps { /** El texto que se mostrará dentro del botón */ title: string; @@ -112,7 +112,7 @@ export default function MyApp() { } ``` -```js App.js hidden +```js src/App.js hidden import AppTSX from "./App.tsx"; export default App = AppTSX; ``` @@ -170,7 +170,7 @@ El [Hook `useReducer`](/reference/react/useReducer) es un Hook más complejo que -```tsx App.tsx active +```tsx src/App.tsx active import {useReducer} from 'react'; interface State { @@ -213,7 +213,7 @@ export default function App() { ``` -```js App.js hidden +```js src/App.js hidden import AppTSX from "./App.tsx"; export default App = AppTSX; ``` @@ -248,7 +248,7 @@ El tipo del valor proporcionado por el contexto se infiere a partir del valor pa -```tsx App.tsx active +```tsx src/App.tsx active import { createContext, useContext, useState } from 'react'; type Theme = "light" | "dark" | "system"; @@ -277,7 +277,7 @@ function MyComponent() { } ``` -```js App.js hidden +```js src/App.js hidden import AppTSX from "./App.tsx"; export default App = AppTSX; ``` @@ -381,7 +381,7 @@ Cuando trabajas con eventos del DOM en React, el tipo del evento suele inferirse -```tsx App.tsx active +```tsx src/App.tsx active import { useState } from 'react'; export default function Form() { @@ -400,7 +400,7 @@ export default function Form() { } ``` -```js App.js hidden +```js src/App.js hidden import AppTSX from "./App.tsx"; export default App = AppTSX; ``` diff --git a/src/content/learn/understanding-your-ui-as-a-tree.md b/src/content/learn/understanding-your-ui-as-a-tree.md index 98f60cea8..2abf7affc 100644 --- a/src/content/learn/understanding-your-ui-as-a-tree.md +++ b/src/content/learn/understanding-your-ui-as-a-tree.md @@ -22,7 +22,7 @@ React, and many other UI libraries, model UI as a tree. Thinking of your app as Trees are a relationship model between items and UI is often represented using tree structures. For example, browsers use tree structures to model HTML ([DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction)) and CSS ([CSSOM](https://developer.mozilla.org/docs/Web/API/CSS_Object_Model)). Mobile platforms also use trees to represent their view hierarchy. - + React creates a UI tree from your components. In this example, the UI tree is then used to render to the DOM. @@ -39,7 +39,7 @@ Here is a React app that renders inspirational quotes. -```js App.js +```js src/App.js import FancyText from './FancyText'; import InspirationGenerator from './InspirationGenerator'; import Copyright from './Copyright'; @@ -57,7 +57,7 @@ export default function App() { ``` -```js FancyText.js +```js src/FancyText.js export default function FancyText({title, text}) { return title ?

      {text}

      @@ -65,7 +65,7 @@ export default function FancyText({title, text}) { } ``` -```js InspirationGenerator.js +```js src/InspirationGenerator.js import * as React from 'react'; import quotes from './quotes'; import FancyText from './FancyText'; @@ -86,13 +86,13 @@ export default function InspirationGenerator({children}) { } ``` -```js Copyright.js +```js src/Copyright.js export default function Copyright({year}) { return

      ©️ {year}

      ; } ``` -```js quotes.js +```js src/quotes.js export default [ "Don’t let yesterday take up too much of today.” — Will Rogers", "Ambition is putting a ladder against the sky.", @@ -149,7 +149,7 @@ We can update the app to conditionally render either an inspirational quote or c -```js App.js +```js src/App.js import FancyText from './FancyText'; import InspirationGenerator from './InspirationGenerator'; import Copyright from './Copyright'; @@ -167,7 +167,7 @@ export default function App() { ``` -```js FancyText.js +```js src/FancyText.js export default function FancyText({title, text}) { return title ?

      {text}

      @@ -175,13 +175,13 @@ export default function FancyText({title, text}) { } ``` -```js Color.js +```js src/Color.js export default function Color({value}) { return
      } ``` -```js InspirationGenerator.js +```js src/InspirationGenerator.js import * as React from 'react'; import inspirations from './inspirations'; import FancyText from './FancyText'; @@ -206,13 +206,13 @@ export default function InspirationGenerator({children}) { } ``` -```js Copyright.js +```js src/Copyright.js export default function Copyright({year}) { return

      ©️ {year}

      ; } ``` -```js inspirations.js +```js src/inspirations.js export default [ {type: 'quote', value: "Don’t let yesterday take up too much of today.” — Will Rogers"}, {type: 'color', value: "#B73636"}, diff --git a/src/content/learn/updating-arrays-in-state.md b/src/content/learn/updating-arrays-in-state.md index 7d7741cb1..91d3befca 100644 --- a/src/content/learn/updating-arrays-in-state.md +++ b/src/content/learn/updating-arrays-in-state.md @@ -1084,7 +1084,7 @@ En este ejemplo, todos los controladores de eventos en `App.js` usan mutación. -```js App.js +```js src/App.js import { useState } from 'react'; import AddTodo from './AddTodo.js'; import TaskList from './TaskList.js'; @@ -1139,7 +1139,7 @@ export default function TaskApp() { } ``` -```js AddTodo.js +```js src/AddTodo.js import { useState } from 'react'; export default function AddTodo({ onAddTodo }) { @@ -1160,7 +1160,7 @@ export default function AddTodo({ onAddTodo }) { } ``` -```js TaskList.js +```js src/TaskList.js import { useState } from 'react'; export default function TaskList({ @@ -1247,7 +1247,7 @@ En `handleAddTodo`, puedes usar el operador de propagación de _arrays_. En `han -```js App.js +```js src/App.js import { useState } from 'react'; import AddTodo from './AddTodo.js'; import TaskList from './TaskList.js'; @@ -1306,7 +1306,7 @@ export default function TaskApp() { } ``` -```js AddTodo.js +```js src/AddTodo.js import { useState } from 'react'; export default function AddTodo({ onAddTodo }) { @@ -1327,7 +1327,7 @@ export default function AddTodo({ onAddTodo }) { } ``` -```js TaskList.js +```js src/TaskList.js import { useState } from 'react'; export default function TaskList({ @@ -1417,7 +1417,7 @@ Este es el mismo ejemplo que en el desafío anterior. Esta vez, arregla las muta -```js App.js +```js src/App.js import { useState } from 'react'; import { useImmer } from 'use-immer'; import AddTodo from './AddTodo.js'; @@ -1473,7 +1473,7 @@ export default function TaskApp() { } ``` -```js AddTodo.js +```js src/AddTodo.js import { useState } from 'react'; export default function AddTodo({ onAddTodo }) { @@ -1494,7 +1494,7 @@ export default function AddTodo({ onAddTodo }) { } ``` -```js TaskList.js +```js src/TaskList.js import { useState } from 'react'; export default function TaskList({ @@ -1599,7 +1599,7 @@ Con Immer, puedes escribir código con estilo de mutación, siempre y cuando sol -```js App.js +```js src/App.js import { useState } from 'react'; import { useImmer } from 'use-immer'; import AddTodo from './AddTodo.js'; @@ -1661,7 +1661,7 @@ export default function TaskApp() { } ``` -```js AddTodo.js +```js src/AddTodo.js import { useState } from 'react'; export default function AddTodo({ onAddTodo }) { @@ -1682,7 +1682,7 @@ export default function AddTodo({ onAddTodo }) { } ``` -```js TaskList.js +```js src/TaskList.js import { useState } from 'react'; export default function TaskList({ @@ -1787,7 +1787,7 @@ Por ejemplo, en esta versión `handleAddTodo` se implementa con la mutación del -```js App.js +```js src/App.js import { useState } from 'react'; import { useImmer } from 'use-immer'; import AddTodo from './AddTodo.js'; @@ -1846,7 +1846,7 @@ export default function TaskApp() { } ``` -```js AddTodo.js +```js src/AddTodo.js import { useState } from 'react'; export default function AddTodo({ onAddTodo }) { @@ -1867,7 +1867,7 @@ export default function AddTodo({ onAddTodo }) { } ``` -```js TaskList.js +```js src/TaskList.js import { useState } from 'react'; export default function TaskList({ diff --git a/src/content/learn/updating-objects-in-state.md b/src/content/learn/updating-objects-in-state.md index 7d9e6939e..1e387c072 100644 --- a/src/content/learn/updating-objects-in-state.md +++ b/src/content/learn/updating-objects-in-state.md @@ -986,7 +986,7 @@ Si algo inesperado cambia, hay una mutación. Encuentra la mutación en `App.js` -```js App.js +```js src/App.js import { useState } from 'react'; import Background from './Background.js'; import Box from './Box.js'; @@ -1039,7 +1039,7 @@ export default function Canvas() { } ``` -```js Box.js +```js src/Box.js import { useState } from 'react'; export default function Box({ @@ -1102,7 +1102,7 @@ export default function Box({ } ``` -```js Background.js +```js src/Background.js export default function Background({ position }) { @@ -1136,7 +1136,7 @@ La solución es eliminar la mutación de `handleMove`, y utilizar la sintaxis ex -```js App.js +```js src/App.js import { useState } from 'react'; import Background from './Background.js'; import Box from './Box.js'; @@ -1194,7 +1194,7 @@ export default function Canvas() { } ``` -```js Box.js +```js src/Box.js import { useState } from 'react'; export default function Box({ @@ -1257,7 +1257,7 @@ export default function Box({ } ``` -```js Background.js +```js src/Background.js export default function Background({ position }) { @@ -1291,7 +1291,7 @@ Este es el mismo ejemplo con errores que en el desafío anterior. Esta vez, arre -```js App.js +```js src/App.js import { useState } from 'react'; import { useImmer } from 'use-immer'; import Background from './Background.js'; @@ -1345,7 +1345,7 @@ export default function Canvas() { } ``` -```js Box.js +```js src/Box.js import { useState } from 'react'; export default function Box({ @@ -1408,7 +1408,7 @@ export default function Box({ } ``` -```js Background.js +```js src/Background.js export default function Background({ position }) { @@ -1458,7 +1458,7 @@ Esta es la solución reescrita con Immer. Observa cómo los controladores de eve -```js App.js +```js src/App.js import { useImmer } from 'use-immer'; import Background from './Background.js'; import Box from './Box.js'; @@ -1512,7 +1512,7 @@ export default function Canvas() { } ``` -```js Box.js +```js src/Box.js import { useState } from 'react'; export default function Box({ @@ -1575,7 +1575,7 @@ export default function Box({ } ``` -```js Background.js +```js src/Background.js export default function Background({ position }) { diff --git a/src/content/learn/you-might-not-need-an-effect.md b/src/content/learn/you-might-not-need-an-effect.md index 93469872b..82409ffe3 100644 --- a/src/content/learn/you-might-not-need-an-effect.md +++ b/src/content/learn/you-might-not-need-an-effect.md @@ -882,7 +882,7 @@ function NewTodo({ onAdd }) { } ``` -```js todos.js +```js src/todos.js let nextId = 0; export function createTodo(text, completed = false) { @@ -975,7 +975,7 @@ function NewTodo({ onAdd }) { } ``` -```js todos.js +```js src/todos.js let nextId = 0; export function createTodo(text, completed = false) { @@ -1061,7 +1061,7 @@ export default function TodoList() { } ``` -```js todos.js +```js src/todos.js let nextId = 0; let calls = 0; @@ -1144,7 +1144,7 @@ export default function TodoList() { } ``` -```js todos.js +```js src/todos.js let nextId = 0; let calls = 0; @@ -1233,7 +1233,7 @@ function NewTodo({ onAdd }) { } ``` -```js todos.js +```js src/todos.js let nextId = 0; let calls = 0; @@ -1278,7 +1278,7 @@ Cuando seleccionas un contacto con los botones en la parte superior, el formular -```js App.js hidden +```js src/App.js hidden import { useState } from 'react'; import ContactList from './ContactList.js'; import EditContact from './EditContact.js'; @@ -1330,7 +1330,7 @@ const initialContacts = [ ]; ``` -```js ContactList.js hidden +```js src/ContactList.js hidden export default function ContactList({ contacts, selectedId, @@ -1357,7 +1357,7 @@ export default function ContactList({ } ``` -```js EditContact.js active +```js src/EditContact.js active import { useState, useEffect } from 'react'; export default function EditContact({ savedContact, onSave }) { @@ -1442,7 +1442,7 @@ Divide el componente `EditContact` en dos. Mueve todo el estado del formulario a -```js App.js hidden +```js src/App.js hidden import { useState } from 'react'; import ContactList from './ContactList.js'; import EditContact from './EditContact.js'; @@ -1494,7 +1494,7 @@ const initialContacts = [ ]; ``` -```js ContactList.js hidden +```js src/ContactList.js hidden export default function ContactList({ contacts, selectedId, @@ -1521,7 +1521,7 @@ export default function ContactList({ } ``` -```js EditContact.js active +```js src/EditContact.js active import { useState } from 'react'; export default function EditContact(props) { diff --git a/src/content/reference/react-dom/client/createRoot.md b/src/content/reference/react-dom/client/createRoot.md index 25fed378a..4fef5b23d 100644 --- a/src/content/reference/react-dom/client/createRoot.md +++ b/src/content/reference/react-dom/client/createRoot.md @@ -153,7 +153,7 @@ Usualmente, solo necesitarás ejecutar este código una vez al inicio. Este cód ``` -```js index.js active +```js src/index.js active import { createRoot } from 'react-dom/client'; import App from './App.js'; import './styles.css'; @@ -162,7 +162,7 @@ const root = createRoot(document.getElementById('root')); root.render(); ``` -```js App.js +```js src/App.js import { useState } from 'react'; export default function App() { @@ -232,7 +232,7 @@ Aquí, dos componentes diferentes de React se renderizan dentro de dos nodos del ``` -```js index.js active +```js src/index.js active import './styles.css'; import { createRoot } from 'react-dom/client'; import { Comments, Navigation } from './Components.js'; @@ -246,7 +246,7 @@ const commentRoot = createRoot(commentDomNode); commentRoot.render(); ``` -```js Components.js +```js src/Components.js export function Navigation() { return (
        @@ -313,7 +313,7 @@ Puedes llamar a `render` más de una vez en la misma raíz. Siempre que el árbo -```js index.js active +```js src/index.js active import { createRoot } from 'react-dom/client'; import './styles.css'; import App from './App.js'; @@ -327,7 +327,7 @@ setInterval(() => { }, 1000); ``` -```js App.js +```js src/App.js export default function App({counter}) { return ( <> diff --git a/src/content/reference/react-dom/client/hydrateRoot.md b/src/content/reference/react-dom/client/hydrateRoot.md index 64097c375..354f40683 100644 --- a/src/content/reference/react-dom/client/hydrateRoot.md +++ b/src/content/reference/react-dom/client/hydrateRoot.md @@ -143,7 +143,7 @@ Para hidratar tu aplicación, React "adjuntará" la lógica de tus componentes a

        Hola, mundo!

        ``` -```js index.js active +```js src/index.js active import './styles.css'; import { hydrateRoot } from 'react-dom/client'; import App from './App.js'; @@ -154,7 +154,7 @@ hydrateRoot( ); ``` -```js App.js +```js src/App.js import { useState } from 'react'; export default function App() { @@ -248,7 +248,7 @@ Para silenciar las advertencias de hidratación en un elemento, agrega `suppress

        Fecha actual: 01/01/2020

        ``` -```js index.js +```js src/index.js import './styles.css'; import { hydrateRoot } from 'react-dom/client'; import App from './App.js'; @@ -256,7 +256,7 @@ import App from './App.js'; hydrateRoot(document.getElementById('root'), ); ``` -```js App.js active +```js src/App.js active export default function App() { return (

        @@ -286,7 +286,7 @@ Si intencionalmente necesitas renderizar algo diferente en el servidor y en el c

        Es Servidor

        ``` -```js index.js +```js src/index.js import './styles.css'; import { hydrateRoot } from 'react-dom/client'; import App from './App.js'; @@ -294,7 +294,7 @@ import App from './App.js'; hydrateRoot(document.getElementById('root'), ); ``` -```js App.js active +```js src/App.js active import { useState, useEffect } from "react"; export default function App() { @@ -340,7 +340,7 @@ Si llamas a `root.render` en algún momento después de la hidratación, y la es

        ¡Hola, mundo! 0

        ``` -```js index.js active +```js src/index.js active import { hydrateRoot } from 'react-dom/client'; import './styles.css'; import App from './App.js'; @@ -357,7 +357,7 @@ setInterval(() => { }, 1000); ``` -```js App.js +```js src/App.js export default function App({counter}) { return ( <> diff --git a/src/content/reference/react-dom/components/common.md b/src/content/reference/react-dom/components/common.md index 837fbbbb2..f33d821f3 100644 --- a/src/content/reference/react-dom/components/common.md +++ b/src/content/reference/react-dom/components/common.md @@ -771,7 +771,7 @@ En el ejemplo anterior, `style={{}}` no es una sintaxis especial, sino un objeto -```js App.js +```js src/App.js import Avatar from './Avatar.js'; const user = { @@ -785,7 +785,7 @@ export default function App() { } ``` -```js Avatar.js active +```js src/Avatar.js active export default function Avatar({ user }) { return ( +<<<<<<< HEAD Para entender por qué el renderizado arbitrario de HTML es peligroso, reemplaza el código anterior con esto: +======= +The `{__html}` object should be created as close to where the HTML is generated as possible, like the above example does in the `renderMarkdownToHTML` function. This ensures that all raw HTML being used in your code is explicitly marked as such, and that only variables that you expect to contain HTML are passed to `dangerouslySetInnerHTML`. It is not recommended to create the object inline like `
        `. + +To see why rendering arbitrary HTML is dangerous, replace the code above with this: +>>>>>>> bbb08a5a04b0221137e5d60472fc979747af2954 ```js {1-4,7,8} const post = { diff --git a/src/content/reference/react-dom/components/form.md b/src/content/reference/react-dom/components/form.md index 25d1ba4e9..7a4b26b3f 100644 --- a/src/content/reference/react-dom/components/form.md +++ b/src/content/reference/react-dom/components/form.md @@ -62,7 +62,7 @@ Pass a function to the `action` prop of form to run the function when the form i -```js App.js +```js src/App.js export default function Search() { function search(formData) { const query = formData.get("query"); @@ -146,7 +146,7 @@ Here, we use the `pending` property to indicate the form is submitting. -```js App.js +```js src/App.js import { useFormStatus } from "react-dom"; import { submitForm } from "./actions.js"; @@ -172,7 +172,7 @@ export default function App() { } ``` -```js actions.js hidden +```js src/actions.js hidden export async function submitForm(query) { await new Promise((res) => setTimeout(res, 1000)); } @@ -201,7 +201,7 @@ For example, when a user types a message into the form and hits the "Send" butto -```js App.js +```js src/App.js import { useOptimistic, useState, useRef } from "react"; import { deliverMessage } from "./actions.js"; @@ -251,7 +251,7 @@ export default function App() { } ``` -```js actions.js +```js src/actions.js export async function deliverMessage(message) { await new Promise((res) => setTimeout(res, 1000)); return message; @@ -282,7 +282,7 @@ In some cases the function called by a ``'s `action` prop throw an error. -```js App.js +```js src/App.js import { ErrorBoundary } from "react-error-boundary"; export default function Search() { @@ -330,7 +330,7 @@ Displaying a form submission error message before the JavaScript bundle loads fo -```js App.js +```js src/App.js import { useFormState } from "react-dom"; import { signUpNewUser } from "./api"; @@ -361,7 +361,7 @@ export default function Page() { } ``` -```js api.js hidden +```js src/api.js hidden let emails = []; export async function signUpNewUser(newEmail) { @@ -396,7 +396,7 @@ When a user taps a specific button, the form is submitted, and a corresponding a -```js App.js +```js src/App.js export default function Search() { function publish(formData) { const content = formData.get("content"); diff --git a/src/content/reference/react-dom/components/textarea.md b/src/content/reference/react-dom/components/textarea.md index 66c600403..351f6ce12 100644 --- a/src/content/reference/react-dom/components/textarea.md +++ b/src/content/reference/react-dom/components/textarea.md @@ -294,7 +294,7 @@ export default function MarkdownEditor() { } ``` -```js MarkdownPreview.js +```js src/MarkdownPreview.js import { Remarkable } from 'remarkable'; const md = new Remarkable(); diff --git a/src/content/reference/react-dom/createPortal.md b/src/content/reference/react-dom/createPortal.md index 95b4f50ec..d7507d20e 100644 --- a/src/content/reference/react-dom/createPortal.md +++ b/src/content/reference/react-dom/createPortal.md @@ -137,7 +137,7 @@ En este ejemplo, ambos contenedores tienen estilos que interfieren con la ventan -```js App.js active +```js src/App.js active import NoPortalExample from './NoPortalExample'; import PortalExample from './PortalExample'; @@ -155,7 +155,7 @@ export default function App() { } ``` -```js NoPortalExample.js +```js src/NoPortalExample.js import { useState } from 'react'; import ModalContent from './ModalContent.js'; @@ -174,7 +174,7 @@ export default function NoPortalExample() { } ``` -```js PortalExample.js active +```js src/PortalExample.js active import { useState } from 'react'; import { createPortal } from 'react-dom'; import ModalContent from './ModalContent.js'; @@ -195,7 +195,7 @@ export default function PortalExample() { } ``` -```js ModalContent.js +```js src/ModalContent.js export default function ModalContent({ onClose }) { return (
        @@ -207,7 +207,7 @@ export default function ModalContent({ onClose }) { ``` -```css styles.css +```css src/styles.css .clipping-container { position: relative; border: 1px solid #aaa; @@ -269,7 +269,7 @@ Los portales resultan útiles cuando se desea integrar contenido de React en pá ``` -```js index.js +```js src/index.js import { StrictMode } from 'react'; import { createRoot } from 'react-dom/client'; import App from './App.js'; @@ -283,7 +283,7 @@ root.render( ); ``` -```js App.js active +```js src/App.js active import { createPortal } from 'react-dom'; const sidebarContentEl = document.getElementById('sidebar-content'); @@ -398,7 +398,7 @@ A continuación, un ejemplo completo para que puedas probar: } ``` -```js App.js +```js src/App.js import { useRef, useEffect, useState } from 'react'; import { createPortal } from 'react-dom'; import { createMapWidget, addPopupToMapWidget } from './map-widget.js'; @@ -428,7 +428,7 @@ export default function Map() { } ``` -```js map-widget.js +```js src/map-widget.js import 'leaflet/dist/leaflet.css'; import * as L from 'leaflet'; diff --git a/src/content/reference/react-dom/findDOMNode.md b/src/content/reference/react-dom/findDOMNode.md index 80d04cdd7..cbf8f9eff 100644 --- a/src/content/reference/react-dom/findDOMNode.md +++ b/src/content/reference/react-dom/findDOMNode.md @@ -80,7 +80,7 @@ Aquí, la variable `input` se establecerá en el elemento DOM ``. Esto te -```js App.js +```js src/App.js import { useState } from 'react'; import AutoselectingInput from './AutoselectingInput.js'; @@ -98,7 +98,7 @@ export default function App() { } ``` -```js AutoselectingInput.js active +```js src/AutoselectingInput.js active import { Component } from 'react'; import { findDOMNode } from 'react-dom'; @@ -128,7 +128,7 @@ El código que utiliza `findDOMNode` es frágil debido a que la conexión entre -```js App.js +```js src/App.js import { useState } from 'react'; import AutoselectingInput from './AutoselectingInput.js'; @@ -146,7 +146,7 @@ export default function App() { } ``` -```js AutoselectingInput.js active +```js src/AutoselectingInput.js active import { Component } from 'react'; import { findDOMNode } from 'react-dom'; @@ -171,7 +171,7 @@ En este ejemplo, ya no se usa `findDOMNode`. En su lugar, se define `inputRef = -```js App.js +```js src/App.js import { useState } from 'react'; import AutoselectingInput from './AutoselectingInput.js'; @@ -189,7 +189,7 @@ export default function App() { } ``` -```js AutoselectingInput.js active +```js src/AutoselectingInput.js active import { createRef, Component } from 'react'; class AutoselectingInput extends Component { @@ -216,7 +216,7 @@ En React moderno sin componentes de clase, el código equivalente llamaría a [` -```js App.js +```js src/App.js import { useState } from 'react'; import AutoselectingInput from './AutoselectingInput.js'; @@ -234,7 +234,7 @@ export default function App() { } ``` -```js AutoselectingInput.js active +```js src/AutoselectingInput.js active import { useRef, useEffect } from 'react'; export default function AutoselectingInput() { @@ -261,7 +261,7 @@ En este ejemplo, `findDOMNode(this)` encuentra un nodo DOM que pertenece a otro -```js App.js +```js src/App.js import { useState } from 'react'; import AutoselectingInput from './AutoselectingInput.js'; @@ -279,7 +279,7 @@ export default function App() { } ``` -```js AutoselectingInput.js active +```js src/AutoselectingInput.js active import { Component } from 'react'; import { findDOMNode } from 'react-dom'; import MyInput from './MyInput.js'; @@ -297,7 +297,7 @@ class AutoselectingInput extends Component { export default AutoselectingInput; ``` -```js MyInput.js +```js src/MyInput.js export default function MyInput() { return ; } @@ -316,7 +316,7 @@ Esta versión hace eso, por lo que ya no necesita `findDOMNode`: -```js App.js +```js src/App.js import { useState } from 'react'; import AutoselectingInput from './AutoselectingInput.js'; @@ -334,7 +334,7 @@ export default function App() { } ``` -```js AutoselectingInput.js active +```js src/AutoselectingInput.js active import { createRef, Component } from 'react'; import MyInput from './MyInput.js'; @@ -356,7 +356,7 @@ class AutoselectingInput extends Component { export default AutoselectingInput; ``` -```js MyInput.js +```js src/MyInput.js import { forwardRef } from 'react'; const MyInput = forwardRef(function MyInput(props, ref) { @@ -372,7 +372,7 @@ Así es como se vería este código con componentes de función en lugar de clas -```js App.js +```js src/App.js import { useState } from 'react'; import AutoselectingInput from './AutoselectingInput.js'; @@ -390,7 +390,7 @@ export default function App() { } ``` -```js AutoselectingInput.js active +```js src/AutoselectingInput.js active import { useRef, useEffect } from 'react'; import MyInput from './MyInput.js'; @@ -406,7 +406,7 @@ export default function AutoselectingInput() { } ``` -```js MyInput.js +```js src/MyInput.js import { forwardRef } from 'react'; const MyInput = forwardRef(function MyInput(props, ref) { diff --git a/src/content/reference/react-dom/flushSync.md b/src/content/reference/react-dom/flushSync.md index 83b69218d..829319641 100644 --- a/src/content/reference/react-dom/flushSync.md +++ b/src/content/reference/react-dom/flushSync.md @@ -85,7 +85,7 @@ En el ejemplo siguiente, se utiliza `flushSync` dentro de la función *callback* -```js App.js active +```js src/App.js active import { useState, useEffect } from 'react'; import { flushSync } from 'react-dom'; diff --git a/src/content/reference/react-dom/hooks/useFormState.md b/src/content/reference/react-dom/hooks/useFormState.md index fc17ac1fd..bcd431703 100644 --- a/src/content/reference/react-dom/hooks/useFormState.md +++ b/src/content/reference/react-dom/hooks/useFormState.md @@ -121,7 +121,7 @@ To display messages such as an error message or toast that's returned by a Serve -```js App.js +```js src/App.js import { useState } from "react"; import { useFormState } from "react-dom"; import { addToCart } from "./actions.js"; @@ -148,7 +148,7 @@ export default function App() { } ``` -```js actions.js +```js src/actions.js "use server"; export async function addToCart(prevState, queryData) { @@ -161,7 +161,7 @@ export async function addToCart(prevState, queryData) { } ``` -```css styles.css hidden +```css src/styles.css hidden form { border: solid 1px black; margin-bottom: 24px; @@ -194,7 +194,7 @@ The return value from a Server Action can be any serializable value. For example -```js App.js +```js src/App.js import { useState } from "react"; import { useFormState } from "react-dom"; import { addToCart } from "./actions.js"; @@ -230,7 +230,7 @@ export default function App() { } ``` -```js actions.js +```js src/actions.js "use server"; export async function addToCart(prevState, queryData) { @@ -249,7 +249,7 @@ export async function addToCart(prevState, queryData) { } ``` -```css styles.css hidden +```css src/styles.css hidden form { border: solid 1px black; margin-bottom: 24px; diff --git a/src/content/reference/react-dom/hooks/useFormStatus.md b/src/content/reference/react-dom/hooks/useFormStatus.md index 02e48973e..8733ec0ca 100644 --- a/src/content/reference/react-dom/hooks/useFormStatus.md +++ b/src/content/reference/react-dom/hooks/useFormStatus.md @@ -86,7 +86,7 @@ Here, we use the `pending` property to indicate the form is submitting. -```js App.js +```js src/App.js import { useFormStatus } from "react-dom"; import { submitForm } from "./actions.js"; @@ -112,7 +112,7 @@ export default function App() { } ``` -```js actions.js hidden +```js src/actions.js hidden export async function submitForm(query) { await new Promise((res) => setTimeout(res, 1000)); } @@ -175,7 +175,7 @@ Here, we have a form where users can request a username. We can use `useFormStat -```js UsernameForm.js active +```js src/UsernameForm.js active import {useState, useMemo, useRef} from 'react'; import {useFormStatus} from 'react-dom'; @@ -216,7 +216,7 @@ export default function UsernameForm() { } ``` -```js App.js +```js src/App.js import UsernameForm from './UsernameForm'; import { submitForm } from "./actions.js"; @@ -229,7 +229,7 @@ export default function App() { } ``` -```js actions.js hidden +```js src/actions.js hidden export async function submitForm(query) { await new Promise((res) => setTimeout(res, 1000)); } diff --git a/src/content/reference/react-dom/hydrate.md b/src/content/reference/react-dom/hydrate.md index 94cbcffbc..b2ed3383c 100644 --- a/src/content/reference/react-dom/hydrate.md +++ b/src/content/reference/react-dom/hydrate.md @@ -88,7 +88,7 @@ En las aplicaciones totalmente construidas con React, **sólo se hidratará una

        ¡Hola, mundo!

        ``` -```js index.js active +```js src/index.js active import './styles.css'; import { hydrate } from 'react-dom'; import App from './App.js'; @@ -96,7 +96,7 @@ import App from './App.js'; hydrate(, document.getElementById('root')); ``` -```js App.js +```js src/App.js export default function App() { return

        ¡Hola, mundo!

        ; } @@ -126,7 +126,7 @@ Para silenciar las advertencias de hidratación en un elemento, añade `suppress

        Current Date: 01/01/2020

        ``` -```js index.js +```js src/index.js import './styles.css'; import { hydrate } from 'react-dom'; import App from './App.js'; @@ -134,7 +134,7 @@ import App from './App.js'; hydrate(, document.getElementById('root')); ``` -```js App.js active +```js src/App.js active export default function App() { return (

        @@ -164,7 +164,7 @@ Si intencionalmente necesitas renderizar algo distinto en el servidor y el clien

        Is Server

        ``` -```js index.js +```js src/index.js import './styles.css'; import { hydrate } from 'react-dom'; import App from './App.js'; @@ -172,7 +172,7 @@ import App from './App.js'; hydrate(, document.getElementById('root')); ``` -```js App.js active +```js src/App.js active import { useState, useEffect } from "react"; export default function App() { diff --git a/src/content/reference/react-dom/render.md b/src/content/reference/react-dom/render.md index 20df47c90..22933ac00 100644 --- a/src/content/reference/react-dom/render.md +++ b/src/content/reference/react-dom/render.md @@ -85,7 +85,7 @@ En aplicaciones totalmente construidas con React, **por lo general sólo realiza -```js index.js active +```js src/index.js active import './styles.css'; import { render } from 'react-dom'; import App from './App.js'; @@ -93,7 +93,7 @@ import App from './App.js'; render(, document.getElementById('root')); ``` -```js App.js +```js src/App.js export default function App() { return

        ¡Hola, mundo!

        ; } @@ -119,7 +119,7 @@ Si tu página [no está totalmente construida con React](/learn/add-react-to-an- ``` -```js index.js active +```js src/index.js active import './styles.css'; import { render } from 'react-dom'; import { Comments, Navigation } from './Components.js'; @@ -135,7 +135,7 @@ render( ); ``` -```js Components.js +```js src/Components.js export function Navigation() { return (
          @@ -187,7 +187,7 @@ Puedes llamar a `render` más de una vez en el mismo nodo del DOM. Siempre y cua -```js index.js active +```js src/index.js active import { render } from 'react-dom'; import './styles.css'; import App from './App.js'; @@ -202,7 +202,7 @@ setInterval(() => { }, 1000); ``` -```js App.js +```js src/App.js export default function App({counter}) { return ( <> diff --git a/src/content/reference/react-dom/unmountComponentAtNode.md b/src/content/reference/react-dom/unmountComponentAtNode.md index 466e93984..a572c08c6 100644 --- a/src/content/reference/react-dom/unmountComponentAtNode.md +++ b/src/content/reference/react-dom/unmountComponentAtNode.md @@ -88,7 +88,7 @@ En este ejemplo, al hacer clic en "Renderizar aplicación de React" se renderiza ``` -```js index.js active +```js src/index.js active import './styles.css'; import { render, unmountComponentAtNode } from 'react-dom'; import App from './App.js'; @@ -104,7 +104,7 @@ document.getElementById('unmount').addEventListener('click', () => { }); ``` -```js App.js +```js src/App.js export default function App() { return

          ¡Hola, mundo!

          ; } diff --git a/src/content/reference/react/Children.md b/src/content/reference/react/Children.md index dc3bc182d..a37f1e522 100644 --- a/src/content/reference/react/Children.md +++ b/src/content/reference/react/Children.md @@ -33,7 +33,7 @@ const mappedChildren = Children.map(children, child => Llama `Children.count(children)` para contar el número de hijos en la estructura de datos `children`. -```js RowList.js active +```js src/RowList.js active import { Children } from 'react'; function RowList({ children }) { @@ -66,7 +66,7 @@ El número de nodos dentro de estos hijos (`children`). Llama a `Children.forEach(children, fn, thisArg?)` para correr algún código por cada hijo en la estructura de datos `children`. -```js RowList.js active +```js src/RowList.js active import { Children } from 'react'; function SeparatorList({ children }) { @@ -100,7 +100,7 @@ function SeparatorList({ children }) { Llamar `Children.map(children, fn, thisArg?)` para mapear o transformar cada hijo en la estructura de datos `children`. -```js RowList.js active +```js src/RowList.js active import { Children } from 'react'; function RowList({ children }) { @@ -169,7 +169,7 @@ De lo contrario, lanza un error. Llama `Children.toArray(children)` para crear un array a partir de la estructura de datos `children`. -```js ReversedList.js active +```js src/ReversedList.js active import { Children } from 'react'; export default function ReversedList({ children }) { @@ -258,7 +258,7 @@ export default function App() { } ``` -```js RowList.js active +```js src/RowList.js active import { Children } from 'react'; export default function RowList({ children }) { @@ -336,7 +336,7 @@ function MoreRows() { } ``` -```js RowList.js +```js src/RowList.js import { Children } from 'react'; export default function RowList({ children }) { @@ -395,7 +395,7 @@ export default function App() { } ``` -```js SeparatorList.js active +```js src/SeparatorList.js active import { Children } from 'react'; export default function SeparatorList({ children }) { @@ -439,7 +439,7 @@ export default function App() { } ``` -```js RowList.js active +```js src/RowList.js active import { Children } from 'react'; export default function RowList({ children }) { @@ -510,7 +510,7 @@ export default function App() { } ``` -```js ReversedList.js active +```js src/ReversedList.js active import { Children } from 'react'; export default function ReversedList({ children }) { @@ -572,7 +572,7 @@ export default function App() { } ``` -```js RowList.js +```js src/RowList.js export function RowList({ children }) { return (
          @@ -639,7 +639,7 @@ function MoreRows() { } ``` -```js RowList.js +```js src/RowList.js export function RowList({ children }) { return (
          @@ -698,7 +698,7 @@ export default function App() { } ``` -```js RowList.js +```js src/RowList.js export function RowList({ rows }) { return (
          @@ -761,7 +761,7 @@ export default function App() { } ``` -```js TabSwitcher.js +```js src/TabSwitcher.js import { useState } from 'react'; export default function TabSwitcher({ tabs }) { @@ -817,7 +817,7 @@ export default function App() { } ``` -```js TabSwitcher.js +```js src/TabSwitcher.js import { useState } from 'react'; export default function TabSwitcher({ tabIds, getHeader, renderContent }) { @@ -869,7 +869,7 @@ export default function App() { } ``` -```js RowList.js +```js src/RowList.js import { Fragment } from 'react'; export function RowList({ rowIds, renderRow }) { diff --git a/src/content/reference/react/Component.md b/src/content/reference/react/Component.md index bf311527f..94180c266 100644 --- a/src/content/reference/react/Component.md +++ b/src/content/reference/react/Component.md @@ -1221,7 +1221,7 @@ Por ejemplo, este componente `ChatRoom` mantiene una conexión de chat sincroniz -```js App.js +```js src/App.js import { useState } from 'react'; import ChatRoom from './ChatRoom.js'; @@ -1251,7 +1251,7 @@ export default function App() { } ``` -```js ChatRoom.js active +```js src/ChatRoom.js active import { Component } from 'react'; import { createConnection } from './chat.js'; @@ -1312,7 +1312,7 @@ export default class ChatRoom extends Component { } ``` -```js chat.js +```js src/chat.js export function createConnection(serverUrl, roomId) { // Una aplicación real se conectaría al servidor return { @@ -1601,7 +1601,7 @@ Supongamos que estás convirtiendo este componente de clase `ChatRoom` con méto -```js App.js +```js src/App.js import { useState } from 'react'; import ChatRoom from './ChatRoom.js'; @@ -1631,7 +1631,7 @@ export default function App() { } ``` -```js ChatRoom.js active +```js src/ChatRoom.js active import { Component } from 'react'; import { createConnection } from './chat.js'; @@ -1692,7 +1692,7 @@ export default class ChatRoom extends Component { } ``` -```js chat.js +```js src/chat.js export function createConnection(serverUrl, roomId) { // Una aplicación real se conectaría al servidor return { @@ -1741,7 +1741,7 @@ Esta llamada a [`useEffect`](/reference/react/useEffect) es equivalente a la ló -```js App.js +```js src/App.js import { useState } from 'react'; import ChatRoom from './ChatRoom.js'; @@ -1771,7 +1771,7 @@ export default function App() { } ``` -```js ChatRoom.js active +```js src/ChatRoom.js active import { useState, useEffect } from 'react'; import { createConnection } from './chat.js'; @@ -1801,7 +1801,7 @@ export default function ChatRoom({ roomId }) { } ``` -```js chat.js +```js src/chat.js export function createConnection(serverUrl, roomId) { // Una aplicación real se conectaría al servidor return { diff --git a/src/content/reference/react/StrictMode.md b/src/content/reference/react/StrictMode.md index cbceda987..4a76be768 100644 --- a/src/content/reference/react/StrictMode.md +++ b/src/content/reference/react/StrictMode.md @@ -140,7 +140,7 @@ Este componente `StoryTray` toma un array de `stories` y añade un último artí -```js index.js +```js src/index.js import { createRoot } from 'react-dom/client'; import './styles.css'; @@ -150,7 +150,7 @@ const root = createRoot(document.getElementById("root")); root.render(); ``` -```js App.js +```js src/App.js import { useState } from 'react'; import StoryTray from './StoryTray.js'; @@ -175,7 +175,7 @@ export default function App() { } ``` -```js StoryTray.js active +```js src/StoryTray.js active export default function StoryTray({ stories }) { const items = stories; items.push({ id: 'create', label: 'Create Story' }); @@ -218,7 +218,7 @@ Este error será más perceptible si el componente `StoryTray` se vuelve a rende -```js index.js +```js src/index.js import { createRoot } from 'react-dom/client'; import './styles.css'; @@ -228,7 +228,7 @@ const root = createRoot(document.getElementById('root')); root.render(); ``` -```js App.js +```js src/App.js import { useState } from 'react'; import StoryTray from './StoryTray.js'; @@ -253,7 +253,7 @@ export default function App() { } ``` -```js StoryTray.js active +```js src/StoryTray.js active import { useState } from 'react'; export default function StoryTray({ stories }) { @@ -316,7 +316,7 @@ Esto [haría la función `StoryTray` pura.](/learn/keeping-components-pure) Cada -```js index.js +```js src/index.js import { StrictMode } from 'react'; import { createRoot } from 'react-dom/client'; import './styles.css'; @@ -331,7 +331,7 @@ root.render( ); ``` -```js App.js +```js src/App.js import { useState } from 'react'; import StoryTray from './StoryTray.js'; @@ -356,7 +356,7 @@ export default function App() { } ``` -```js StoryTray.js active +```js src/StoryTray.js active export default function StoryTray({ stories }) { const items = stories; items.push({ id: 'create', label: 'Create Story' }); @@ -397,7 +397,7 @@ li { -```js index.js +```js src/index.js import { StrictMode } from 'react'; import { createRoot } from 'react-dom/client'; import './styles.css'; @@ -412,7 +412,7 @@ root.render( ); ``` -```js App.js +```js src/App.js import { useState } from 'react'; import StoryTray from './StoryTray.js'; @@ -437,7 +437,7 @@ export default function App() { } ``` -```js StoryTray.js active +```js src/StoryTray.js active import { useState } from 'react'; export default function StoryTray({ stories }) { @@ -509,7 +509,7 @@ Considera este ejemplo que conecta un componente a un chat: -```js index.js +```js src/index.js import { createRoot } from 'react-dom/client'; import './styles.css'; @@ -535,7 +535,7 @@ export default function ChatRoom() { } ``` -```js chat.js +```js src/chat.js let connections = 0; export function createConnection(serverUrl, roomId) { @@ -568,7 +568,7 @@ Para hacer este problema más obvio, implementemos una funcionalidad. En el sigu -```js index.js +```js src/index.js import { createRoot } from 'react-dom/client'; import './styles.css'; @@ -619,7 +619,7 @@ export default function App() { } ``` -```js chat.js +```js src/chat.js let connections = 0; export function createConnection(serverUrl, roomId) { @@ -662,7 +662,7 @@ Ahora que tu Efecto “hace una limpieza” al concluir y destruye las conexione -```js index.js +```js src/index.js import { StrictMode } from 'react'; import { createRoot } from 'react-dom/client'; import './styles.css'; @@ -693,7 +693,7 @@ export default function ChatRoom() { } ``` -```js chat.js +```js src/chat.js let connections = 0; export function createConnection(serverUrl, roomId) { @@ -726,7 +726,7 @@ El Modo Estricto te permite notar este tipo de errores al principio del proceso. -```js index.js +```js src/index.js import { StrictMode } from 'react'; import { createRoot } from 'react-dom/client'; import './styles.css'; @@ -783,7 +783,7 @@ export default function App() { } ``` -```js chat.js +```js src/chat.js let connections = 0; export function createConnection(serverUrl, roomId) { diff --git a/src/content/reference/react/Suspense.md b/src/content/reference/react/Suspense.md index 425c991de..7120775bb 100644 --- a/src/content/reference/react/Suspense.md +++ b/src/content/reference/react/Suspense.md @@ -69,7 +69,7 @@ En el ejemplo de abajo, el componente `Albums` *se suspende* mientras carga la l } ``` -```js App.js hidden +```js src/App.js hidden import { useState } from 'react'; import ArtistPage from './ArtistPage.js'; @@ -94,7 +94,7 @@ export default function App() { } ``` -```js ArtistPage.js active +```js src/ArtistPage.js active import { Suspense } from 'react'; import Albums from './Albums.js'; @@ -114,7 +114,7 @@ function Loading() { } ``` -```js Albums.js hidden +```js src/Albums.js hidden import { fetchData } from './data.js'; // Note: this component is written using an experimental API @@ -162,7 +162,7 @@ function use(promise) { } ``` -```js data.js hidden +```js src/data.js hidden // Note: the way you would do data fetching depends on // the framework that you use together with Suspense. // Normally, the caching logic would be inside a framework. @@ -300,7 +300,7 @@ En el ejemplo de abajo, tanto `Biography` como `Albums` cargan algunos datos. Si } ``` -```js App.js hidden +```js src/App.js hidden import { useState } from 'react'; import ArtistPage from './ArtistPage.js'; @@ -325,7 +325,7 @@ export default function App() { } ``` -```js ArtistPage.js active +```js src/ArtistPage.js active import { Suspense } from 'react'; import Albums from './Albums.js'; import Biography from './Biography.js'; @@ -350,7 +350,7 @@ function Loading() { } ``` -```js Panel.js +```js src/Panel.js export default function Panel({ children }) { return (
          @@ -360,7 +360,7 @@ export default function Panel({ children }) { } ``` -```js Biography.js hidden +```js src/Biography.js hidden import { fetchData } from './data.js'; // Note: this component is written using an experimental API @@ -404,7 +404,7 @@ function use(promise) { } ``` -```js Albums.js hidden +```js src/Albums.js hidden import { fetchData } from './data.js'; // Note: this component is written using an experimental API @@ -452,7 +452,7 @@ function use(promise) { } ``` -```js data.js hidden +```js src/data.js hidden // Note: the way you would do data fetching depends on // the framework that you use together with Suspense. // Normally, the caching logic would be inside a framework. @@ -625,7 +625,7 @@ La secuencia sería: } ``` -```js App.js hidden +```js src/App.js hidden import { useState } from 'react'; import ArtistPage from './ArtistPage.js'; @@ -650,7 +650,7 @@ export default function App() { } ``` -```js ArtistPage.js active +```js src/ArtistPage.js active import { Suspense } from 'react'; import Albums from './Albums.js'; import Biography from './Biography.js'; @@ -687,7 +687,7 @@ function AlbumsGlimmer() { } ``` -```js Panel.js +```js src/Panel.js export default function Panel({ children }) { return (
          @@ -697,7 +697,7 @@ export default function Panel({ children }) { } ``` -```js Biography.js hidden +```js src/Biography.js hidden import { fetchData } from './data.js'; // Note: this component is written using an experimental API @@ -741,7 +741,7 @@ function use(promise) { } ``` -```js Albums.js hidden +```js src/Albums.js hidden import { fetchData } from './data.js'; // Note: this component is written using an experimental API @@ -789,7 +789,7 @@ function use(promise) { } ``` -```js data.js hidden +```js src/data.js hidden // Note: the way you would do data fetching depends on // the framework that you use together with Suspense. // Normally, the caching logic would be inside a framework. @@ -944,7 +944,7 @@ En este ejemplo, el componente `SearchResults` se suspende mientras carga los re } ``` -```js App.js +```js src/App.js import { Suspense, useState } from 'react'; import SearchResults from './SearchResults.js'; @@ -964,7 +964,7 @@ export default function App() { } ``` -```js SearchResults.js hidden +```js src/SearchResults.js hidden import { fetchData } from './data.js'; // Note: this component is written using an experimental API @@ -1018,7 +1018,7 @@ function use(promise) { } ``` -```js data.js hidden +```js src/data.js hidden // Note: the way you would do data fetching depends on // the framework that you use together with Suspense. // Normally, the caching logic would be inside a framework. @@ -1169,7 +1169,7 @@ Escribe `"a"` en el ejemplo de abajo, espera por los resultados, y luego edita e } ``` -```js App.js +```js src/App.js import { Suspense, useState, useDeferredValue } from 'react'; import SearchResults from './SearchResults.js'; @@ -1193,7 +1193,7 @@ export default function App() { } ``` -```js SearchResults.js hidden +```js src/SearchResults.js hidden import { fetchData } from './data.js'; // Note: this component is written using an experimental API @@ -1247,7 +1247,7 @@ function use(promise) { } ``` -```js data.js hidden +```js src/data.js hidden // Note: the way you would do data fetching depends on // the framework that you use together with Suspense. // Normally, the caching logic would be inside a framework. @@ -1375,7 +1375,7 @@ Cuando un componente se suspende, la barrera padre de Suspense más cercana camb } ``` -```js App.js +```js src/App.js import { Suspense, useState } from 'react'; import IndexPage from './IndexPage.js'; import ArtistPage from './ArtistPage.js'; @@ -1423,7 +1423,7 @@ function BigSpinner() { } ``` -```js Layout.js +```js src/Layout.js export default function Layout({ children }) { return (
          @@ -1438,7 +1438,7 @@ export default function Layout({ children }) { } ``` -```js IndexPage.js +```js src/IndexPage.js export default function IndexPage({ navigate }) { return ( + }} + > + Add comment + ); } ``` -```js App.js hidden +```js src/App.js hidden import { AddCommentContainer } from "./AddCommentContainer.js"; export default function App() { @@ -1559,7 +1560,7 @@ export default function App() { } ``` -```js index.js hidden +```js src/index.js hidden // TODO: update to import from stable // react instead of canary once the `use` // Hook is in a stable release of React