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…
“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.
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
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