FAQ: Your First React Component - The Render Function

This community-built FAQ covers the “The Render Function” exercise from the lesson “Your First React Component”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Web Development

Learn ReactJS: Part I

FAQs on the exercise The Render Function

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

I have some questions about how classes are used in the lesson. Please let me know if I’m wrong, I believe that JS used prototypical inheritance and ES6 introduce new keywords like , , , , however classes in JS are objects not “templates” or “blueprints” like Java classes.

This new concepts add “syntactic sugar” to the language, a new way to create objects different than <Object.create> or function constructors and the operator . However, classes are objects itself and the way inheritance doesn’t change. Therefore, I have the next questions:

  1. Why are we using clases to “extend” the React.Component object, is there a benefit o reason?
  2. Is there a way to do the same thing withe pure prototypical inheritance, like Object.create(React.Component), and what are the advantages or disadvantages of this? For example, in pure prototypical situation, inheritance of attributes may look something like this:
//Create a simple Object
var person = {
  name: "something", 
  age: "something",
  gender: "something",
  greet: function(){
    console.log('Hi there ' + this.name + ' nice to meet you !');
  }
};
var pedro = Object.create(person);

// pedro is an empty object --> {}
// pedro's prototype is the person object.
// Therefore, I can call the greet function even if pedro is empty.
pedro.greet();
// --> Hi there something nice to meet you !

//Now is posible to "overwrite" the prototype attributes for Pedro.
pedro.name = "Pedro";
pedro.greet();
// --> Hi there Pedro nice to meet you !

2.1. Instead of using the <class className extends React.Component {}> syntax, is it possible to do something like this ?:

var myComponent = Object.create(React.Component)
  1. Finally, if a decide to create a new object with a function constructor and the new operator, if a method is passed to the function constructor, every time I create a new “instance” a new Function object is created (the method). This is not ideal in terms of performance, therefore, is possible to use the <Function.prototype> attribute instead.

OK, my question is, when I use the new syntax and I create a function or method inside, a new object Function is created every time a new instance came to be or not ?

(pd. sorry for my english (englishky) and the long post, please let me know if Im wrong and why, I really want to understand this, thanks a lot).

First of all never apologize for your English :partying_face: It means amongst all the wonderful coding stuff you know you also know multiple human languages!!! Keep on keeping on !!

I think what your asking is what is the advantage of imported things and then using them to make little bits of reusable code instead of just dunking it into a variable and then reusing the variable ??!

if its that question my answer is this: you could then sort of partition off your code in to a bunch of different documents and simply import variables into a main program keeping everything in modules. That in some ways improves readability and maintainability…because if your program crashes say after you import a component you know the problem with your code was in that part.

I guess components do act like variables and sort of tuck things away nicely so you can keep it dry :umbrella: aka Don’t Repeat Yourself

If you got this far you had to do that underwater animals example… Remember that : The animals image array was tucked into another JS file which we then imported into the Main,JS file we were working on. We didn’t see all the fun facts :dolphin: :lobster: :star: and whatever else was there while we were coding the JSX elements.

I do think this article from FreeCodeCamp perhaps give a better technical overview then my novice explanation