Share
React is een JavaScript-bibliotheek voor het bouwen van gebruikersinterfaces (UI). Het wordt onderhouden en ontwikkeld door Facebook en is een van de meest populaire tools voor het maken van web-apps vandaag.
Het heeft echter een beetje de reputatie dat het niet erg gebruiksvriendelijk is om een React-app in te stellen, vooral voor beginners. Het probleem komt voort uit het moment waarop React voor het eerst populair werd, en de standaardmethode voor het maken van een React-app betrof complexe handmatige configuratie van een hele reeks setup-bestanden.
Veel tutorials bedoeld om beginners te helpen aan de slag met React hebben verschillende benaderingen en tools geïntroduceerd om een werkende app in te stellen. Zelfs met subtiele verschillen tussen voorgestelde bouwmethoden, was verwarring onvermijdelijk.
Om met succes een React-app via handmatige configuratie in te stellen, is een goed begrip van meerdere verschillende technologieën vereist.
Deze flexibiliteit bij het instellen is eigenlijk geweldig. U hebt de volledige vrijheid om de specifieke hulpmiddelen te kiezen die u wilt gebruiken om uw React-app te bouwen en deze precies zo in te stellen als nodig is.
Als u eenmaal vertrouwd bent met deze tools, heeft u het vertrouwen om ze volledig te gebruiken en uitgebreide complexe apps te maken. Tot die tijd blijft er nog steeds een toegangsbarrière voor veel ontwikkelaars die niet per se ervaring hebben met de opdrachtregelprogramma's die nodig zijn om React-apps te maken.
Om deze frustratie te helpen voorkomen, richt deze zelfstudiereeks zich op verschillende methoden voor het instellen van React-apps. We beginnen met de meest elementaire aanpak en bouwen vervolgens verder aan complexere opstellingen. Laten we de boel afschudden, door meer in detail uit te leggen welke soorten React-instellingen we zullen behandelen.
Aan het einde van deze zelfstudiereeks kun je React-apps op vier manieren instellen:
De eerste methode laat zien hoe je een online code-editor zoals CodePen kunt gebruiken om zeer snel een React-app in te stellen. Met deze methode codeert u uw eerste app letterlijk in seconden!
Daarna gaan we verder met het opzetten van React in een lokale ontwikkelomgeving, beginnend met het rechtstreeks toevoegen van scripts aan een HTML-bestand zonder enige vormingshulpmiddelen. De volgende twee instellingsmethoden zijn gericht op hoe u een standaard React-app in uw dagelijkse ontwikkeling zou opzetten.
Zoals je zult zien, maakt het gebruik van de create-react-app tool het zeer eenvoudig om React-apps te laten draaien met slechts één enkele opdracht! Tot slot bespreken we hoe je een React-app via de commandoregel volledig vanuit het niets kunt opzetten, de old-schoolmanier.
Elke instellingsmethode heeft zijn plaats en er is geen enkele 'betere' benadering, alleen alternatieven die afhankelijk zijn van uw behoeften.
React is een fantastische bibliotheek om webapps mee te bouwen, en het is ook erg leuk! Laten we nu eens kijken naar de vereisten voor de zelfstudie om ervoor te zorgen dat u op de hoogte bent.
De eenvoudigste methode voor het instellen van een React-app vereist niets meer dan een internetverbinding. Naarmate we echter verdergaan met complexere instellingen, zullen we een volledig nieuwe React-app opzetten. Daarom wordt enige kennis van de volgende onderwerpen aanbevolen.
Windows, macOS en Linux bieden allemaal toegang tot opdrachtregelprogramma's. Deze worden veel gebruikt in moderne webontwikkeling voor het snel en efficiënt uitvoeren van complexe taken. Als u geen ervaring hebt met het werken met de opdrachtregel om bewerkingen uit te voeren, zoals het beheren van bestanden / mappen, het installeren van hulpprogramma's, het uitvoeren van scripts, enzovoort, dan is het de moeite waard om op zijn minst de basis te leren.
Als je al enige tijd webontwikkeling hebt gedaan, is de kans groot dat je in ieder geval hebt gehoord van Node.js en npm. Node.js is oorspronkelijk gemaakt om JavaScript op de server uit te voeren, maar wordt nu ook veel gebruikt voor het ontwikkelen van web-apps, het vereenvoudigen en automatiseren van veelvoorkomende taken, allemaal onder één omgeving.
Er zijn letterlijk honderdduizenden Node.js-modules beschikbaar en npm werd geïntroduceerd als een toegewijde pakketbeheerder om te helpen bij het installeren, organiseren en beheren van alle verschillende modules in uw webapp. Omdat npm is gebundeld met Node.js, hoef je alleen maar de laatste versie van Node.js op je systeem te installeren om het via je opdrachtregel beschikbaar te maken.
Een redelijk niveau van JavaScript is vereist om React-apps in te stellen en te ontwikkelen. Anders zul je op zeker moment worstelen met het maken van React-apps van elke diepte of complexiteit. Dit omvat enkele functies van ES6, zoals pijlfuncties, klassen en modules. Ik raad aan om zo nodig je JavaScript-vaardigheden te verbeteren voordat je een React-app probeert te ontwikkelen.
Deze tutorialserie richt zich op het instellen van React-apps in plaats van het ontwikkelen ervan, en dus zullen we niet te diep in React-specifieke onderwerpen duiken, zoals componenten, rekwisieten en staat. Het is echter een goed idee om enige basiskennis te hebben van wat deze zijn, dus in de volgende sectie zullen we de basisfuncties van React bespreken en onderzoeken hoe alle onderdelen bij elkaar passen om een werkende app te vormen.
Voordat we ingaan op onze eerste set-upmethode, laten we een korte rondleiding door React zelf maken.
In de kern zijn er drie fundamentele functies van React die de meeste apps omvatten. Dit zijn:
Dit zijn de belangrijkste functies die u moet beheersen om effectieve React-apps te schrijven. Als je eenmaal zover bent, ben je goed voorbereid om veel dieper in React te duiken en complexere apps te ontwikkelen.
U zult aangenaam verrast zijn om te merken dat componenten, rekwisieten en staat van React niet zo moeilijk zijn om uw hoofd rond te krijgen. Mijn persoonlijke ervaring was dat het React-instellingsproces moeilijker was dan leren Reageren zelf!
De bouwstenen van een React-app zijn componenten. Zie ze als herbruikbare codeblokken die markup, gedrag en stijlen inkapselen. Ze kunnen ook in elkaar worden genest, waardoor ze zeer herbruikbaar zijn. U hebt bijvoorbeeld een
Om constructiecomponenten eenvoudiger te maken, is JSX gemaakt om componenten een HTML-achtige structuur te geven. Als u bekend bent met HTML of XML, bent u meteen thuis met JSX om componenten te bouwen. Het is vermeldenswaard dat je helemaal geen JSX hoeft te gebruiken in React, maar het is nu de geaccepteerde standaardmanier om componenten te definiëren.
Met rekwisieten kunt u informatie tussen componenten doorgeven. En in React kan informatie alleen worden doorgegeven via rekwisieten van bovenliggende componenten naar onderliggende componenten.
Als u ervoor kiest om JSX in uw componentdefinities te gebruiken (en dat raad ik u ten zeerste aan), dan is het definiëren van attributen op een component opmerkelijk vergelijkbaar met het toevoegen van HTML-kenmerken. Dit is een van de redenen waarom JSX zo populair is! Het kunnen gebruiken van HTML-achtige syntaxis voor React-componenten en rekwisieten maakt het heel gemakkelijk om snel je app te scaffolden.
Laten we de onze eens nader bekijken
Ten eerste, hier is de
class BookIndex breidt React.Component uit render () return ()Lijst met alle boeken
Vervolgens in elk
class Book extends React.Component render () retourneren ()This.props.title
Auteur: this.props.author
Gepubliceerd: this.props.published
Als de bovenstaande syntaxis voor het maken van React-componenten er vreemd uitziet, maak je geen zorgen, het is vrij eenvoudig. Een ES6-klasse breidt de klasse van de basiscomponenten uit en vervolgens verwerkt een (vereiste) weergavemethode de uitvoer van de component.
Staat stelt ons in staat om alle gegevens in een React-app bij te houden. We moeten in staat zijn om de gebruikersinterface bij te werken wanneer iets verandert, en de staat behandelt dit voor ons. Wanneer de status is gewijzigd, is React slim genoeg om te weten welke delen van uw app moeten worden bijgewerkt. Dit maakt React erg snel omdat alleen de delen die zijn gewijzigd worden bijgewerkt.
Staat wordt meestal toegepast op de component op het hoogste niveau in uw React-app, zodat deze beschikbaar is voor elke onderliggende component om zo nodig staatsgegevens te gebruiken.
Dat is het voor onze wervelwindtoer van React. Het is absoluut niet allesomvattend, en er is nog veel meer dat je moet leren voordat je volwaardige complexe apps kunt maken, maar het begrijpen van componenten, rekwisieten en staat geeft je een solide voorsprong.
In deze tutorial hebben we de basis gelegd voor het leren opzetten van een React-omgeving. De rest van deze tutorialserie richt zich op de specifieke methoden die hiervoor nodig zijn. We zullen instellingsmethoden behandelen, variërend van zeer eenvoudige tot meer complexe methoden die handmatige configuratie vereisen.
In de volgende tutorial zullen we beginnen met het gebruik van CodePen, een online code-editor, om met enkele muisklikken een React-app in te stellen. Dit is veruit de eenvoudigste en snelste manier om codering in React te krijgen!
Accentsconagua