-
Notifications
You must be signed in to change notification settings - Fork 12
translates: tutorial (broken replaced by #73) #29
translates: tutorial (broken replaced by #73) #29
Conversation
Deploy preview for nl-reactjs ready! Built with commit dac1e7d |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is an initial 30 minute review of the first 50 lines of the translation. I hope to be back later with more feedback but I do think that some of the requested changes can already be discussed and if agreed upon be mirrored throughout the document.
My deep respect already for the initial translation of this 1200+ line document!
|
||
We recommend that you check out the tic-tac-toe game before continuing with the tutorial. One of the features that you'll notice is that there is a numbered list to the right of the game's board. This list gives you a history of all of the moves that have occurred in the game, and is updated as the game progresses. | ||
We raden aan dat een kijkje neemt naar het tic-tac-toe spel voordat je verdergaat met de tutorial. Een van de eigenschappen dat je zal opmerken is dat er een genummerde lijst is aan de rechterkant van het spel. Deze lijst geeft je een geschiedenis van alle zetten die in het spel zijn voorgekomen, en deze wordt geupdate tijdens het spel. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We raden aan dat een kijkje neemt naar het tic-tac-toe spel voordat je verdergaat met de tutorial. Een van de eigenschappen dat je zal opmerken is dat er een genummerde lijst is aan de rechterkant van het spel. Deze lijst geeft je een geschiedenis van alle zetten die in het spel zijn voorgekomen, en deze wordt geupdate tijdens het spel. | |
We raden aan dat je een kijkje neemt naar het boter-kaas-en-eieren spel voordat je verdergaat met de inleiding. Een van de eigenschappen die je zal opmerken is dat er een genummerde lijst is aan de rechterkant van het spel. Deze lijst geeft je een geschiedenis van alle zetten die in het spel zijn voorgekomen, en deze wordt geüpdatet tijdens het spel. |
Co-Authored-By: supermooshman <[email protected]>
Co-Authored-By: supermooshman <[email protected]>
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Review line 1-100.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Review lines 101-200.
|
||
### Passing Data Through Props {#passing-data-through-props} | ||
### Data doorgeven door middel van Props {#passing-data-through-props} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
### Data doorgeven door middel van Props {#passing-data-through-props} | |
### Data Doorgeven Met Props {#passing-data-through-props} |
|
||
Just to get our feet wet, let's try passing some data from our Board component to our Square component. | ||
Om te beginnen, proberen we data van het Board component naar het Square component door te geven. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Om te beginnen, proberen we data van het Board component naar het Square component door te geven. | |
Om te beginnen, zullen we proberen data van het Board component aan het Square component door te geven. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Review lines 201-500.
|
||
Congratulations! You've just "passed a prop" from a parent Board component to a child Square component. Passing props is how information flows in React apps, from parents to children. | ||
Gefeliciteerd, je het zojuist een prop van de parent Board doorgegeven aan het child Square component door gegeven. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Gefeliciteerd, je het zojuist een prop van de parent Board doorgegeven aan het child Square component door gegeven. | |
Gefeliciteerd! Je hebt zojuist een prop van de parent Board doorgegeven aan het child Square component. |
|
||
### Making an Interactive Component {#making-an-interactive-component} | ||
### Interactieve Componenten maken {#making-an-interactive-component} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
### Interactieve Componenten maken {#making-an-interactive-component} | |
### Interactieve Componenten Maken {#making-an-interactive-component} |
Let's fill the Square component with an "X" when we click it. | ||
First, change the button tag that is returned from the Square component's `render()` function to this: | ||
Laten we het Square component met een "X" vullen wanneer we dit aanklikken. | ||
Eerst, verander de button tag die gereturned wordt door de `render()` functie van het Square component: |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Eerst, verander de button tag die gereturned wordt door de `render()` functie van het Square component: | |
Verander eerst de button tag die teruggegeven wordt door de `render()` functie van het Square component: |
|
||
>Note | ||
>Nota |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
>Nota | |
>Opmerking |
|
||
Now we're passing down two props from Board to Square: `value` and `onClick`. The `onClick` prop is a function that Square can call when clicked. We'll make the following changes to Square: | ||
Nu zijn we twee props door aan het geven van Board naar Square: `value` en `onClick`. De `onClick` prop is een functie die het Square component can oproepen wanneer het aangeklikt wordt. We maken de volgende veranderingen aan Square: |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nu zijn we twee props door aan het geven van Board naar Square: `value` en `onClick`. De `onClick` prop is een functie die het Square component can oproepen wanneer het aangeklikt wordt. We maken de volgende veranderingen aan Square: | |
Nu zijn we twee props door aan het geven van Board naar Square: `value` en `onClick`. De `onClick` prop is een functie die het Square component kan aanroepen wanneer het aangeklikt wordt. We maken de volgende veranderingen aan Square: |
* Delete the `constructor` from Square because Square no longer keeps track of the game's state | ||
* Vervang `this.state.value` met `this.props.value` in de Square `render` methode | ||
* Vervang `this.setState()` met `this.props.onClick()` in de Square `render` methode | ||
* Delete de `constructor` van Square want Square houdt niet langer de staat van het spel bij |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
* Delete de `constructor` van Square want Square houdt niet langer de staat van het spel bij | |
* Verwijder de `constructor` van Square want Square houdt niet langer de staat van het spel bij |
2. Wanneer de knop aangeklikt wordt, roept React de `onClick` event handler die gedefinieerd is in de `render()` methode van Square. | ||
3. Deze event handler roept `this.props.onClick()` op. De prop `onClick` prop van Square is gespecifieerd door Board. | ||
4. Aangezien Board `onClick={() => this.handleClick(i)}` aan Square doorgaf, roept Square `this.handleClick(i)` wanneer het aangeklikt wordt. | ||
5. We hebben de methode `handleClick()` nog niet gedefinieerd dus onze code crashed. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
5. We hebben de methode `handleClick()` nog niet gedefinieerd dus onze code crashed. | |
5. We hebben de methode `handleClick()` nog niet gedefinieerd dus onze code faalt. |
|
||
>Note | ||
>Nota |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
>Nota | |
>Opmerking |
Co-Authored-By: supermooshman <[email protected]>
Co-Authored-By: supermooshman <[email protected]>
Co-Authored-By: supermooshman <[email protected]>
Co-Authored-By: supermooshman <[email protected]>
Co-Authored-By: supermooshman <[email protected]>
|
||
After these changes, we're again able to click on the Squares to fill them. However, now the state is stored in the Board component instead of the individual Square components. When the Board's state changes, the Square components re-render automatically. Keeping the state of all squares in the Board component will allow it to determine the winner in the future. | ||
Na deze veranderingen zijn hebben we de mogelijkheid weer om de Square componenten aan te klikken om deze op te vullen. Maar nu is de state in het Board component opgeslagen in plaats van in de individuele Square componenten. Wanneer de state van Board verandert zullen de Square componenten automatisch her-renderen. Het opslaan van de state van alle Square componenten in het Board component staat toe om later een winner uit te roepen. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Na deze veranderingen zijn hebben we de mogelijkheid weer om de Square componenten aan te klikken om deze op te vullen. Maar nu is de state in het Board component opgeslagen in plaats van in de individuele Square componenten. Wanneer de state van Board verandert zullen de Square componenten automatisch her-renderen. Het opslaan van de state van alle Square componenten in het Board component staat toe om later een winner uit te roepen. | |
Na deze veranderingen kunnen we de Square componenten weer aanklikken om deze op te vullen. Maar nu is de state in het Board component opgeslagen in plaats van in de individuele Square componenten. Wanneer de state van Board verandert zullen de Square componenten automatisch opnieuw renderen. Het opslaan van de state van alle Square componenten in het Board component staat toe om later een winnaar te determineren. |
|
||
Since the Square components no longer maintain state, the Square components receive values from the Board component and inform the Board component when they're clicked. In React terms, the Square components are now **controlled components**. The Board has full control over them. | ||
Aangezien de Square componenten niet langer de state bevatten, de Square componenten waardes ontvangen van het Board component en het Board component informeren wanneer ze aangeklikt worden. In de React terminologie, zijn deze nu **controlled components**. Het Board component heeft volledige controle over hen. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Aangezien de Square componenten niet langer de state bevatten, de Square componenten waardes ontvangen van het Board component en het Board component informeren wanneer ze aangeklikt worden. In de React terminologie, zijn deze nu **controlled components**. Het Board component heeft volledige controle over hen. | |
Aangezien de Square componenten niet langer de state bevatten, de Square componenten waardes ontvangen van het Board component en het Board component informeren wanneer ze aangeklikt worden. Volgens React terminologie, zijn deze nu **controlled components**. Het Board component heeft volledige controle over hen. |
|
||
Note how in `handleClick`, we call `.slice()` to create a copy of the `squares` array to modify instead of modifying the existing array. We will explain why we create a copy of the `squares` array in the next section. | ||
Merk op hoe in `handleClick` we `.slice()` oproepen om een kopie van de `squares` array te modifieeren in plaats van de bestaande array. We bespreken in hetvolgende hoofstuk waarom we een kopie van de `squares` array maken. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Merk op hoe in `handleClick` we `.slice()` oproepen om een kopie van de `squares` array te modifieeren in plaats van de bestaande array. We bespreken in hetvolgende hoofstuk waarom we een kopie van de `squares` array maken. | |
Merk op hoe in `handleClick` we `.slice()` oproepen om een kopie van de `squares` array te modificeren in plaats van de bestaande array. We bespreken in het volgende hoofdstuk waarom we een kopie van de `squares` array maken. |
|
||
In the previous code example, we suggested that you use the `.slice()` operator to create a copy of the `squares` array to modify instead of modifying the existing array. We'll now discuss immutability and why immutability is important to learn. | ||
In het vorige code voorbeeld, hebben we aangeraden dat je de `.slice()` operator gebruikt om een kopie van de `squares` array creeert, om deze aan te passen. We bespreken immutability en waarom het belangrijk is om immutability te leren. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
In het vorige code voorbeeld, hebben we aangeraden dat je de `.slice()` operator gebruikt om een kopie van de `squares` array creeert, om deze aan te passen. We bespreken immutability en waarom het belangrijk is om immutability te leren. | |
In het vorige code voorbeeld, hebben we aangeraden dat je de `.slice()` operator gebruikt om een kopie van de `squares` array creëert, om deze aan te passen. We bespreken immutability en waarom het belangrijk is om immutability te leren. |
|
||
#### Data Change with Mutation {#data-change-with-mutation} | ||
#### Data Change door Mutation {#data-change-with-mutation} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
#### Data Change door Mutation {#data-change-with-mutation} | |
#### Data Change Door Mutation {#data-change-with-mutation} |
@@ -1165,11 +1180,11 @@ Next, we'll define the `jumpTo` method in Game to update that `stepNumber`. We a | |||
} | |||
``` | |||
|
|||
We will now make a few changes to the Game's `handleClick` method which fires when you click on a square. | |||
We maken nu enkele veranderingen aan de Game `handleClick` methode, opgeroept wordt wanneer je een Square aanklikt. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We maken nu enkele veranderingen aan de Game `handleClick` methode, opgeroept wordt wanneer je een Square aanklikt. | |
We maken nu enkele veranderingen aan de Game `handleClick` methode, die opgeroept wordt wanneer je een Square aanklikt. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
opgeroept => voltooid deelwoord van oproepen in opgeroepen
maar aanroepen is hier beter
We maken nu enkele veranderingen aan de Game `handleClick` methode, opgeroept wordt wanneer je een Square aanklikt. | |
We maken nu enkele veranderingen aan de `handleClick` methode van Game, die aangeroepen wordt wanneer je een Square aanklikt. |
Co-Authored-By: supermooshman <[email protected]>
Co-Authored-By: supermooshman <[email protected]>
Co-Authored-By: supermooshman <[email protected]>
Co-Authored-By: supermooshman <[email protected]>
Co-Authored-By: supermooshman <[email protected]>
Co-Authored-By: supermooshman <[email protected]>
Co-Authored-By: supermooshman <[email protected]>
Co-Authored-By: supermooshman <[email protected]>
Some general thoughts I had after reviewing:
|
Co-Authored-By: supermooshman <[email protected]>
Co-Authored-By: supermooshman <[email protected]>
Co-Authored-By: supermooshman <[email protected]>
Co-Authored-By: supermooshman <[email protected]>
Co-Authored-By: supermooshman <[email protected]>
Co-Authored-By: supermooshman <[email protected]>
Co-Authored-By: supermooshman <[email protected]>
Co-Authored-By: supermooshman <[email protected]>
Co-Authored-By: supermooshman <[email protected]>
Co-Authored-By: supermooshman <[email protected]>
Co-Authored-By: jochenboesmans <[email protected]>
Co-Authored-By: jochenboesmans <[email protected]>
Co-Authored-By: jochenboesmans <[email protected]>
Co-Authored-By: jochenboesmans <[email protected]>
Replaced by #73 |
Deze branch nog niet verwijderen, opmerkingen kunnen nog worden verwerkt in de vervangend branch.