Lær at reagere på 5 minutter - En React.js-tutorial til begyndere

Denne tutorial giver dig en grundlæggende forståelse af React ved at opbygge en meget  enkel applikation. Jeg vil udelade alt, hvad jeg ikke synes er kernen.

Og så hvis det gnister din interesse, og du vil lære mere, kan du tjekke vores gratis React-kursus på Scrimba.

Men lige nu, lad os fokusere på det grundlæggende!

Opsætningen

Når du kommer i gang med React, skal du bruge den enkleste mulige opsætning: en HTML-fil, der importerer bibliotekerne Reactog ReactDOMbibliotekerne ved hjælp af script-tags.

Det ser sådan ud:

 /* ADD REACT CODE HERE */    

Vi har også importeret Babel, da React bruger noget kaldet JSX til at skrive markup. Vi bliver nødt til at omdanne JSX til almindelig JavaScript, så browseren kan forstå det.

Der er mere to ting, jeg vil have dig til at lægge mærke til:

  1. Den med id for #root. Dette er indgangsstedet for vores app. Det er her hele vores app vil bo.
  2. Den tag i kroppen. Det er her, vi skriver vores React-kode.

Hvis du vil eksperimentere med koden, skal du tjekke denne Scrimba-legeplads.

Komponenter

Alt i React er en komponent, og disse tager normalt form af JavaScript-klasser. Du opretter en komponent ved at udvide React-Componentklassen. Lad os oprette en komponent kaldet Hello:

class Hello extends React.Component { render() { return 

Hello world!

; } }

Du definerer derefter metoderne til komponenten. I vores eksempel har vi kun en metode, og den hedder render().

Inde render()vil du returnere en beskrivelse af, hvad du vil have, at React tegner på siden. I ovenstående tilfælde ønsker vi simpelthen, at det skal vise et h1tag med teksten Hello world! inde i det.

For at få vores lille applikation til at blive gengivet på skærmen skal vi også bruge ReactDOM.render():

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

Så det er her, vi forbinder vores Hellokomponent med startpunktet for appen ( ).

Så vi siger simpelthen: Hej Reager! Gør Hej- komponenten inde i DOM-noden med et rod- id !

Det resulterer i følgende:

HTML'ish-syntaksen, vi lige har set på (

og ) er den JSX-kode, jeg nævnte tidligere. Det er faktisk ikke HTML, det er meget mere kraftfuldt. Selvom det, du skriver der, ender som HTML-tags i DOM.

Det næste trin er at få vores app til at håndtere data.

Håndtering af data

Der er to typer data i React: rekvisitter og tilstand . Forskellen mellem de to er lidt vanskelig at forstå i starten, så rolig, hvis du finder det lidt forvirrende. Det bliver lettere, når du begynder at arbejde med dem.

Hovedforskellen er, at staten er privat og kan ændres fra selve komponenten. Rekvisitter er eksterne og styres ikke af selve komponenten. Det sendes ned fra komponenter højere op i hierarkiet, som også styrer dataene.

En komponent kan ændre sin interne tilstand direkte. Det kan ikke ændre sine rekvisitter direkte.

Lad os se nærmere på rekvisitterne først.

Rekvisitter

Vores Hellokomponent er helt statisk. Det gengiver den samme besked uanset hvad. Imidlertid er en stor del af React genanvendelighed, hvilket betyder evnen til at skrive en komponent en gang og derefter genbruge den i forskellige brugssager. For eksempel for at vise forskellige meddelelser.

For at opnå denne type genanvendelighed tilføjer vi rekvisitter. Sådan overfører du rekvisitter til en komponent:

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

Denne prop kaldes messageog har værdien "min ven". Vi kan få adgang til denne prop inde i Hello-komponenten ved at referere this.props.messagesådan:

class Hello extends React.Component { render() { return 

Hello {this.props.message}!

; } }

Som et resultat gengives dette på skærmen:

Årsagen til, at vi skriver {this.props.message}med krøllede seler, er fordi vi skal fortælle JSX, at vi vil tilføje et JavaScript-udtryk. Dette kaldes undslippe .

So now we have a reusable component which can render whatever message we want on the page. Woohoo!

However, what if we want the component to be able to change its own data? Then we have to use state instead!

State

The other way of storing data in React is in the component’s state. And unlike props — which can’t be changed directly by the component — the state can.

So if you want the data in your app to change — for example, based on user interactions — it must be stored in a component’s state somewhere in the app.

Initializing state

To initialize the state, simply set this.state  in the constructor() method of the class. Our state is an object which in our case only has one key called message.

class Hello extends React.Component { constructor(){ super(); this.state = { message: "my friend (from state)!" }; } render() { return 

Hello {this.state.message}!

; } }

Before we set the state, we have to call super() in the constructor. This is because this is uninitialized before super() has been called.

Changing the state

To modify the state, simply call this.setState(), passing in the new state object as the argument. We’ll do this inside a method which we’ll call updateMessage.

class Hello extends React.Component { constructor(){ super(); this.state = { message: "my friend (from state)!" }; this.updateMessage = this.updateMessage.bind(this); } updateMessage() { this.setState({ message: "my friend (from changed state)!" }); } render() { return 

Hello {this.state.message}!

; } }

Note: To make this work, we also had to bind the this keyword to the updateMessage method. Otherwise we couldn’t have accessed this in the method.

Event Handlers

The next step is to create a button to click on, so that we can trigger the updateMessage() method.

So let’s add a button to the render() method:

render() { return ( 

Hello {this.state.message}!

Click me! ) }

Here, we’re hooking an event listener onto the button, listening for the onClick event. When this is triggered, we call the updateMessage method.

Here’s the entire component:

class Hello extends React.Component { constructor(){ super(); this.state = { message: "my friend (from state)!" }; this.updateMessage = this.updateMessage.bind(this); } updateMessage() { this.setState({ message: "my friend (from changed state)!" }); } render() { return ( 

Hello {this.state.message}!

Click me! ) } }

The updateMessage method then calls this.setState() which changes the this.state.message value. And when we click the button, here’s how that will play out:

Congrats! You now have a very basic understanding of the most important concepts in React.

If you want to learn more, be sure to check out our free React course on Scrimba.

Good luck with the coding :)

Tak for læsningen! Mit navn er Per Borgen, jeg er medstifter af Scrimba - den nemmeste måde at lære at kode på. Du bør tjekke vores responsive webdesign bootcamp, hvis du vil lære at opbygge et moderne websted på et professionelt niveau.