React: Creating A Component with ES6Class and rendering it without JSX

Question

i have just started to learn React and i am trying to render components which i create as from classes. I like this way very much since it is similar to Java the language that i started with.

So far i want to understand how i can create a class from scratch and just render it on the page.I have searched around the web a bit and found some examples like here but they did not fit my situation because in that case , the user is using redux which i am not using. I also found several examples of rendering but they are not explicitly using classes.Could someone please show me how i can succesfully render the code to react-container i have here and explain it to me? Your help will be greatly appreciated !

class IngredientsList extends React.Component {

            renderListItem(ingredient, i) {
                return React.createElement("li", { key: i }, ingredient)
            }

            render() {
                return React.createElement("ul", { className: "ingredients" }, this.props.items.map(this.renderListItem))
            }

        }

        const myIngredients = new IngredientList();

        const items = ["1 lb Salmon", "1 cup pine nuts", "2 cups butter lettuce", "1 yellow squash", "1/2 cup Olive oil", "3 gloves of garlic"];

        const myList = myIngredients.renderListItem(items, 1);
        myIngredients.render();

<div id="react-container"></div>

so as you can see i have created the class, tried to initialize it and then use the render method but nothing displays.I suppose i have to somehow use this method here document.getElementById('react-container') to point where i want to render but i am not sure how to integrate that in my build.

Brian Thompson · Accepted Answer · 2020-12-08 16:08:29Z

2

In React, you never should call the render method on a component. React handles the rendering for you, which is a big part of why to use React in the first place.

You need to use ReactDOM.render to mount your app into the DOM, and then React will manage the rendering of components and sub-components from there.

ReactDOM.render accepts two arguments. The first is the component, and the second is the actual DOM element where you want your app to be rendered on the page.

class IngredientsList extends React.Component {
  renderListItem(ingredient, i) {
    return React.createElement("li", { key: i }, ingredient)
  }

  render() {
    return React.createElement("ul", { className: "ingredients" }, this.props.items.map(this.renderListItem))
  }
}
        
const items = ["1 lb Salmon", "1 cup pine nuts", "2 cups butter lettuce", "1 yellow squash", "1/2 cup Olive oil", "3 gloves of garlic"];

ReactDOM.render(
  React.createElement(IngredientsList, {items: items}), 
  document.getElementById('react-container')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="react-container"></div>

answered Dec 8, 2020 at 16:08

Brian Thompson

14.5k4 gold badges27 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

helloApp Over a year ago

Thanks alot it works great. Could you please also explain this. Do i just need to pass the class name? i mean i don't need to instantiate anything and react takes care of the rest? also do i need to have a render method inside the class component i want to render? will this method be called by react automatically?

Brian Thompson Over a year ago

@helloApp Notice that it is not a class name (its not a string), it is a reference to a class (not an instance of the class). So yes, React will both instantiate the class, and call the render method on it. And yes you must name the method "render" so that React knows to call it.

Collectives™ on Stack Overflow

React: Creating A Component with ES6Class and rendering it without JSX

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related