Een complete beginnershandleiding voor reageren

Foto door Alexander Andrews op Unsplash

Ik wil teruggaan naar het schrijven van meer technische inhoud. React is een van mijn favoriete technologieën, dus ik dacht dat ik een React-intro zou maken! Voor dit bericht is kennis van HTML en JavaScript vereist. Ik ben van mening dat je deze moet weten voordat je naar bibliotheken zoals React gaat!

Wat is reageren

React is een JavaScript-bibliotheek die in 2013 is gebouwd door het Facebook-ontwikkelingsteam. React wilde gebruikersinterfaces modulair (of herbruikbaar) maken en gemakkelijker te onderhouden. Volgens de website van React wordt het gebruikt om "ingekapselde componenten te bouwen die hun eigen status beheren en vervolgens samenstellen om complexe UI's te maken."

Ik ga in dit bericht veel Facebook-voorbeelden gebruiken, omdat ze React in de eerste plaats schreven!

Weet je nog toen Facebook overstapte van likes naar reacties? In plaats van berichten leuk te vinden, kun je nu reageren met een hart, of een smiley of iets dergelijks op een bericht. Als die reacties voornamelijk in HTML zouden worden gedaan, zou het enorm veel werk zijn om al die reacties leuk te vinden en ervoor te zorgen dat ze werken.

Dit is waar React van pas komt. In plaats van 'scheiding van zorgen' te implementeren, hebben we een andere architectuur in React. Deze architectuur verhoogt de modulariteit op basis van de structuur van een component.

Vandaag houden we de CSS gescheiden, maar je kunt die component zelfs specifiek maken als je wilt!

Reageren versus vanille JavaScript

Als we het hebben over 'vanille' JavaScript, hebben we het normaal gesproken over het schrijven van JavaScript-code die geen extra bibliotheken zoals JQuery, React, Angular of Vue gebruikt. Als je daar meer over wilt lezen en wat een framework is, heb ik een post over web frameworks.

Een paar snelle aantekeningen voordat we beginnen

  • Om deze tutorial een beetje beknopter te maken, hebben enkele codevoorbeelden ... ervoor of erna. Dit betekent dat we wat code hebben weggelaten.
  • Ik gebruik Git diffs op sommige plaatsen om coderegels weer te geven die zullen veranderen. Als u kopieert en plakt, moet u de + aan het begin van de regel verwijderen.
  • Ik heb volledige CodePens met de voltooide versies van elke sectie - dus je kunt die gebruiken om inhalen te spelen!
  • Meer geavanceerde concepten die niet essentieel zijn voor de zelfstudie staan ​​in blockquotes. Dit zijn feiten die interessant zijn!

Opgericht

Als u een productie-React-applicatie maakt, wilt u een build-tool zoals Webpack gebruiken. Webpack bundelt uw code omdat React sommige patronen gebruikt die standaard niet werken in de browser. Create React App is super handig voor deze doeleinden omdat het de meeste configuratie voor u doet!

Voor nu zullen we de React CDN gebruiken, die alleen voor ontwikkelingsdoeleinden is! We zullen ook de Babel CDN gebruiken zodat we een aantal niet-standaard JavaScript-functies kunnen gebruiken (daar zullen we later meer over vertellen!).

Laten we nu naar onze React-code gaan!

klasse HelloWorld breidt React.Component {uit
  render () {
    // Vertelt Reageren welke HTML-code moet worden weergegeven
    retourneer 

Hallo wereld

  }
}
// Vertelt reageren om de HelloWorld-component te koppelen aan de 'root' HTML div
ReactDOM.render (, document.getElementById ("root"))

Het enige dat gebeurt is dat "Hallo wereld" wordt weergegeven als een H1 op de pagina!

Laten we doornemen wat hier aan de hand is.

Eerst gebruiken we een ES6-klasse die erft van de klasse React.Component. Dit is een patroon dat we zullen gebruiken voor de meeste van onze React-componenten.

Vervolgens hebben we een methode in onze klasse - en het is een speciale methode die render wordt genoemd. React zoekt naar de rendermethode om te beslissen wat op de pagina wordt weergegeven! De naam is logisch. Wat er ook wordt geretourneerd uit die rendermethode, wordt weergegeven door die component.

In dit geval retourneren we een H1 met de tekst "Hallo wereld" - dit is precies wat normaal in het HTML-bestand zou zijn.

Tot slot hebben we:

ReactDOM.render (, document.getElementById ("root"))

We gebruiken de ReactDOM-functionaliteit om onze react-component aan de DOM te koppelen.

React maakt gebruik van iets dat de virtuele DOM wordt genoemd. Dit is een virtuele weergave van de DOM waarmee u normaal gesproken zou communiceren in Vanilla JavaScript of JQuery. Deze reactDOM.render geeft deze virtuele DOM terug naar de werkelijke DOM. Achter de schermen doet React veel werk om de DOM efficiënt te bewerken en opnieuw te renderen wanneer er iets op de interface moet veranderen.

Onze component, , ziet eruit als een HTML-tag! Deze syntaxis is onderdeel van JSX, een extensie van JavaScript. Je kunt het niet native gebruiken in de browser. Weet je nog hoe we Babel gebruiken voor ons JavaScript? Babel zal onze JSX transpileren (of converteren) in regulier JavaScript zodat de browser het kan begrijpen.

JSX is eigenlijk optioneel in React, maar je zult het in de meeste gevallen zien worden gebruikt!

Vervolgens gebruiken we het ingebouwde document van JavaScript.getElementById om ons rootelement te pakken dat we in onze HTML hebben gemaakt.

Al met al hechten we in deze ReactDOM.render-instructie onze component HelloWorld aan onze div die we in ons HTML-bestand hebben gemaakt.

Starter Code

Oké - nu we een 'Hallo wereld' hebben gedaan, kunnen we aan de slag met onze Facebook-component.

Eerst wil ik dat je met deze demo speelt. We zullen hier de rest van de tutorial aan werken. Kijk gerust naar de code, maar maak je geen zorgen over het niet begrijpen! Daar is de rest van de tutorial voor!

Laten we beginnen met het 'hard coderen' van de HTML voor de widget:

Met enkele toegevoegde CSS ziet dit er als volgt uit:

Hier is een codepen met de volledige startcode.

Ter wille van deze zelfstudie maken we vier componenten: een statuscomponent die het bovenliggende element zal zijn, een soortgelijke component die de logica van de voorkeur bevat en de component Commentaar die de logica bevat voor het typen van een opmerking. De Like-component heeft ook een onderliggende LikeIcon die wordt weergegeven of verborgen wanneer u de like-knop omschakelt.

Componentenarchitectuur

Laten we doorgaan en de HTML-code die we hebben geschreven in die componenten verdelen.

We beginnen met de shell van een component en we geven deze ook weer om te controleren of deze werkt!

Een interessante opmerking over het bovenstaande is dat we "class" -attributen moesten wijzigen in "className". Klasse betekent al iets in JavaScript - het is voor ES6-klassen! Sommige attributen hebben een andere naam in JSX dan in HTML.

We kunnen ook de inhoud van onze HTML verwijderen, waardoor er alleen een element met de ID-root overblijft - de bovenliggende div-inhoud is alleen voor het stylen!


  
    
  

Hier is de HTML die in de statuscomponent gaat staan. Merk op dat een deel van de originele HTML er nog niet is - het gaat in plaats daarvan naar onze subcomponenten!

Laten we een tweede component maken en deze opnemen in onze statuscomponent.

klasse Reactie verlengt React.Component {
  render () {
    terug (