What is render in react class component?

JavaScript
1

i have read the definition but im looking for a more intuitive explanation, is it fair to say the purpose of render is build a representation of whatever will show up in the dom and it does this with whatever i choose to return (but you can have variable in render that would never show up in the dom so whats that about?)

class App extends React.Component {
    render() {
        const x = "dljsflkdj"
        return (
            <div>
                <h1>Code </h1>
            </div>

        )
    }
}
2

If you do some computation inside the render method and return this value, then you do

<h1> Code {x} </h1

Often you want to return a value of some state properties like

<h1> Code {this.state.userName} <h1>

You use braces to inject a value.

Sometimes you just want to do some computation to determine what to return. In such case, you use local variables for computation, not as some kind of placeholder for a value to return.

3

Yes, the render() method represents what the component will return to the DOM, based on props and state defined outside the method body, as well as local variables and operations you can execute within its body.
Like any function, it can contain local logic and variables, its your choice as developer to use that at your disposal. Defining a variable with no purpose is pointless obviously :wink:

4

I you’ve never been exposed to Object Oriented Programming, this may seem odd. In OOP, everything is an “object” (or instance of a class) and you have “methods” (functions) that do things. In React, there is a standard pattern that you can create your components as a class and it is understood that there are standard methods that React will know what do to with. render is one, as is constructor (but that is standard with classes), componentDidMount, etc.

5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.