Kom igång med React i 10 enkla steg

Vi tycker att styrkan i React är att det är ett väldigt enkelt koncept att förstå men även väldigt kraftfullt när man väl satt sig in i grunderna. Nedan finner du ett par enkla och konkreta punkter för hur React fungerar och hur du bör resonera för att komma igång med React.

1. Hur funkar React?

Du visar upp data på en sida
En användare interagerar med element på sidan
Data ändras
Sidan behöver uppdateras

React underlättar ovanstående steg för dig så att du kan fokusera på att bygga interaktiva och intuitiva gränssnitt.

2. Hur bör man tänka i React?

Dela upp ditt gränssnitt i olika komponenter
Varje komponent är ansvarig för att rita upp sitt innehåll i förhållande till intern och extern data som är tillgänglig för komponenten.
Skapa ett komponentträd för att rita upp ett komplett gränssnitt

3. Komponenter är funktioner som returnerar JSX

JSX ser ut som HTML, men är egentligen JavaScript!
När du skriver JSX, kan du använda dig utav Javascript genom att wrappa det i {}
Många tycker att det känns konstigt att blanda kod i HTML men JSX är en av de saker som gör att React blir intuitivt och flexibelt

4. Komponenter kan kombineras

När du definierat en funktionsbaserad komponent kan du använda den tillsammans med andra komponenter antingen som ett syskonkomponent eller en barnkomponent. En komponent som du skapar kan skräddarsys efter just dina behov.

Genom att göra detta kan du skapa en trädstruktur av komponenter som definierar ett komplett gränssnitt som skapar din sida eller applikation.

Förälder/barn hierarki

I nedanstående exempel så är FormWrapper-komponenten föräldra-komponent och FormInput-komponenten barn-komponent. Denna uppställning gör det möjligt att t ex hålla state i föräldra-komponenten.

Javascript// components/FormInput.jsx
import React from "react";

const FormInput = props => {
	return <div className="form-group">
    <label for={props.fieldName}>Password</label>
		<input type={props.fieldType || "text"} className="form-control" onChange={props.handleChange} />
	</div>
}

export default FormInput;


// components/FormWrapper.jsx
const FormWrapper = props => {
	return <form>
		{props.children}
	</form>
}

export default FormWrapper;


// pages/contact.jsx
import React from "react";

import FormWrapper from "../components/FormWrapper";
import FormInput from "../components/FormInput";

const ContactPage = props => {
	return <div className="">
		<h1>Contact Us</h1>
	  <FormWrapper>
		  <FormInput fieldName="firstName" />
			<FormInput fieldName="lastName" />
		</FormWrapper>
	</div>
}

export default ContactPage;

5. Komponenter kommunicerar via "props"

Data som skickas vidare utifrån en komponent kallas "props" och kommer från engelskans "properties".

Dessa så kallade "props" skickas ner från en "parent component" till en eller flera "child component(s)" med hjälp av så kallade JSX attribut.

Javascript// JSX
import Greeting from "./components/Greeting";

<Greeting name="Hans" />

// components/Greeting.jsx
import React from "react";

const Greeting = props => {
	return <div>
		<p>Hello {props.name}</p>
	</div>
}

export default Greeting;

När man skickar in props till en funktions komponent så blir denna data tillgänglig hos barn-komponenten via det första argumentet i funktionsanropet.

Javascript// Some other component higher up...
import GreetingWithAge from "./components/GreetingWithAge";

<Greeting name="Hans" age="33" />

// components/GreetingWithAge.jsx
const GreetingWithAge = props => {
	return <div>
		<p>Hello {props.name}, You are {props.age} years old!</p>
	</div>
}

export default GreetingWithAge;

Ovanstående exempel kan även skrivas som en klassbaserad komponent

Den klassbaserade komponenten är överflödig i ovanstående exempel då den egentligen inte behöver vara klassbaserad. I detta fall så är den funktionsbaserade komponenten tillräcklig och mer koncis. Syftet med exemplet ovan är till för att illustrera hur samma funktionalitet kan uppnås.

6. Komponenter håller data i "state"

Data som lagras och uppdateras internt i en komponent kallas för state.

I en funktionsbaseradkomponent så definieras state med hjälp av funktionen useState som är en så kallad Hook. I useState-fallet så returneras data samt en funktion för att uppdatera/ändra state.

OBSERVERA: Sätt aldrig state genom att ändra state-objektet direkt utan du måste använda dig utav den så kallade setState-metoden. Detta är till för att trigga olika events som React använder sig utav för att förstå när den skall rendera om en komponent.

7. Komponenten renderas på nytt när data ändras

När state eller props uppdateras, så kommer React att exekvera render()-metoden i en komponent och därmed så kommer komponenten att ritas om automatiskt i din webbläsare.

Detta är något som React sköter helt automagiskt åt dig så att du slipper tänka på detta! Du behöver i princip aldrig tänka på att peta i DOM-objektet, något som tyvärr var väldigt vanligt i jQuery och andra äldre ramverk.

Det är viktigt att förhålla sig till React genom denna kedja och inte försöka uppfinna hjulet på nytt. Om du vill ändra i DOMen själv så gör du något fel i 99 av 100 fall när du använder React.

8. Loopa genom listor och rendera komponenter

Du kan enkelt generera listor av komponenter genom att använda array.map()
För varje iteration så returnerar du en ny komponent
Skicka med en unik key parameter för varje element i listan för att säkerställa bra prestanda. React kommer att skrika på dig ifall du inte gör detta.

9. Styla dina komponenter

Det finns två sätt att styla dina komponenter i React:

Sätt class parametern med hjälp av className och använd vanliga CSS-klasser från din stylesheet
Sätt inline styling med style={{...}} argumentet i deklarationen av ditt JSX-element. Tänk på att du behöver använda dig utav camelCase nycklar eftersom vi är Javascript-världen. React tar emot dessa nycklar och gör om dem så att de renderas som vanlig CSS som din webbläsare kan tyda.

10. Hämta data och uppdatera state

Du kan köra Async funktionalitet och så kallade "side effects" innanför useEffect .

I nedanstående exempel så hämtar vi data med hjälp av en Hook som heter useEffect. Denna Hook gör samma sak som lifecycle-metoderna componentDidMount / componentDidUpdate

Vi kallar det för "side effect" eftersom detta är en biverkning av något annat, t ex att komponenten har renderats i DOMen eller att komponenten uppdaterats av något skäl.

Javascriptimport React, { useState, useEffect } from 'react';

const UserProfile = props => {
  const [user, setUser] = useState(null);

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
		fetch('https://api.example.com/api/users' + props.id)
			.then(response => response.json())
			.then(data => setUser(data))
  }, [props.id]);

  return (
    <div>
      <p>Hello {user.firstName}</p>
    </div>
  );
}

Ovanstående exempel är mer eller mindre grunderna i React. Du kan i princip bygga en välfungerande applikation med variationer av dessa tio principer.