Skip to content
This repository has been archived by the owner on Nov 19, 2024. It is now read-only.

Commit

Permalink
optimizing markdown
Browse files Browse the repository at this point in the history
  • Loading branch information
@samzzi
samzzi committed Jul 26, 2022
1 parent 59b3ff4 commit 6c069ef
Show file tree
Hide file tree
Showing 8 changed files with 103 additions and 92 deletions.
15 changes: 13 additions & 2 deletions docs/concepten/componenten.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,21 @@ function HelloWorld() {
}
```

{% embed url="https://codepen.io/TroTi13/pen/VwWOZBb?editors=1010" %}
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="VwWOZBb" data-user="TroTi13" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/TroTi13/pen/VwWOZBb">
React functional components</a> by Bram Verdyck (<a href="https://codepen.io/TroTi13">@TroTi13</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>


## Class components

Class components dienen voor complexere componenten. Een component die bijvoorbeeld een waarde moet kunnen onthouden ([state](state.md)) en daarmee logica uitvoeren. Een component die net voor of net na de render functie iets moet uitvoeren ([lifecycle events](lifecycle-events.md)). Een class component wordt ook een _stateful_ component genoemd, omdat deze component een state heeft (ook al is die leeg).

{% embed url="https://codepen.io/TroTi13/pen/WNOBRgb" %}
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="WNOBRgb" data-user="TroTi13" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/TroTi13/pen/WNOBRgb">
React class components</a> by Bram Verdyck (<a href="https://codepen.io/TroTi13">@TroTi13</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>

<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
12 changes: 8 additions & 4 deletions docs/concepten/conditional-rendering.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,11 @@ return condition ? <Element /> : <OtherElement />

### Voorbeeld

{% embed url="https://codepen.io/TroTi13/pen/rNwXJoo?editors=1111" %}

{% embed url="https://reactjs.org/docs/conditional-rendering.html" %}

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="rNwXJoo" data-user="TroTi13" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/TroTi13/pen/rNwXJoo">
React fake login button</a> by Bram Verdyck (<a href="https://codepen.io/TroTi13">@TroTi13</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

[:octicons-link-external-16: React JS: Conditional rendering](https://reactjs.org/docs/conditional-rendering.html){.md-button target="_blank"}
3 changes: 1 addition & 2 deletions docs/concepten/lifecycle-events.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,5 +20,4 @@ componentWillUnmount {
}
```

{% embed url="https://reactjs.org/docs/state-and-lifecycle.html#adding-lifecycle-methods-to-a-class" %}

[:octicons-link-external-16: React JS: State and lifecycle](https://reactjs.org/docs/state-and-lifecycle.html#adding-lifecycle-methods-to-a-class){.md-button target="_blank"}
18 changes: 11 additions & 7 deletions docs/concepten/loops.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,8 +31,8 @@ Als we deze data nu willen gebruiken in React, kunnen we dat op verschillende ma
JSX kan Arrays van componenten meteen renderen. We kunnen dus gebruik maken van die Array.map functie om rechtstreeks een Array van React componenten op te bouwen. Dat zou er zo uit kunnen zien:

```javascript
const commentsComponents = comments.map(comment =>
<Comment
const commentsComponents = comments.map(comment =>
<Comment
author={comment.author}
time={comment.timestamp}
>{comment.message}</Comment>
Expand All @@ -50,8 +50,8 @@ De manier waarop we hierboven de Array.map gebruiken om comments te renderen, ga
Een key toevoegen aan een element doe je bijvoorbeeld zo:

```javascript
const commentsComponents = comments.map((comment, i) =>
<Comment
const commentsComponents = comments.map((comment, i) =>
<Comment
key={`section-1-comment-${i}`} // een unieke key voor elke comment in section-1
author={comment.author}
time={comment.timestamp}
Expand All @@ -61,7 +61,11 @@ const commentsComponents = comments.map((comment, i) =>

### Voorbeeld

{% embed url="https://codepen.io/TroTi13/pen/OJgKQWN?editors=1111" %}

{% embed url="https://reactjs.org/docs/lists-and-keys.html" %}
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="OJgKQWN" data-user="TroTi13" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/TroTi13/pen/OJgKQWN">
React comments</a> by Bram Verdyck (<a href="https://codepen.io/TroTi13">@TroTi13</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

[:octicons-link-external-16: React JS: Lists and keys](https://reactjs.org/docs/lists-and-keys.html){.md-button target="_blank"}
7 changes: 3 additions & 4 deletions docs/concepten/props.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,7 @@ function App() {
}
```

{% hint style="info" %}
Props zijn read-only, de data kan dus ingelezen worden, maar niet worden aangepast.
{% endhint %}
!!! info ""
Props zijn read-only, de data kan dus ingelezen worden, maar niet worden aangepast.

{% embed url="https://reactjs.org/docs/components-and-props.html" %}
[:octicons-link-external-16: React JS: Components and props](https://reactjs.org/docs/components-and-props.html){.md-button target="_blank"}
3 changes: 1 addition & 2 deletions docs/concepten/state.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,5 +50,4 @@ this.setState((state, props) => ({
}));
```

{% embed url="https://reactjs.org/docs/state-and-lifecycle.html" %}

[:octicons-link-external-16: React JS: State and lifecycle](https://reactjs.org/docs/state-and-lifecycle.html){.md-button target="_blank"}
12 changes: 5 additions & 7 deletions docs/extra/create-react-app.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,9 +100,8 @@ reportWebVitals();

We zien hier meteen ook de moderne manier om React te gebruiken, als NPM package welke we importeren in onze javascript componenten. Op deze manier kan Webpack achterliggend heel efficiënt onze javascript code gaan bundelen, en worden enkel de scripts die we vanuit de index.js importeren, uiteindelijk gebundeld in de applicatie.

{% hint style="info" %}
Merk ook op dat we per component hier ook .css files kunnen inladen. Deze css files worden door Webpack mee gebundeld en bij een 'build' als aparte, geoptimaliseerde, gebundelde css file mee opgenomen.
{% endhint %}
!!! info ""
Merk ook op dat we per component hier ook .css files kunnen inladen. Deze css files worden door Webpack mee gebundeld en bij een 'build' als aparte, geoptimaliseerde, gebundelde css file mee opgenomen.

#### App.js

Expand Down Expand Up @@ -148,8 +147,7 @@ Er wordt een build folder aangemaakt met daarin alle geoptimaliseerde files.

Ben je nieuwsgierig naar hoe zo'n create-react-app achter de schermen werkt, kan je éénmalig een commando uitvoeren om alle configuratie files en setup uit te node\_modules folder te halen en in de root van je project te zetten. Dat commando is het volgende: `yarn eject`

{% hint style="warning" %}
Opgelet, dit commando is onomkeerbaar! Hoewel je applicatie gewoon zal blijven werken als voorheen, zit je meteen met heel wat meer files en kans op misconfiguraties. Doe dit in het begin dus enkel bij een simpele setup die je enkel gebruikt om te oefenen, en maak desnoods een back-up (zonder de node\_modules folder!!) zodat je altijd terug kan.
{% endhint %}
!!! warning "Opgelet"
Dit commando is onomkeerbaar! Hoewel je applicatie gewoon zal blijven werken als voorheen, zit je meteen met heel wat meer files en kans op misconfiguraties. Doe dit in het begin dus enkel bij een simpele setup die je enkel gebruikt om te oefenen, en maak desnoods een back-up (zonder de node\_modules folder!!) zodat je altijd terug kan.

{% embed url="https://github.com/facebook/create-react-app" %}
[:octicons-link-external-16: Github: create-react-app](https://github.com/facebook/create-react-app){.md-button target="_blank"}
125 changes: 61 additions & 64 deletions docs/extra/routing.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,53 +33,50 @@ We zien hier een specifieke versie van de React Router module, speciaal voor geb

Na het installeren van de Router module moeten we deze toevoegen in onze applicatie. In de meeste gevallen gebruiken we 1 routing voor de volledige app. We moeten de \<App /> component dus laten weten dat er genavigeerd kan worden. Dat doen we zo:

{% code title="index.js" %}
```javascript
...
import { BrowserRouter as Router } from 'react-router-dom';
=== "index.js"

...

ReactDom.render(<Router><App /></Router>, document.getElementById('root'));
```
{% endcode %}
```javascript
...
import { BrowserRouter as Router } from 'react-router-dom';
...
ReactDom.render(<Router><App /></Router>, document.getElementById('root'));
...
```

Door de \<App /> component in de \<Router /> component te zetten, kunnen we binnen de \<App /> component onze routes gaan definiëren.

Een route definiëren doe je zo, in de \<App /> component:

{% code title="App.js" %}
```javascript
...
import { Route } from 'react-router-dom';
=== "App.js"

...

// in de render functie van <App />
<Route path="/" component={Home} />
```
{% endcode %}
```javascript
...
import { Route } from 'react-router-dom';
...
// in de render functie van <App />
<Route path="/" component={Home} />
```

Bovenstaande regel registreert een nieuwe route, de basisroute ( / ) waarop de \<Home /> component moet gerenderd worden.

Stel dat je in je \<App /> component variabelen hebt (bijvoorbeeld een state) die je via props wil doorgeven aan je component, dan kan je dat op volgende manier doen:

{% code title="App.js" %}
```javascript
// in de render functie van <App />
<Route path="/comments" render={
(props) => (
<CommentsList {...props} comments={this.state.comments} />
)
} />
```
{% endcode %}
=== "App.js"

```javascript
// in de render functie van <App />
<Route path="/comments" render={
(props) => (
<CommentsList {...props} comments={this.state.comments} />
)
} />
```

Dit is een ietwat complexere notatie, waarbij we een render functie gebruiken. In deze render functie kan je conditioneel componenten renderen, of bijvoorbeeld props meegeven aan componenten. De (props) die in de functie worden meegegeven, zijn standaard props van de router. De props die worden meegegeven aan elke component die via een Route wordt gerenderd zijn de volgende:

* [match](https://reactrouter.com/web/api/match)
* [location](https://reactrouter.com/web/api/location)
* [history](https://reactrouter.com/web/api/history)
* [match](https://reactrouter.com/web/api/match){:target="_blank"}
* [location](https://reactrouter.com/web/api/location){:target="_blank"}
* [history](https://reactrouter.com/web/api/history){:target="_blank"}

Je kan ook dynamische routes aanmaken, waarbij een deel van de routenaam bestaat uit een variabel deel. Dit doe je als volgt:

Expand All @@ -102,51 +99,51 @@ import { Link } from 'react-router-dom';

De \<Link /> component is gemaakt voor basis links, eigenlijk voor gebruik doorheen de applicatie maar als je links wil gebruiken in een navigatie kan je beter gebruik maken van de \<NavLink /> component. Bij deze component kan je bijvoorbeeld handig gebruik maken van de activeClassName prop, om een class toe te voegen als de route actief is. Dat doe je zo:

{% code title="Nav.js" %}
```javascript
...
import { NavLink } from 'react-router-dom';
...
=== "Nav.js"

// in de render functie van <Nav />
<NavLink to="/comments" activeClassName="active">Comments</Link>
```
{% endcode %}
```javascript
...
import { NavLink } from 'react-router-dom';
...

// in de render functie van <Nav />
<NavLink to="/comments" activeClassName="active">Comments</Link>
```

### Switch

Eenmaal je routes begint aan te maken, zal je snel merken dat bijvoorbeeld de algemene route ( / ) altijd actief gaat zijn, en dus altijd in dit geval de \<Home /> component gaat renderen. Dat kan natuurlijk niet de bedoeling zijn. Je kan dit vermijden door je routes te _wrappen_ in een \<Switch /> component. Deze component gaat er voor zorgen dat de router de eerste route die matched, dus die gelijk is aan de path prop van een \<Route /> component, rendered en daarna stopt met verder te kijken. Als je er dan op let dat je de meest specifieke routes bovenaan zet en de meer algemene routes onderaan, dan zou je in theorie altijd correct moeten renderen.

Dit ziet er dan ongeveer zo uit:

{% code title="App.js" %}
```javascript
...
import { Route, Switch } from 'react-router-dom';
...
// in de render functie van <App />
<Switch>
<Route path="/comments/:id" component={Comment} />
<Route path="/comments" render={
(props) => (
<CommentsList {...props} comments={this.state.comments} />
)
} />
<Route path="/" component={Home} />
</Switch>
```
{% endcode %}
=== "App.js"

```javascript
...
import { Route, Switch } from 'react-router-dom';
...
// in de render functie van <App />
<Switch>
<Route path="/comments/:id" component={Comment} />
<Route path="/comments" render={
(props) => (
<CommentsList {...props} comments={this.state.comments} />
)
} />
<Route path="/" component={Home} />
</Switch>
```

Moest je toch mismatches krijgen, kan je nog altijd gebruik maken van de exact prop. Deze zorgt ervoor dat de Route exact moet matchen met de path prop van een component om te activeren:

{% code title="App.js" %}
```javascript
<Route path="/" exact component={Home} />
```
{% endcode %}
=== "App.js"

```javascript
<Route path="/" exact component={Home} />
```

### Meer info

Meer informatie over het gebruik van de Router vind je op de volgende link:

{% embed url="https://reactrouter.com/web/guides/quick-start" %}
[:octicons-link-external-16: Reactrouter: Quick start](https://reactrouter.com/web/guides/quick-start){.md-button target="_blank"}

0 comments on commit 6c069ef

Please sign in to comment.