De toenemende populariteit van applicaties met één pagina in de afgelopen jaren heeft geleid tot een instroom van JavaScript frameworks, waaronder Angular, React, Vue.js, Ember-de lijst gaat maar door. Hierdoor is het niet langer nodig om een DOM-bibliotheek, zoals jQuery, te gebruiken om webapps te bouwen.
Dit viel samen met de opkomst van CSS frameworks ontworpen om ontwikkelaars te helpen responsieve web apps te bouwen., Als je een frontend ontwikkelaar, je hebt bijna zeker gebruikt of op zijn minst gehoord over Bootstrap, Stichting, en Bulma, alle responsieve (mobile-first) CSS frameworks met robuuste functies en ingebouwde hulpprogramma ‘ s. Als React het meest gebruikte JavaScript-framework is voor het bouwen van webapplicaties, is Bootstrap het meest populaire CSS-framework, waarmee miljoenen websites op het internet worden aangedreven.,
in deze tutorial laten we je zien hoe je React en Bootstrap gebruikt, hoe je Bootstrap toevoegt aan een React app, hoe je React Bootstrap pakketten installeert zoals react-bootstrap (met voorbeelden), en tenslotte hoe je een React app maakt met Bootstrap.
als je net begonnen bent met deze frameworks, stel ik voor om door de officiële React en Bootstrap documentatie te skimmen. Ik zou je ook aanmoedigen om de uitgebreide video tutorial hieronder te bekijken voor een diepere duik.,
Toevoegen Bootstrap om te Reageren
De drie meest voorkomende manieren om toe te voegen Bootstrap naar je Reageren app zijn:
- Gebruik BootstrapCDN
- Importeren Bootstrap in Reageren als een afhankelijkheid
- Installeren Reageren Bootstrap pakket (zoals
bootstrap-reactofreactstrap)
met Behulp van de BootstrapCDN
BootstrapCDN is de makkelijkste manier om toe te voegen Bootstrap naar je Reageren app. Geen installaties of downloads vereist. Zet eenvoudig een <link> in de <head> sectie van uw app, zoals weergegeven in het volgende fragment.,
Als u geïnteresseerd bent in het gebruik van de JavaScript-componenten die met Bootstrap worden geleverd, moet u de volgende <script> tags aan het einde van uw pagina ‘ s plaatsen, vlak voor het sluiten </body> tag, om ze in te schakelen.
zoals je kunt zien, heeft Bootstrap 4 jQuery en Popper nodig.js voor zijn JavaScript componenten. In het bovenstaande fragment, we gebruikt jQuery ‘ s slanke versie, hoewel u kunt gebruik maken van de volledige versie ook.
voor uw React-app worden deze codefragmenten meestal toegevoegd aan de indexpagina van uw app., Als u create-react-app hebt gebruikt om uw app aan te maken, dan moet uw public/index.html pagina eruit zien als het volgende fragment:
nu kunt u de ingebouwde Bootstrap-klassen en JavaScript-componenten in uw React app-componenten gebruiken.
Bootstrap importeren als een afhankelijkheid
als u een build tool of een module bundler zoals webpack gebruikt, dan is dit de voorkeursoptie voor het toevoegen van Bootstrap aan uw React-toepassing. U moet Bootstrap installeren als een afhankelijkheid voor uw app.,
npm install bootstrap
of als u garen gebruikt:
yarn add bootstrap
zodra u Bootstrap hebt geïnstalleerd, neem het dan op in het JavaScript-bestand van uw app. Als u create-react-app gebruikt, moet dit uw src/index.js bestand zijn.
merk op dat we de Bootstrap minified CSS hebben geïmporteerd als de eerste afhankelijkheid. Hiermee kunnen we doorgaan met behulp van de ingebouwde Bootstrap klassen in onze React app componenten., Voordat u echter de JavaScript-componenten van Bootstrap in uw app kunt gebruiken, moet u jquery installeren en popper.js als ze nog niet zijn geïnstalleerd.
npm install jquery popper.js
vervolgens zult u aanvullende wijzigingen aanbrengen in het src/index.js bestand om de nieuwe afhankelijkheden toe te voegen zoals getoond in het volgende fragment.
Hier hebben we imports toegevoegd voor $ en Popper. We hebben ook geïmporteerd de Bootstrap JavaScript minified bundle bestand. Nu kunt u Bootstrap JavaScript componenten gebruiken in uw React app.,
Installeer een React Bootstrap-pakket
de derde manier om Bootstrap toe te voegen aan een React-app is door een pakket te gebruiken dat Bootstrap-componenten heeft herbouwd die zijn ontworpen om als React-componenten te werken. De twee meest populaire pakketten zijn:
react-bootstrapreactstrap
beide pakketten zijn goede keuzes voor het gebruik van Bootstrap met React apps, hoewel u niet noodzakelijk een van hen hoeft te gebruiken. Ze hebben zeer vergelijkbare kenmerken.,
met behulp van ingebouwde Bootstrap klassen en componenten
U kunt Bootstrap direct op elementen en componenten in uw React app gebruiken door de ingebouwde klassen toe te passen, net als elke andere klasse. Laten we bouwen van een eenvoudige thema switcher React component aan te tonen met behulp van Bootstrap klassen en componenten.,
zoals getoond in deze demo, gebruiken we een dropdown component beschikbaar in bootstrap om onze thema switcher te implementeren. We gebruiken ook de ingebouwde knopklassen om de grootte en kleur van de dropdown-knop in te stellen.
We zullen doorgaan met het schrijven van de code voor onze ThemeSwitcher component. Zorg ervoor dat u al een React-applicatie hebt ingesteld., Maak een nieuw bestand aan voor het component en voeg het volgende codefragment toe:
Hier hebben we een zeer eenvoudige theme switcher component gebouwd die gebruik maakt van Bootstrap ‘ s dropdown component en een paar ingebouwde klassen. U kunt meer informatie over het gebruik van Bootstrap dropdown hier.
eerst zetten we de status van het component op met een theme eigenschap en initialiseerden het naar null., Vervolgens definieerden we twee Click event handlers resetTheme() en chooseTheme() op de component klasse voor het kiezen van een thema en het resetten van het thema respectievelijk.
In de render() methode, maken we een split knop dropdown menu met drie thema ‘ s. namelijk: Primary, Danger, en Success. Elk menu-item is gekoppeld aan een klik event handler voor de juiste actie. Merk op hoe we theme.toLowerCase() gebruiken om de thema kleurklasse te krijgen voor zowel de dropdown knoppen als de tekst., We gebruiken standaard secondary als de themakleur als er geen thema is ingesteld.
in dit voorbeeld hebben we gezien hoe eenvoudig het is om Bootstrap ‘ s ingebouwde klassen en componenten te gebruiken in onze React app. Bekijk de Bootstrap documentatie voor meer informatie over de ingebouwde klassen en componenten.
react-bootstrap voorbeeld
nu zullen we onze thema-switcher opnieuw opbouwen met react-bootstrap. We zullen het opdrachtregelprogramma create-react-app gebruiken om onze app te maken. Zorg ervoor dat u het create-react-app gereedschap op uw machine hebt geïnstalleerd.,
Maak een nieuwe React-app met create-react-app als volgt:
create-react-app react-bootstrap-app
volgende, ga je gang en installeer de afhankelijkheden als volgt:
yarn add bootstrap@3 react-bootstrap
react-bootstrap huidige doelen Bootstrap v3. Er wordt echter actief gewerkt aan Bootstrap v4-ondersteuning.
Maak een nieuw bestand aan met de naam ThemeSwitcher.js in desrc map van uw project en plaats de volgende inhoud erin.
Hier hebben we geprobeerd ons eerste voorbeeld zoveel mogelijk na te bootsen met react-bootstrap., We importeren twee componenten uit hetreact-bootstrap pakket, namelijkSplitButton enMenuItem. Zie dereact-bootstrap Dropdown documentatie voor meer informatie.
eerst zetten we de status van het component op met een theme eigenschap en initialiseerden het naar null. Vervolgens definiëren we een chooseTheme() klik op event handler voor het kiezen van een thema of het resetten van het thema.
omdat we Bootstrap 3.3 gebruiken.,7, hebben we enkele containerstijlen gemaakt in derender() methode om ons te helpen horizontale en verticale centrering te bereiken.
merk op hoe we de knopgrootte specificeren op de SplitButton component met behulp van de bsSize prop. Merk ook op hoe we de themeClass doorgeven aan de bsStyle prop om dynamisch de kleur van de knop te veranderen op basis van het thema van de status.
We geven de themanaam door aan de eventKey prop van elke MenuItem component., We stellen ook deonSelect handler in opthis.chooseTheme(), die we eerder hebben gedefinieerd. DeMenuItem component geeft deeventKey en deevent zelf door aan deonSelect handler als volgt:
(eventKey: any, event: Object) => any
tenslotte, zullen we hetsrc/index.js bestand aanpassen om eruit te zien als het volgende fragment:
hier importeren we eerst Bootstrap ‘ s minified CSS bestanden. We importeren ook onze ThemeSwitcher component en renderen het naar de DOM.,
Als u de app nu uitvoert met het commando yarn start of npm start. Uw app moet starten op poort 3000 en moet eruit zien als de volgende demo:
react-bootstrap demo. reactstrap voorbeeld
Deze keer gaan we verder en herbouwen we onze thema-switcher met reactstrap., We zullen het opdrachtregelprogramma create-react-app gebruiken om onze app te maken. Zorg ervoor dat u het create-react-app gereedschap op uw machine hebt geïnstalleerd.
Maak een nieuwe React-app met create-react-app als volgt:
create-react-app reactstrap-app
Installeer de afhankelijkheden als volgt:
yarn add bootstrap reactstra
Maak een nieuw bestand met de naam ThemeSwitcher.js in de src map van uw project en zet de volgende inhoud erin:
Hier hebben we ons eerste voorbeeld herbouwd met reactstrap., We importeren een paar componenten uit reactstrap. Zie de Vervolgkeuzedocumentatie voor reactstrap voor meer informatie.
eerst zetten we de status van het component op met twee eigenschappen:
-
themeeigenschap geïnitialiseerd naarnull -
dropdownOpengeïnitialiseerd naarfalse. Deze eigenschap zal worden gebruikt in deButtonDropdowncomponent vanreactstrapom de schakelstatus van de dropdown te behouden.,
We definiëren ook eentoggleDropdown() methode om de open status van de dropdown te schakelen. Dit zal ook gebruikt worden in de ButtonDropdown component.reactstrap levert ook een ongecontroleerd onderdeel UncontrolledButtonDropdown dat de isOpen prop of de toggle handler prop niet vereist om te werken. In de meeste gevallen kan dit gebruikt worden in plaats van ButtonDropdown.
elk item in het vervolgkeuzemenu wordt weergegeven met behulp van de DropdownItem component., Merk op hoe we de knopgrootte specificeren op de DropdownToggle component met behulp van de size prop. Merk ook op hoe we de themeClass doorgeven aan de color prop op zowel de Button en DropdownToggle componenten om dynamisch de kleur van de knop te veranderen op basis van het thema van de status.
We stellen ook de onClick handler in op elke DropdownItem net als voorheen, met behulp van de chooseTheme() en resetTheme() handlers die we eerder gedefinieerd hebben.,
ten slotte zullen we het src/index.js bestand aanpassen om eruit te zien als het volgende fragment:
hier importeren we eerst het Bootstrap minified CSS bestand. We importeren ook onze ThemeSwitcher component en renderen het naar de DOM.
Als u de app nu uitvoert met het commando yarn start of npm start., Je app moet starten op poort 3000 en moet eruit zien als de volgende demo:
het Maken van een Reageren app bij het Opstarten
Laten we druk deze een beetje verder om een app te maken met wat meer details. We zullen proberen zoveel mogelijk Bootstrap klassen en componenten te gebruiken. We zullen ook reactstrap gebruiken voor het integreren van Bootstrap met React, omdat het Bootstrap 4 ondersteunt.,
we gebruiken het opdrachtregelprogramma create-react-app om onze app te maken. Zorg ervoor dat u het create-react-app gereedschap op uw machine hebt geïnstalleerd. Hier is een screenshot van wat we gaan maken.,
het Maken van een nieuwe Reageren app met create-react-app als volgt:
create-react-app sample-app
Vervolgens ga je gang en installeren van de afhankelijkheden als volgt:
yarn add axios bootstrap reactstrap
Merk hier dat wij installeren axios als een afhankelijkheid. Axios is een belofte-gebaseerde HTTP-client voor de browser en Node.js. Het zal ons in staat stellen om berichten van de BaconIpsum JSON API te halen.,
Maak een kleine wijziging in het src/index.js bestand om het Bootstrap minified CSS bestand op te nemen. Het lijkt op het volgende fragment:
Maak een nieuwe map aan met de naam components in de src map van uw project. Maak een nieuw bestand aan, Header.js, in de zojuist aangemaakte components map met de volgende inhoud:
het onderdeel dat we zojuist in dit fragment hebben aangemaakt is het Header component dat het navigatiemenu bevat., Vervolgens maken we een nieuw bestand met de naam SideCard.js in de components directory met de volgende inhoud:
maak een nieuw bestand met de naam Post.js in de components map en voeg de volgende code fragment uit:
Hier hebben we een Post component dat maakt een bericht op de pagina. We initialiseren de status van het component met een post eigenschap ingesteld op null., Wanneer de component wordt aangekoppeld, gebruiken we axios om een willekeurige post van vier alinea ‘ s van de BaconIpsum JSON API op te halen en de post eigenschap in de status bij te werken.
ten slotte, Wijzig het src/App.js bestand om eruit te zien als het volgende fragment:
Hier nemen we gewoon de Header, SideCard, en Post componenten in de App component. Merk op hoe we een paar responsieve utility classes van Bootstrap gebruiken om onze app aan te passen aan verschillende schermformaten.,
Als u de app nu uitvoert met het commando yarn start of npm start, moet uw app starten op poort 3000 en er precies uitzien als de schermafbeelding die we eerder zagen.
conclusie
In deze tutorial hebben we een paar verschillende manieren onderzocht waarop we Bootstrap kunnen integreren met onze React apps. We hebben ook gezien hoe we twee van de meest populaire React Bootstrap bibliotheken kunnen gebruiken, namelijk react-bootstrap en reactstrap.,
we hebben slechts een paar Bootstrap componenten gebruikt in deze tutorial, zoals alert, badge, dropdown, navbar, NAV, form, button, card, etc. Er is nog een paar Bootstrap componenten waarmee je kunt experimenteren, zoals tabellen, modals, tooltips, carrousel, jumbotron, paginering, tabbladen, enz.
u kunt de documentatie van de pakketten die we in deze tutorial hebben gebruikt controleren om meer manieren te vinden waarop ze kunnen worden gebruikt. De broncode voor alle demo-apps in deze tutorial is te vinden op GitHub.,
volledige zichtbaarheid in productie React apps
Debugging React applicaties kunnen moeilijk zijn, vooral wanneer gebruikers problemen ondervinden die moeilijk te reproduceren zijn. Als je geà nteresseerd bent in het monitoren en volgen van Redux state, automatisch JavaScript-fouten opduiken, en het bijhouden van langzame netwerkverzoeken en de laadtijd van componenten, probeer LogRocket. 
LogRocket is als een DVR voor web apps, die letterlijk alles opneemt wat er gebeurt op uw React app., In plaats van te raden waarom problemen zich voordoen, kunt u aggregeren en rapporteren in welke staat uw aanvraag zich bevond toen een probleem zich voordeed. LogRocket controleert ook de prestaties van uw app, rapportage met statistieken zoals client CPU belasting, client geheugengebruik, en meer.
Het logrocket Redux middleware pakket voegt een extra laag zichtbaarheid toe aan uw gebruikerssessies. LogRocket logt alle acties en staat van uw Redux stores.
moderniseren hoe u debuggen uw React apps-start gratis monitoring.