Skip to content

Update thinking-in-react.md #815

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Jul 12, 2023
Merged

Update thinking-in-react.md #815

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
777ffe5
Corrección ortográfica
NGHdeveloper Jul 12, 2023
04fa760
Traducción del componente Sandpack
NGHdeveloper Jul 12, 2023
ca126ba
Merge branch 'main' into thinking-in-react
mateoguzmana Jul 12, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
64 changes: 32 additions & 32 deletions src/content/learn/thinking-in-react.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,12 +16,12 @@ La API JSON devuelve algunos datos como estos:

```json
[
{ category: "Fruits", price: "$1", stocked: true, name: "Apple" },
{ category: "Fruits", price: "$1", stocked: true, name: "Dragonfruit" },
{ category: "Fruits", price: "$2", stocked: false, name: "Passionfruit" },
{ category: "Vegetables", price: "$2", stocked: true, name: "Spinach" },
{ category: "Vegetables", price: "$4", stocked: false, name: "Pumpkin" },
{ category: "Vegetables", price: "$1", stocked: true, name: "Peas" }
{ category: "Frutas", price: "$1", stocked: true, name: "Manzana" },
{ category: "Frutas", price: "$1", stocked: true, name: "Fruta del dragón" },
{ category: "Frutas", price: "$2", stocked: false, name: "Maracuyá" },
{ category: "Verduras", price: "$2", stocked: true, name: "Espinaca" },
{ category: "Verduras", price: "$4", stocked: false, name: "Calabaza" },
{ category: "Verduras", price: "$1", stocked: true, name: "Guisantes" }
]
```

Expand Down Expand Up @@ -61,7 +61,7 @@ Hay cinco componentes en esta pantalla:

</FullWidth>

Si miras a `ProductTable` (lavanda), verás que el encabezado de la tabla (que contiene las etiquetas "Name" y "Price") no es un componente independiente. Esto es una cuestión de preferencias, y podrías hacerlo de ambas formas. Para este ejemplo, es parte de `ProductTable` porque aparece dentro de la lista de `ProductTable`. Sin embargo, si este encabezado crece y se vuelve complejo (por ejemplo, si añades ordenamiento), tendría sentido convertirlo en un componente independiente `ProductTableHeader`.
Si miras a `ProductTable` (lavanda), verás que el encabezado de la tabla (que contiene las etiquetas "Nombre" y "Precio") no es un componente independiente. Esto es una cuestión de preferencias, y podrías hacerlo de ambas formas. Para este ejemplo, es parte de `ProductTable` porque aparece dentro de la lista de `ProductTable`. Sin embargo, si este encabezado crece y se vuelve complejo (por ejemplo, si añades ordenamiento), tendría sentido convertirlo en un componente independiente `ProductTableHeader`.

Ahora que has identificado los componentes en el boceto, ordénalos en una jerarquía:

Expand Down Expand Up @@ -130,8 +130,8 @@ function ProductTable({ products }) {
<table>
<thead>
<tr>
<th>Name</th>
<th>Price</th>
<th>Nombre</th>
<th>Precio</th>
</tr>
</thead>
<tbody>{rows}</tbody>
Expand Down Expand Up @@ -162,12 +162,12 @@ function FilterableProductTable({ products }) {
}

const PRODUCTS = [
{category: "Fruits", price: "$1", stocked: true, name: "Apple"},
{category: "Fruits", price: "$1", stocked: true, name: "Dragonfruit"},
{category: "Fruits", price: "$2", stocked: false, name: "Passionfruit"},
{category: "Vegetables", price: "$2", stocked: true, name: "Spinach"},
{category: "Vegetables", price: "$4", stocked: false, name: "Pumpkin"},
{category: "Vegetables", price: "$1", stocked: true, name: "Peas"}
{category: "Frutas", price: "$1", stocked: true, name: "Manzana"},
{category: "Frutas", price: "$1", stocked: true, name: "Fruta del dragón"},
{category: "Frutas", price: "$2", stocked: false, name: "Maracuyá"},
{category: "Verduras", price: "$2", stocked: true, name: "Espinaca"},
{category: "Verduras", price: "$4", stocked: false, name: "Calabaza"},
{category: "Verduras", price: "$1", stocked: true, name: "Guisantes"}
];

export default function App() {
Expand Down Expand Up @@ -258,7 +258,7 @@ Por cada pieza de estado en tu aplicación:
2. Encuentra su componente ancestro común más cercano--un componente que esté encima de todos en la jerarquía
3. Decide dónde debe residir el estado:
1. A menudo, puedes poner el estado directamente en su ancestro común.
2. También puedes poner el estado en algún componete encima de su ancestro común.
2. También puedes poner el estado en algún componente encima de su ancestro común.
3. Si no puedes encontrar un componente donde tiene sentido poseer el estado, crea un nuevo componente solo para almacenar ese estado y añádelo en algún lugar de la jerarquía encima del componente ancestro común.

En el paso anterior, encontraste dos elementos de estado en esta aplicación: el texto de la barra de búsqueda, y el valor del *checkbox*. En este ejemplo, siempre aparecen juntos, por lo que es más fácil pensar en ellos como un solo elemento de estado.
Expand Down Expand Up @@ -377,8 +377,8 @@ function ProductTable({ products, filterText, inStockOnly }) {
<table>
<thead>
<tr>
<th>Name</th>
<th>Price</th>
<th>Nombre</th>
<th>Precio</th>
</tr>
</thead>
<tbody>{rows}</tbody>
Expand All @@ -405,12 +405,12 @@ function SearchBar({ filterText, inStockOnly }) {
}

const PRODUCTS = [
{category: "Fruits", price: "$1", stocked: true, name: "Apple"},
{category: "Fruits", price: "$1", stocked: true, name: "Dragonfruit"},
{category: "Fruits", price: "$2", stocked: false, name: "Passionfruit"},
{category: "Vegetables", price: "$2", stocked: true, name: "Spinach"},
{category: "Vegetables", price: "$4", stocked: false, name: "Pumpkin"},
{category: "Vegetables", price: "$1", stocked: true, name: "Peas"}
{category: "Frutas", price: "$1", stocked: true, name: "Manzana"},
{category: "Frutas", price: "$1", stocked: true, name: "Fruta del dragón"},
{category: "Frutas", price: "$2", stocked: false, name: "Maracuyá"},
{category: "Verduras", price: "$2", stocked: true, name: "Espinaca"},
{category: "Verduras", price: "$4", stocked: false, name: "Calabaza"},
{category: "Verduras", price: "$1", stocked: true, name: "Guisantes"}
];

export default function App() {
Expand Down Expand Up @@ -576,8 +576,8 @@ function ProductTable({ products, filterText, inStockOnly }) {
<table>
<thead>
<tr>
<th>Name</th>
<th>Price</th>
<th>Nombre</th>
<th>Precio</th>
</tr>
</thead>
<tbody>{rows}</tbody>
Expand Down Expand Up @@ -610,12 +610,12 @@ function SearchBar({
}

const PRODUCTS = [
{category: "Fruits", price: "$1", stocked: true, name: "Apple"},
{category: "Fruits", price: "$1", stocked: true, name: "Dragonfruit"},
{category: "Fruits", price: "$2", stocked: false, name: "Passionfruit"},
{category: "Vegetables", price: "$2", stocked: true, name: "Spinach"},
{category: "Vegetables", price: "$4", stocked: false, name: "Pumpkin"},
{category: "Vegetables", price: "$1", stocked: true, name: "Peas"}
{category: "Frutas", price: "$1", stocked: true, name: "Manzana"},
{category: "Frutas", price: "$1", stocked: true, name: "Fruta del dragón"},
{category: "Frutas", price: "$2", stocked: false, name: "Maracuyá"},
{category: "Verduras", price: "$2", stocked: true, name: "Espinaca"},
{category: "Verduras", price: "$4", stocked: false, name: "Calabaza"},
{category: "Verduras", price: "$1", stocked: true, name: "Guisantes"}
];

export default function App() {
Expand Down