# Installatie React packages *De volgende stappen zijn nodig voor toekomstige lessen.* ### Installatie React packages #### React Icons Om icoontjes in je app te laten zien. [https://react-icons.github.io/react-icons/](https://react-icons.github.io/react-icons/) Open project in VSC en open terminal. ``` npm install react-icons --save ``` ``` import { ICONNAME } from "react-icons/LIBNAME"; ... ``` Zoek een icon op de [website](https://react-icons.github.io/react-icons/). De eerste twee letters van de naam die onder het icoontje staat is de library naam en de rest is de naam van het icoontje. #### FiAlertCircleFiAlertCircleTailwind Tailwind is een CSS library, net zoiets als Bootstrap. Bootstrap dwingt echter een bepaalde structuur af. Over het algemeen herken je ene site dit is gemaakt met bootstrap meteen. Tailwind staat dichter bij CSS en dwingt niet een bepaalde structuur af. Tailwind staat als het ware wat dichter bij CSS, maar maakt het allemaal wel net iets gemakkelijker. Op de [web site van Tailwind](https://tailwindcss.com/docs) vind je heel veel voorbeelden en onder het menu layout vind je alle mogelijke layout opties. Open project in VSC en open terminal. ``` npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9 @tailwindcss/forms ``` Maak configuratie ``` npx tailwindcss init ``` Dit maakt de file *tailwind.config.js* in de projectfolder. Deze file passen we aan: ```JavaScript module.exports = { purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'], darkMode: false, // or 'media' or 'class' theme: { extend: {}, }, variants: { extend: {}, }, plugins: [ require('@tailwindcss/forms')], } ``` Deze config zorgt ervoor dat alleen de CSS die we gebruiken ook wordt toegevoegd. Vervang de gehele inhoud van de index.css door de volgende drie regels. ```CSS @tailwind base; @tailwind components; @tailwind utilities; ``` #### Craco React ondersteund geen post CSS. Post CSS laat JavaScript CSS styles aanpassen en wordt gebruikt door Tailwind. Hierom moeten we Craco installeren. ``` npm install @craco/craco ``` #### package.json (aanpassen) ```JavaScript ... "scripts": { "start": "craco start", "build": "craco build", "test": "craco test" }, ... ``` #### craco.config.js (nieuw maken in project folder) ```JavaScript // craco.config.js module.exports = { style: { postcss: { plugins: [ require('tailwindcss'), require('autoprefixer'), ], }, }, } ``` ### Testen Verander de App.js file nu in: ```JavaScript import { BiArchive } from "react-icons/bi" function App() { return (

Applicatie

); } export default App; ``` In JSX is het geen *class* maar *className* Verder zien we allemaal class namen, deze verwijzen naar de Tailwind library.
container mx-automaak een container 100% breed
mt-3top margin 0.75 rem (0.75 x standaard)
font-thinfont-weight: 100;
text-5xlfont-size: 3rem; line-height: 1;
inline-blockmaak in-line block (1 regel)
text-red-400rood 400 is normaal (meer is vetter en minder is transparant.
bron: [https://tailwindcss.com/docs](https://tailwindcss.com/docs) (gebruik search). ### React Icons [https://react-icons.github.io/react-icons/](https://react-icons.github.io/react-icons/) ### Start Dev Server ``` npm start ``` ### Build ``` npm run build ``` packager.json (root) ```JSON { "name": "les1", "version": "0.1.0", "private": true, "homepage": "http://www.softwaredeveloper.ovh/maxb/", ... ``` ### ReactNative (Voor mobile apps) ``` npx expo init ```