Slides and example code on the training React Fundamentals, Carfac, November 2020
- Repository with example code: https://github.com/PeterKassenaar/react-fundamentals
- Puntkomma's in JavaScript zijn OPTIONEEL. Dit heet
Automatic Semicolon Insertion (ASI)
. Lees er eventueel meer over op https://stackoverflow.com/questions/2846283/what-are-the-rules-for-javascripts-automatic-semicolon-insertion-asi en/of https://flaviocopes.com/javascript-automatic-semicolon-insertion/ - Over inheritance bij componenten: https://reactjs.org/docs/composition-vs-inheritance.html en/of https://thoughtspile.github.io/2018/11/05/react-extend-justified/
- React Developer Tools voor Chrome: https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en
- React Bootstrap, Bootstrap as optimized React Components: https://react-bootstrap.github.io/
- React: Composition vs. Inheritance: https://reactjs.org/docs/composition-vs-inheritance.html
- Adding
TypeScript
via Create-React-App: https://create-react-app.dev/docs/adding-typescript/ - Simple Solution:
PropTypes
: https://reactjs.org/docs/typechecking-with-proptypes.html - "Gebruik liever geen
index
als key": https://reactjs.org/docs/lists-and-keys.html - Vraag van Jan: "LESS gebruiken in React?": https://jasonwatmore.com/post/2020/02/10/react-how-to-add-global-css-less-styles-to-react-with-webpack
- Algemeen architectuur: How to organize a Large Scale Web application: https://www.sitepoint.com/organize-large-react-application/
- Enkel gebruikte CSS meebundelen en de rest verwijderen:
PurgeCSS
: https://purgecss.com/
Voorbeeld van een generieke service die de calls naar de API afhandelt (pseudo code):
import axios from 'axios'
// the API-URLs to get the data from
const url = 'https://restcountries.eu/rest/v2/all';
const detail_url = 'https://restcountries.eu/rest/v2/name';
export default new class CountryService{
// 'lokale API' vor deze service
getCountries(){
return axios.get(url);
}
deleteCountry(country){
//....
}
getSingleCountry(id){
//....
}
}
En in de component waar je dan de service wilt gebruiken, wordt deze geimporteerd:
import countryService from './services/CountryService'
...
componentDidMount(){
countryService.getCountries()
.then(response => {
this.setState({
isLoaded: true,
countries: response.data
})
})
}
- Lijst met veel beschikbare Public API's: https://github.com/public-apis/public-apis
- Opinie(s) over het navigeren vanuit code met de router.Via componenten of via
history.push()
? - https://ui.dev/react-router-v4-programmatically-navigate/
Bedankt voor jullie aanwezigheid en vragen tijdens de opleiding.
Veel succes met React in uw werk!
Peter.