En komplet begyndervejledning til reaktion

Foto af Alexander Andrews på Unsplash

Jeg vil gerne vende tilbage til at skrive mere teknisk indhold. React er en af ​​mine foretrukne teknologier, så jeg troede, jeg ville oprette en React-introduktion! Dette indlæg kræver kendskab til HTML og JavaScript. Jeg er overbevist om, at du skal kende disse, før du går videre til biblioteker som React!

Hvad er React

React er et JavaScript-bibliotek bygget i 2013 af Facebook-udviklingsholdet. React ville gøre brugergrænseflader mere modulære (eller genanvendelige) og lettere at vedligeholde. Ifølge Reacts websted bruges det til at "opbygge indkapslede komponenter, der administrerer deres egen tilstand og derefter komponere dem til at lave komplekse brugergrænseflader."

Jeg vil bruge en masse Facebook-eksempler i hele dette indlæg, siden de skrev React i første omgang!

Kan du huske, da Facebook flyttede fra likes til reaktioner? I stedet for at kunne lide indlæg, kan du nu reagere med et hjerte, et smilefjes eller lignende til ethvert indlæg. Hvis disse reaktioner primært blev foretaget i HTML, ville det være en enorm mængde arbejde at ændre alle disse lide til reaktioner og for at sikre sig, at de fungerer.

Det er her React kommer ind. I stedet for at implementere "adskillelse af bekymringer", har vi en anden arkitektur i React. Denne arkitektur øger modulariteten baseret på en komponents struktur.

I dag holder vi CSS adskilt, men du kan endda gøre denne komponent specifik, hvis du vil!

React vs. Vanilla JavaScript

Når vi taler om “vanilla” JavaScript, taler vi normalt om at skrive JavaScript-kode, der ikke bruger yderligere biblioteker som JQuery, React, Angular eller Vue. Hvis du gerne vil læse mere om disse og hvad en ramme er, har jeg et indlæg om webrammer.

Et par hurtige noter, inden vi begynder

  • For at gøre denne tutorial lidt mere kortfattet, har nogle kodeeksempler ... før eller efter dem. Dette betyder, at vi udeladte nogle kode.
  • Jeg bruger Git diffs nogle steder for at vise kodelinjer, der vil ændre sig. Hvis du kopierer og passerer, skal du slette + i starten af ​​linjen.
  • Jeg har fulde CodePens med de afsluttede versioner af hvert afsnit - så du kan bruge dem til at spille indhentning!
  • Flere avancerede koncepter, der ikke er vigtige for selvstudiet, er i blokquotes. Dette er fakta, der er interessante!

Opsætning

Hvis du opretter et produktionsreaktapplikation, vil du bruge et build-værktøj som Webpack. Webpack bundter din kode, da React bruger nogle mønstre, der ikke fungerer som standard i browseren. Create React App er super nyttigt til disse formål, da det gør det meste af konfigurationen for dig!

For tiden bruger vi React CDN, som kun er til udviklingsformål! Vi bruger også Babel CDN, så vi kan bruge nogle ikke-standard JavaScript-funktioner (vi vil tale mere om det senere!).

Lad os komme til vores React-kode!

klasse HelloWorld udvider React.Component {
  render () {
    // Fortæller React, hvilken HTML-kode der skal gengives
    return 

Hello World

  }
}
// Fortæller React for at knytte HelloWorld-komponenten til 'root' HTML div
ReactDOM.render (, document.getElementById ("root"))

Det eneste, der sker, er, at "Hello World" vises som en H1 på siden!

Lad os gennemgå det, der foregår her.

Først bruger vi en ES6-klasse, der arver fra React.Component-klassen. Dette er et mønster, som vi vil bruge til de fleste af vores React-komponenter.

Dernæst har vi en metode i vores klasse - og dens en speciel metode kaldet render. React kigger efter render-metoden for at beslutte, hvad der skal gengives på siden! Navnet giver mening. Uanset hvad der returneres fra denne render-metode, vil den blive gengivet af den komponent.

I dette tilfælde returnerer vi en H1 med teksten "Hello World" - det er nøjagtigt hvad der normalt ville være i HTML-filen.

Endelig har vi:

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

Vi bruger ReactDOM-funktionaliteten til at knytte vores reaktionskomponent til DOM.

React bruger noget, der kaldes den virtuelle DOM, som er en virtuel repræsentation af DOM, som du normalt ville interagere med i Vanilla JavaScript eller JQuery. Denne reactDOM.render gør denne virtuelle DOM til den faktiske DOM. Bag kulisserne arbejder React meget for effektivt at redigere og gendanne DOM igen, når noget på grænsefladen skal ændres.

Vores komponent, , ligner et HTML-tag! Denne syntaks er en del af JSX, som er en udvidelse af JavaScript. Du kan ikke bruge det oprindeligt i browseren. Kan du huske, hvordan vi bruger Babel til vores JavaScript? Babel transpilerer (eller konverterer) vores JSX til almindelig JavaScript, så browseren kan forstå det.

JSX er faktisk valgfri i React, men du kan se den bruges i langt de fleste tilfælde!

Derefter bruger vi JavaScript's indbyggede dokument.getElementById til at få fat i vores rodelement, vi oprettede i vores HTML.

Alt i alt knytter vi vores HelloWorld-komponent til denne div, som vi oprettede i vores HTML-fil, i denne ReactDOM.render-erklæring.

Startkode

Okay - nu hvor vi har lavet en "Hello World", kan vi komme i gang med vores Facebook-komponent.

Først vil jeg have dig til at lege med denne demo. Vi arbejder med dette gennem resten af ​​tutorialen. Du er velkommen til at se på koden også, men bekymre dig ikke om ikke at forstå den! Det er hvad resten af ​​tutorial er til!

Lad os starte med "hård kodning" af HTML for widgeten:

Med noget tilføjet CSS ser det sådan ud:

Her er en Codepen med den fulde startkode.

Af hensyn til denne tutorial vil vi oprette fire komponenter: en statuskomponent, der vil være overordnet, en lignende komponent, der vil omfatte smagens logik, og kommentarkomponenten, der vil indeholde logikken til at skrive i en kommentar. Lignende-komponenten har også et barn LikeIcon, der vises eller skjules, når du skifter til lignende knap.

Komponentarkitektur

Lad os gå videre og opdele HTML-koden, som vi har skrevet i disse komponenter.

Vi starter med skallen på en komponent, og vi gengiver den også for at sikre, at den fungerer!

En interessant note om ovenstående er, at vi måtte ændre “klasse” -attributter til “className”. Klasse betyder allerede noget i JavaScript - det er til ES6-klasser! Nogle attributter navngives forskelligt i JSX end i HTML.

Vi kan også slette indholdet af vores HTML og kun efterlade et element med ID-roden - den overordnede "indhold" div er bare til styling!


  
    
  

Her er HTML, der vil gå i Status-komponenten. Bemærk, noget af den originale HTML er ikke der endnu - det vil gå ind i vores underkomponenter i stedet!

Lad os oprette en anden komponent, og så inkluderer vi den i vores Status-komponent.

klasse Kommentar udvider React.Component {
  render () {
    Vend tilbage (