Rendering elements page

content/docs/rendering-elements.md

@@ -1,75 +1,77 @@
 ---
 id: rendering-elements
-title: Rendering Elements
+title: Rendering av element
 permalink: docs/rendering-elements.html
 redirect_from:
   - "docs/displaying-data.html"
 prev: introducing-jsx.html
 next: components-and-props.html
 ---
 
-Elements are the smallest building blocks of React apps.
+Element är de minsta byggstenarna i React-applikationer.
 
-An element describes what you want to see on the screen:
+Ett element beskriver vad som skall visas på skärmen:
 
 ```js
 const element = <h1>Hello, world</h1>;
 ```
 
-Unlike browser DOM elements, React elements are plain objects, and are cheap to create. React DOM takes care of updating the DOM to match the React elements.
+Till skillnad från DOM-elementen i en webbläsare är React-element enkla och kostnadseffektiva objekt. React DOM tar hand om uppdatering av DOM och tillhörande React-element.
 
->**Note:**
+
+>**Obs:**
 >
->One might confuse elements with a more widely known concept of "components". We will introduce components in the [next section](/docs/components-and-props.html). Elements are what components are "made of", and we encourage you to read this section before jumping ahead.
+>Man kan förväxla element med det mer kända begreppet "komponenter". Vi kommer att introducera komponenter i [nästa avsnitt](/docs/components-and-props.html). Elementen utgör grunden för komponenterna, så vi rekommenderar dig att läsa detta avsnitt innan du går vidare.
 
-## Rendering an Element into the DOM {#rendering-an-element-into-the-dom}
+## Rendering av element i DOM {#rendering-an-element-into-the-dom}
 
-Let's say there is a `<div>` somewhere in your HTML file:
+Låt oss säga att du har en `<div>` någonstans i din HTML-fil:
 
 ```html
 <div id="root"></div>
 ```
 
-We call this a "root" DOM node because everything inside it will be managed by React DOM.
+Vi kallar detta en "root" DOM-nod eftersom allt inom den kommer att hanteras av React DOM.
 
-Applications built with just React usually have a single root DOM node. If you are integrating React into an existing app, you may have as many isolated root DOM nodes as you like.
+Applikationer byggda med bara React har vanligtvis en enda root DOM-nod. Om du integrerar React i en befintlig app så kan du ha så många isolerade DOM-noder som du vill.
 
-To render a React element into a root DOM node, pass both to `ReactDOM.render()`:
+För att rendera ett React-element i en root DOM-nod, skicka båda till `ReactDOM.render()`:
 
 `embed:rendering-elements/render-an-element.js`
 
 [](codepen://rendering-elements/render-an-element)
 
-It displays "Hello, world" on the page.
+Det visar "Hello, world" på sidan.
 
-## Updating the Rendered Element {#updating-the-rendered-element}
+## Uppdatera det renderade elementet {#updating-the-rendered-element}
 
-React elements are [immutable](https://en.wikipedia.org/wiki/Immutable_object). Once you create an element, you can't change its children or attributes. An element is like a single frame in a movie: it represents the UI at a certain point in time.
+React-element är [oföränderliga](https://en.wikipedia.org/wiki/Immutable_object). När du väl har skapat ett element så kan du inte ändra på dess barn eller attribut. Ett element är likt en stillbild i en film: den representerar användargränssnittet vid en specfik tidpunkt.
 
-With our knowledge so far, the only way to update the UI is to create a new element, and pass it to `ReactDOM.render()`.
+Med vad vi har lärt oss hittills är det enda sättet att uppdatera användargränssnittet, att skapa ett nytt element och skicka det till `ReactDOM.render()`.
 
-Consider this ticking clock example:
+Låt oss ta detta exempel på en tickande klocka:
 
 `embed:rendering-elements/update-rendered-element.js`
 
 [](codepen://rendering-elements/update-rendered-element)
 
-It calls `ReactDOM.render()` every second from a [`setInterval()`](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval) callback.
+Den kallar på `ReactDOM.render()` varje sekund från en [`setInterval()`](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval) callback.
 
->**Note:**
+>**Obs:**
 >
->In practice, most React apps only call `ReactDOM.render()` once. In the next sections we will learn how such code gets encapsulated into [stateful components](/docs/state-and-lifecycle.html).
+>I praktiken kallar de flesta React applikationer på `ReactDOM.render()` endast en gång. I nästa avsnitt lär vi oss hur vi kapslar in sådan kod i [komponenter med state](/docs/state-and-lifecycle.html).
 >
->We recommend that you don't skip topics because they build on each other.
+>Vi rekomenderar att du läser avsnitten i ordning då de bygger vidare på varandra.
+
+## React uppdaterar endast det nödvändigaste {#react-only-updates-whats-necessary}
 
-## React Only Updates What's Necessary {#react-only-updates-whats-necessary}
+React DOM jämför det nuvarande elementet och dess barn med det föregående, och tillämpar endast de DOM-uppdateringar som innehåller en förändring.
 
-React DOM compares the element and its children to the previous one, and only applies the DOM updates necessary to bring the DOM to the desired state.
+Du kan verifiera genom att inspektera det [senaste exemplet](codepen://rendering-elements/update-rendered-element) med utvecklingsverktygen för webbläsare:
 
-You can verify by inspecting the [last example](codepen://rendering-elements/update-rendered-element) with the browser tools:
 
-![DOM inspector showing granular updates](../images/docs/granular-dom-updates.gif)
+![DOM-inspekteraren som visar uppdatering](../images/docs/granular-dom-updates.gif)
 
-Even though we create an element describing the whole UI tree on every tick, only the text node whose contents has changed gets updated by React DOM.
+Trots att vi skapar ett element som beskriver hela användargränssnittet varje sekund, kommer endast textnoden vars innehåll har ändrats att uppdateras av React DOM.
 
-In our experience, thinking about how the UI should look at any given moment rather than how to change it over time eliminates a whole class of bugs.
+Enligt vår erfarenhet är det mer meningsfullt att tänka på hur användargränssnittet ser ut vid en given tidpunkt, snarare än hur det kommer att förändras över tiden. Detta tänkande förhindrar en hel rad misstag.