chore(i18n,curriculum): processed translations (#42751)
This commit is contained in:
camperbot
GitHub
@@ -22,7 +22,7 @@ Tu elemento `body` debe tener una propiedad `background` asignado con `url()` qu
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/background:\s*?url\(\s*("|'|)https:\/\/cdn-media-1\.freecodecamp\.org\/imgr\/MJAkxbh\.png\1\s*\)/gi
|
||||
/background(-image)?:\s*?url\(\s*("|'|)https:\/\/cdn-media-1\.freecodecamp\.org\/imgr\/MJAkxbh\.png\2\s*\)/gi
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d403616a
|
||||
title: Pass an Array as Props
|
||||
title: Pasa un arreglo como props
|
||||
challengeType: 6
|
||||
forumTopicId: 301401
|
||||
dashedName: pass-an-array-as-props
|
||||
@@ -8,7 +8,7 @@ dashedName: pass-an-array-as-props
|
||||
|
||||
# --description--
|
||||
|
||||
The last challenge demonstrated how to pass information from a parent component to a child component as `props` or properties. This challenge looks at how arrays can be passed as `props`. To pass an array to a JSX element, it must be treated as JavaScript and wrapped in curly braces.
|
||||
El último desafío demostró cómo pasar información desde un componente padre a un componente hijo como `props` o propiedades. Este desafío busca demostrar cómo se pueden pasar arreglos como `props`. Para pasar un arreglo a un elemento JSX, debe ser tratado como JavaScript y envolverlo entre llaves.
|
||||
|
||||
```jsx
|
||||
<ParentComponent>
|
||||
@@ -16,15 +16,15 @@ The last challenge demonstrated how to pass information from a parent component
|
||||
</ParentComponent>
|
||||
```
|
||||
|
||||
The child component then has access to the array property `colors`. Array methods such as `join()` can be used when accessing the property. `const ChildComponent = (props) => <p>{props.colors.join(', ')}</p>` This will join all `colors` array items into a comma separated string and produce: `<p>green, blue, red</p>` Later, we will learn about other common methods to render arrays of data in React.
|
||||
El componente hijo entonces tiene acceso a la propiedad del arreglo `colors`. Los métodos de arreglo, como `join()` pueden ser usados al acceder a la propiedad. `const ChildComponent = (props) => <p>{props.colors.join(', ')}</p>` Esto unirá a todos elementos `colors` del arreglo en una cadena separada por comas y se convertirá en: `<p>green, blue, red</p>` Más tarde, aprenderemos sobre otros métodos comunes para representar arreglos de datos en React.
|
||||
|
||||
# --instructions--
|
||||
|
||||
There are `List` and `ToDo` components in the code editor. When rendering each `List` from the `ToDo` component, pass in a `tasks` property assigned to an array of to-do tasks, for example `["walk dog", "workout"]`. Then access this `tasks` array in the `List` component, showing its value within the `p` element. Use `join(", ")` to display the `props.tasks`array in the `p` element as a comma separated list. Today's list should have at least 2 tasks and tomorrow's should have at least 3 tasks.
|
||||
Están los componentes `List` y `ToDo` en el editor de código. Al renderizar cada `List` del componente `ToDo`, pasa una propiedad `tasks` asignada a un arreglo de tareas pendientes, por ejemplo `["walk dog", "workout"]`. Luego, accede a este arreglo de `tasks` en el componente `List`, mostrando su valor dentro del elemento `p`. Usa `join(", ")` para mostrar el arreglo `props.tasks` en el elemento `p` como una lista separada por comas. La lista de hoy debe tener al menos 2 tareas y la de mañana debe tener al menos 3 tareas.
|
||||
|
||||
# --hints--
|
||||
|
||||
The `ToDo` component should return a single outer `div`.
|
||||
El componente `ToDo` debe devolver un solo elemento `div`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -35,7 +35,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The third child of the `ToDo` component should be an instance of the `List` component.
|
||||
El tercer hijo del componente `ToDo` debe ser una instancia del componente `List`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -46,7 +46,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The fifth child of the `ToDo` component should be an instance of the `List` component.
|
||||
El quinto hijo del componente `ToDo` debe ser una instancia del componente `List`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -57,7 +57,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Both instances of the `List` component should have a property called `tasks` and `tasks` should be of type array.
|
||||
Ambas instancias del componente `List` deben tener una propiedad llamada `tasks` y `tasks` debe ser de tipo arreglo.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -71,7 +71,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The first `List` component representing the tasks for today should have 2 or more items.
|
||||
El primer componente `List` que representa las tareas de hoy debe tener 2 o más elementos.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -82,7 +82,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The second `List` component representing the tasks for tomorrow should have 3 or more items.
|
||||
El segundo componente `List` que representa las tareas para mañana debe tener 3 o más elementos.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -93,7 +93,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `List` component should render the value from the `tasks` prop in the `p` tag.
|
||||
El componente `List` debe renderizar el valor del prop `tasks` en la etiqueta `p`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d403617a
|
||||
title: Pass State as Props to Child Components
|
||||
title: Pasa el estado como "props" a componentes hijos
|
||||
challengeType: 6
|
||||
forumTopicId: 301403
|
||||
dashedName: pass-state-as-props-to-child-components
|
||||
@@ -8,19 +8,19 @@ dashedName: pass-state-as-props-to-child-components
|
||||
|
||||
# --description--
|
||||
|
||||
You saw a lot of examples that passed props to child JSX elements and child React components in previous challenges. You may be wondering where those props come from. A common pattern is to have a stateful component containing the `state` important to your app, that then renders child components. You want these components to have access to some pieces of that `state`, which are passed in as props.
|
||||
Has visto varios ejemplos de como pasar props a elementos JSX hijos y a componentes React hijos en desafíos anteriores. Te preguntarás de dónde vienen esos props. Un patrón común es tener un componente con estado que contenga el `state` importante para tu aplicación, que luego renderiza los componentes hijos. Quieres que estos componentes tengan acceso a algunas partes de ese `state`, el cual se pasa como props.
|
||||
|
||||
For example, maybe you have an `App` component that renders a `Navbar`, among other components. In your `App`, you have `state` that contains a lot of user information, but the `Navbar` only needs access to the user's username so it can display it. You pass that piece of `state` to the `Navbar` component as a prop.
|
||||
Por ejemplo, tal vez tengas un componente `App` que renderiza una `Navbar`, entre otros componentes. En tu `App`, tienes un `state` que contiene mucha información del usuario, pero la `Navbar` sólo necesita acceder al nombre de usuario para poder mostrarlo. Pasas esa parte del `state` al componente `Navbar` como prop.
|
||||
|
||||
This pattern illustrates some important paradigms in React. The first is *unidirectional data flow*. State flows in one direction down the tree of your application's components, from the stateful parent component to child components. The child components only receive the state data they need. The second is that complex stateful apps can be broken down into just a few, or maybe a single, stateful component. The rest of your components simply receive state from the parent as props, and render a UI from that state. It begins to create a separation where state management is handled in one part of code and UI rendering in another. This principle of separating state logic from UI logic is one of React's key principles. When it's used correctly, it makes the design of complex, stateful applications much easier to manage.
|
||||
Este patrón ilustra algunos paradigmas importantes en React. El primero es *unidirectional data flow*. El componente de estado fluye en una sola dirección descendiendo en el árbol de componentes de tu aplicación, desde el componente padre hasta los componentes hijos. Los componentes hijos únicamente reciben los datos del componente de estado que ellos necesitan. La segunda es que las aplicaciones con estado pueden ser divididas en solo algunos, o tal vez un solo, componente con estado. El resto de tus componentes simplemente reciben el estado del padre como props, y renderizan la interfaz de usuario a partir de ese estado. Esto comienza a crear una separación donde la administración de estado es manejada en una parte del código y la renderización de la interfaz de usuario en otra. Este principio de separar la lógica de estado de la lógica de la interfaz de usuario es uno de los principios clave de React. Cuando se utiliza correctamente, hace que el diseño de aplicaciones complejas y de estado sea mucho más fácil de gestionar.
|
||||
|
||||
# --instructions--
|
||||
|
||||
The `MyApp` component is stateful and renders a `Navbar` component as a child. Pass the `name` property in its `state` down to the child component, then show the `name` in the `h1` tag that's part of the `Navbar` render method. `name` should appear after the text `Hello, my name is:`.
|
||||
El componente `MyApp` es de estado y renderiza un componente `Navbar` como un componente hijo. Pasa la propiedad `name` en su `state` al componente hijo, luego muestra el `name` en la etiqueta `h1` que es parte del método de renderizado de `Navbar`. `name` debe aparecer luego del texto `Hello, my name is:`.
|
||||
|
||||
# --hints--
|
||||
|
||||
The `MyApp` component should render with a `Navbar` component inside.
|
||||
El componente `MyApp` debe renderizare con un componente `Navbar` dentro.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -34,7 +34,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `Navbar` component should receive the `MyApp` state property `name` as props.
|
||||
El componente `Navbar` debe recibir la propiedad de estado `name` de `MyApp` como props.
|
||||
|
||||
```js
|
||||
async () => {
|
||||
@@ -50,7 +50,7 @@ async () => {
|
||||
};
|
||||
```
|
||||
|
||||
The `h1` element in `Navbar` should render the `name` prop.
|
||||
El elemento `h1` en `Navbar` debe renderizar el prop `name`.
|
||||
|
||||
```js
|
||||
async () => {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d4036167
|
||||
title: Render a Class Component to the DOM
|
||||
title: Renderiza un componente de clase al DOM
|
||||
challengeType: 6
|
||||
forumTopicId: 301404
|
||||
dashedName: render-a-class-component-to-the-dom
|
||||
@@ -8,19 +8,19 @@ dashedName: render-a-class-component-to-the-dom
|
||||
|
||||
# --description--
|
||||
|
||||
You may remember using the ReactDOM API in an earlier challenge to render JSX elements to the DOM. The process for rendering React components will look very similar. The past few challenges focused on components and composition, so the rendering was done for you behind the scenes. However, none of the React code you write will render to the DOM without making a call to the ReactDOM API.
|
||||
Puede que recuerdes haber usado la API ReactDOM en un desafío anterior para renderizar elementos JSX al DOM. El proceso para renderizar los componentes de React será muy similar. Los últimos desafíos se centraron en los componentes y la composición, por lo que el renderizado se ha realizado tras bambalinas. Sin embargo, ninguna parte de código de React que escribas se procesará en el DOM sin realizar una llamada a la API de ReactDOM.
|
||||
|
||||
Here's a refresher on the syntax: `ReactDOM.render(componentToRender, targetNode)`. The first argument is the React component that you want to render. The second argument is the DOM node that you want to render that component within.
|
||||
Aquí va un recordatorio de la sintaxis: `ReactDOM.render(componentToRender, targetNode)`. El primer argumento es el componente de React que deseas renderizar. El segundo argumento es el nodo del DOM en el que deseas renderizar ese componente.
|
||||
|
||||
React components are passed into `ReactDOM.render()` a little differently than JSX elements. For JSX elements, you pass in the name of the element that you want to render. However, for React components, you need to use the same syntax as if you were rendering a nested component, for example `ReactDOM.render(<ComponentToRender />, targetNode)`. You use this syntax for both ES6 class components and functional components.
|
||||
Los componentes de React se pasan a `ReactDOM.render()` de manera un poco diferente a como se hace con los elementos JSX. Para los elementos JSX, pasas el nombre del elemento que deseas representar. Sin embargo, para los componentes de React, debes usar la misma sintaxis que si estuvieras renderizando un componente anidado, por ejemplo, `ReactDOM.render(<ComponentToRender />, targetNode)`. Se utiliza esta sintaxis tanto para los componentes de clase ES6 como para los componentes funcionales.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Both the `Fruits` and `Vegetables` components are defined for you behind the scenes. Render both components as children of the `TypesOfFood` component, then render `TypesOfFood` to the DOM. There is a `div` with `id='challenge-node'` available for you to use.
|
||||
Los componentes `Fruits` y `Vegetables` se definen por ti tras bambalinas. Renderiza ambos componentes como hijos del componente `TypesOfFood`, y luego renderiza `TypesOfFood` al DOM. Hay un `div` con `id='challenge-node'` disponible para que lo uses.
|
||||
|
||||
# --hints--
|
||||
|
||||
The `TypesOfFood` component should return a single `div` element.
|
||||
El componente `TypesOfFood` debe devolver un solo elemento `div`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -31,7 +31,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `TypesOfFood` component should render the `Fruits` component after the `h1` element.
|
||||
El componente `TypesOfFood` debe renderizar el componente `Fruits` después del elemento `h1`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -42,7 +42,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `TypesOfFood` component should render the `Vegetables` component after `Fruits`.
|
||||
El componente `TypesOfFood` debe renderizar el componente `Vegetables` después de `Fruits`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -53,7 +53,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `TypesOfFood` component should render to the DOM within the `div` with the id `challenge-node`.
|
||||
El componente `TypesOfFood` debe renderizarse al DOM dentro del `div` con el id `challenge-node`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d4036188
|
||||
title: Render Conditionally from Props
|
||||
title: Renderiza condicionalmente a partir de "props"
|
||||
challengeType: 6
|
||||
forumTopicId: 301405
|
||||
dashedName: render-conditionally-from-props
|
||||
@@ -8,21 +8,21 @@ dashedName: render-conditionally-from-props
|
||||
|
||||
# --description--
|
||||
|
||||
So far, you've seen how to use `if/else`, `&&,` `null` and the ternary operator (`condition ? expressionIfTrue : expressionIfFalse`) to make conditional decisions about what to render and when. However, there's one important topic left to discuss that lets you combine any or all of these concepts with another powerful React feature: props. Using props to conditionally render code is very common with React developers — that is, they use the value of a given prop to automatically make decisions about what to render.
|
||||
Hasta ahora, has visto cómo utilizar `if/else`, `&&`, y el operador ternario (`condition ? expressionIfTrue : expressionIfFalse`) para tomar decisiones condicionales sobre qué renderizar y cuándo. Sin embargo, queda un tema importante por discutir que te permite combinar cualquier o todos estos conceptos con otra poderosa característica de React: los props. El uso de props para renderizar condicionalmente el código es muy común entre los desarrolladores de React, es decir, utilizan el valor de una prop dada para automáticamente tomar decisiones sobre qué renderizar.
|
||||
|
||||
In this challenge, you'll set up a child component to make rendering decisions based on props. You'll also use the ternary operator, but you can see how several of the other concepts that were covered in the last few challenges might be just as useful in this context.
|
||||
En este desafío, configurarás un componente hijo para tomar decisiones de renderizado basadas en props. También usarás el operador ternario, pero puedes ver cómo varios de los otros conceptos que se cubrieron en los últimos desafíos podrían ser igual de útiles en este contexto.
|
||||
|
||||
# --instructions--
|
||||
|
||||
The code editor has two components that are partially defined for you: a parent called `GameOfChance`, and a child called `Results`. They are used to create a simple game where the user presses a button to see if they win or lose.
|
||||
El editor de código tiene dos componentes que están parcialmente definidos para ti: un padre llamado `GameOfChance`, y un hijo llamado `Results`. Se utilizan para crear un juego sencillo en el que el usuario presiona un botón para ver si gana o pierde.
|
||||
|
||||
First, you'll need a simple expression that randomly returns a different value every time it is run. You can use `Math.random()`. This method returns a value between `0` (inclusive) and `1` (exclusive) each time it is called. So for 50/50 odds, use `Math.random() >= .5` in your expression. Statistically speaking, this expression will return `true` 50% of the time, and `false` the other 50%. In the render method, replace `null` with the above expression to complete the variable declaration.
|
||||
Primero, necesitarás una expresión simple que devuelva al azar un valor diferente cada vez que se ejecute. Puedes usar `Math.random()`. Este método devuelve un valor entre `0` (inclusivo) y `1` (exclusivo) cada vez que se llama. Así que para las probabilidades de 50/50, usa `Math.random() >= .5` en tu expresión. Estadísticamente hablando, esta expresión devolverá `true` 50% de las veces, y `false` el otro 50%. En el método de renderizado, reemplaza `null` con la expresión anterior para completar la declaración de variables.
|
||||
|
||||
Now you have an expression that you can use to make a randomized decision in the code. Next you need to implement this. Render the `Results` component as a child of `GameOfChance`, and pass in `expression` as a prop called `fiftyFifty`. In the `Results` component, write a ternary expression to render the `h1` element with the text `"You Win!"` or `"You Lose!"` based on the `fiftyFifty` prop that's being passed in from `GameOfChance`. Finally, make sure the `handleClick()` method is correctly counting each turn so the user knows how many times they've played. This also serves to let the user know the component has actually updated in case they win or lose twice in a row.
|
||||
Ahora tienes una expresión que puedes usar para tomar una decisión aleatoria en el código. A continuación, debes implementar esto. Renderiza el componente `Results` como hijo de `GameOfChance`, y pásalo a `expression` como un prop llamado `fiftyFifty`. En el componente `Results`, escribe una expresión ternaria para renderizar el elemento `h1` con el texto `You Win!` o `You Lose!` basado en el prop `fiftyFifty` que está siendo pasado desde `GameOfChance`. Finalmente, asegúrate de que el método `handleClick()` está contando correctamente cada turno para que el usuario sepa cuántas veces ha jugado. Esto también sirve para que el usuario sepa que el componente se ha actualizado en caso de que gane o pierda dos veces seguidas.
|
||||
|
||||
# --hints--
|
||||
|
||||
The `GameOfChance` component should exist and render to the page.
|
||||
El componente `GameOfChance` debe existir y renderizarse en la página.
|
||||
|
||||
```js
|
||||
assert.strictEqual(
|
||||
@@ -31,7 +31,7 @@ assert.strictEqual(
|
||||
);
|
||||
```
|
||||
|
||||
`GameOfChance` should return a single `button` element.
|
||||
`GameOfChance` debe devolver un solo elemento `button`.
|
||||
|
||||
```js
|
||||
assert.strictEqual(
|
||||
@@ -40,7 +40,7 @@ assert.strictEqual(
|
||||
);
|
||||
```
|
||||
|
||||
`GameOfChance` should return a single instance of the `Results` component, which has a prop called `fiftyFifty`.
|
||||
`GameOfChance` debe devolver una sola instancia del componente `Results`, que tiene un prop llamado `fiftyFifty`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -53,7 +53,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`GameOfChance` state should be initialized with a property of `counter` set to a value of `1`.
|
||||
El estado de `GameOfChance` debe inicializarse con la propiedad `counter` establecida en valor `1`.
|
||||
|
||||
```js
|
||||
assert.strictEqual(
|
||||
@@ -62,7 +62,7 @@ assert.strictEqual(
|
||||
);
|
||||
```
|
||||
|
||||
When the `GameOfChance` component is first rendered to the DOM, a `p` element should be returned with the inner text of `Turn: 1`.
|
||||
Cuando el componente `GameOfChance` es renderizado por primera vez en el DOM, un elemento `p` debe ser devuelto con el texto interno `Turn: 1`.
|
||||
|
||||
```js
|
||||
assert.strictEqual(
|
||||
@@ -71,7 +71,7 @@ assert.strictEqual(
|
||||
);
|
||||
```
|
||||
|
||||
Each time the button is clicked, the counter state should be incremented by a value of 1, and a single `p` element should be rendered to the DOM that contains the text "Turn: N", where N is the value of the counter state.
|
||||
Cada vez que se hace clic en el botón, el contador debe incrementarse por un valor de 1, y un único elemento `p` debe ser renderizado al DOM que contiene el texto `Turn: N`, donde `N` es el valor del contador.
|
||||
|
||||
```js
|
||||
(() => {
|
||||
@@ -123,7 +123,7 @@ Each time the button is clicked, the counter state should be incremented by a va
|
||||
})();
|
||||
```
|
||||
|
||||
When the `GameOfChance` component is first mounted to the DOM and each time the button is clicked thereafter, a single `h1` element should be returned that randomly renders either `You Win!` or `You Lose!`.
|
||||
Cuando el componente `GameOfChance` se monta por primera vez en el DOM y cada vez que se hace clic en el botón, un solo elemento `h1` debe ser devuelto, el cual renderiza aleatoriamente `You Win!` o `You Lose!`.
|
||||
|
||||
```js
|
||||
(() => {
|
||||
@@ -240,8 +240,11 @@ class GameOfChance extends React.Component {
|
||||
this.handleClick = this.handleClick.bind(this);
|
||||
}
|
||||
handleClick() {
|
||||
this.setState({
|
||||
counter: 0 // Change this line
|
||||
this.setState(prevState => {
|
||||
// Complete the return statement:
|
||||
return {
|
||||
counter: prevState
|
||||
}
|
||||
});
|
||||
}
|
||||
render() {
|
||||
@@ -280,8 +283,10 @@ class GameOfChance extends React.Component {
|
||||
this.handleClick = this.handleClick.bind(this);
|
||||
}
|
||||
handleClick() {
|
||||
this.setState({
|
||||
counter: this.state.counter + 1
|
||||
this.setState(prevState => {
|
||||
return {
|
||||
counter: prevState.counter + 1
|
||||
}
|
||||
});
|
||||
}
|
||||
render() {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24bbe0dba28a8d3cbd4c5f
|
||||
title: Render HTML Elements to the DOM
|
||||
title: Renderiza elementos HTML al DOM
|
||||
challengeType: 6
|
||||
forumTopicId: 301406
|
||||
dashedName: render-html-elements-to-the-dom
|
||||
@@ -8,37 +8,37 @@ dashedName: render-html-elements-to-the-dom
|
||||
|
||||
# --description--
|
||||
|
||||
So far, you've learned that JSX is a convenient tool to write readable HTML within JavaScript. With React, we can render this JSX directly to the HTML DOM using React's rendering API known as ReactDOM.
|
||||
Hasta ahora, has aprendido que JSX es una herramienta conveniente para escribir HTML legible dentro de JavaScript. Con React, podemos renderizar este JSX directamente al DOM HTML usando la API de renderizado de React conocida como ReactDOM.
|
||||
|
||||
ReactDOM offers a simple method to render React elements to the DOM which looks like this: `ReactDOM.render(componentToRender, targetNode)`, where the first argument is the React element or component that you want to render, and the second argument is the DOM node that you want to render the component to.
|
||||
ReactDOM ofrece un método simple para renderizar elementos React al DOM que se ve así: `ReactDOM.render(componentToRender, targetNode)`, donde el primer argumento es el elemento o componente React que deseas renderizar, y el segundo argumento es el nodo DOM al que se quiere renderizar el componente.
|
||||
|
||||
As you would expect, `ReactDOM.render()` must be called after the JSX element declarations, just like how you must declare variables before using them.
|
||||
Como era de esperarse, `ReactDOM.render()` debe llamarse después de las declaraciones de los elementos JSX, al igual que hay que declarar las variables antes de usarlas.
|
||||
|
||||
# --instructions--
|
||||
|
||||
The code editor has a simple JSX component. Use the `ReactDOM.render()` method to render this component to the page. You can pass defined JSX elements directly in as the first argument and use `document.getElementById()` to select the DOM node to render them to. There is a `div` with `id='challenge-node'` available for you to use. Make sure you don't change the `JSX` constant.
|
||||
El editor de código tiene un componente JSX simple. Usa el método `ReactDOM.render()` para renderizar este componente a la página. Puedes pasar elementos JSX definidos directamente como el primer argumento y utilizar `document.getElementById()` para seleccionar el nodo DOM al que renderizar. Hay un `div` con `id='challenge-node'` disponible para que lo uses. Asegúrate de no cambiar la constante `JSX`.
|
||||
|
||||
# --hints--
|
||||
|
||||
The constant `JSX` should return a `div` element.
|
||||
La constante `JSX` debe devolver un elemento `div`.
|
||||
|
||||
```js
|
||||
assert(JSX.type === 'div');
|
||||
```
|
||||
|
||||
The `div` should contain an `h1` tag as the first element.
|
||||
El `div` debe contener una etiqueta `h1` como primer elemento.
|
||||
|
||||
```js
|
||||
assert(JSX.props.children[0].type === 'h1');
|
||||
```
|
||||
|
||||
The `div` should contain a `p` tag as the second element.
|
||||
El elemento `div` debe contener una etiqueta `p` como segundo elemento.
|
||||
|
||||
```js
|
||||
assert(JSX.props.children[1].type === 'p');
|
||||
```
|
||||
|
||||
The provided JSX element should render to the DOM node with id `challenge-node`.
|
||||
El elemento JSX proporcionado debe renderizarse al nodo DOM con id `challenge-node`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d403618d
|
||||
title: Render React on the Server with renderToString
|
||||
title: Renderiza React en el servidor con renderToString
|
||||
challengeType: 6
|
||||
forumTopicId: 301407
|
||||
dashedName: render-react-on-the-server-with-rendertostring
|
||||
@@ -8,17 +8,17 @@ dashedName: render-react-on-the-server-with-rendertostring
|
||||
|
||||
# --description--
|
||||
|
||||
So far, you have been rendering React components on the client. Normally, this is what you will always do. However, there are some use cases where it makes sense to render a React component on the server. Since React is a JavaScript view library and you can run JavaScript on the server with Node, this is possible. In fact, React provides a `renderToString()` method you can use for this purpose.
|
||||
Hasta ahora, has estado renderizando componentes React en el cliente. Normalmente, esto es lo que siempre harás. Sin embargo, hay algunos casos de uso donde tiene sentido renderizar un componente React en el servidor. Dado que React es una biblioteca de vistas de JavaScript y se puede ejecutar JavaScript en el servidor con Node, esto es posible. De hecho, React proporciona un método `renderToString()` que puedes usar para este propósito.
|
||||
|
||||
There are two key reasons why rendering on the server may be used in a real world app. First, without doing this, your React apps would consist of a relatively empty HTML file and a large bundle of JavaScript when it's initially loaded to the browser. This may not be ideal for search engines that are trying to index the content of your pages so people can find you. If you render the initial HTML markup on the server and send this to the client, the initial page load contains all of the page's markup which can be crawled by search engines. Second, this creates a faster initial page load experience because the rendered HTML is smaller than the JavaScript code of the entire app. React will still be able to recognize your app and manage it after the initial load.
|
||||
Hay dos razones clave por las que el renderizado en el servidor puede ser usado en una aplicación del mundo real. Primero, sin hacer esto, tus aplicaciones de React consistirían en un archivo HTML relativamente vacío y un gran paquete de JavaScript cuando se carga inicialmente en el navegador. Esto puede no ser ideal para motores de búsqueda que intentan indexar el contenido de tus páginas para que la gente pueda encontrarte. Si renderizas el código HTML inicial en el servidor y lo envía al cliente, la carga de la página inicial contiene todo el código de la página que los motores de búsqueda pueden rastrear. Segundo, esto crea una experiencia de carga de página inicial más rápida porque el HTML renderizado es más pequeño que el código JavaScript de toda la aplicación. React aún podrá reconocer tu aplicación y administrarla después de la carga inicial.
|
||||
|
||||
# --instructions--
|
||||
|
||||
The `renderToString()` method is provided on `ReactDOMServer`, which is available here as a global object. The method takes one argument which is a React element. Use this to render `App` to a string.
|
||||
El método `renderToString()` se proporciona en `ReactDOMServer`, el cual está disponible aquí como un objeto global. El método toma un argumento que es un elemento React. Usa esto para renderizar `App` a una cadena.
|
||||
|
||||
# --hints--
|
||||
|
||||
The `App` component should render to a string using `ReactDOMServer.renderToString`.
|
||||
El componente `App` debe renderizar a una cadena usando `ReactDOMServer.renderToString`.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
|
||||
Reference in New Issue
Block a user