React. Can someone explain to me what "render" means?

JavaScript
#1

I’m not sure if I’m just getting lost by now being in the middle of the new curriculum, but I am in the React tutorials and am starting to get really confused about what “render” means. I tried backtracking to make sure I wasn’t missing anything and searching on google but I haven’t found a good definition… so confused! Is anyone able to explain this to me in plain, uncomplicated terms?

and also are the “components” the stuff that’s in curly brackets?

Sorry for the silly question… just making sure I’m not going crazy…

#2

“Render” is actually a graphics term that basically means: create something visual from the abstract. By abstract, that usually refers to a program and its state—for example, if you take a classic 2D game of something like Tetris, Pac-Man, or Arkanoid, things are moving around on the screen. Within your program, variables might be storing the state of these things moving around. The “render” operation refers to when all of these abstract objects in your program are visually realized on the screen, it’s basically as simple as that.

I’m actually not hugely familiar with React myself, but in general terms, “render” just means the graphics operation that puts a complete “frame” up on the screen. If you’re not familiar with the term “frame”, it basically means a still image, as a sequence of frames constitutes a video.

2 Likes
#3

render is just a function inside a React class that will ‘render’ your components. That’s just a fancy way of saying it will construct them into dom elements and paint them on the screen.

If a component re-renders, it means that it had to be repainted onto the screen because react thinks something changed.

No. Components are react elements, which are javascript representation of dom nodes (they look like regular dom nodes). So

const component1 = () => <button class...>...</button>

// or as a class

class Component2 extends React.component {
...

    render() {
      return (<h1 class...>....</h1>)
   }

}

component1 and Component2 are the components. Components can also be nested in each other

const component1 = () => {
  
  return (
      <Component2>
         <button class...>...</button>
     </Component2>
  )
}

Since react is just javascript, and jsx is just a visual representation of the dom using javascript, whenever we want to use javascript inside of jsx nodes, we have to put it inside curly brackets. This is how the parser knows you want to execute some function. So

class Component2 extends React.component {
...

    render() {
      return (<h1 class...>{this.props.text}</h1>)
   }

}

This tells the parser, return an h1 dom element, then run javascript to get the value in this.props.text, and insert it into the h1 element.

Hopefully you found this helpful

1 Like
#4

Okay it’s starting to sink in better. Thank you both!

It’s hard doing this, sometimes I feel like I read the tutorials and I go, “huh?!”

#5

I’ve been at this for a year and still feel that way sometimes. Then like a week later it randomly clicks when I’m not even coding. lol :crazy_face:

1 Like
#6

That’s so reassuring to hear! Thanks!

#7