HEllo guys, so I'm learning JS and trying react but I can't grasp a good understanding of some of the, apparently, most important terms. One of them is Object, another one is parent/child components, since I seem to find different examples that aren't consistent, and it's especially difficult for me to understand the codeword this, because of the previously explained.
So, my questions are:
what IS an object in JS and what is an object in react?
How do I know what is a parent and what is a child?
How do I understand the "passing props" part of the code?
I'm doing the react turorial Tutorial: Intro to React – React (reactjs.org), and part of it is "passing props" but I just don't get how one component is taking value from another when I can't see any relation between them.
Edit: thank you, everyone, for your answers, I will keep trying to grasps the concepts I'm struggling with before proceeding with anything. An object is now much more clearer but I'm still struggling with the parent/child and the passing of props but I'll keep reading.
There is no best way, it depends on your use case.
- Use way 1 if you want to create several similar objects. In your example,
Person(you should start the name with a capital letter) is called the constructor function. This is similar to classes in other OO languages. - Use way 2 if you only need one object of a kind (like a singleton). If you want this object to inherit from another one, then you have to use a constructor function though.
- Use way 3 if you want to initialize properties of the object depending on other properties of it or if you have dynamic property names.
Update: As requested examples for the third way.
Dependent properties:
The following does not work as this does not refer to book. There is no way to initialize a property with values of other properties in a object literal:
var book = {
price: somePrice * discount,
pages: 500,
pricePerPage: this.price / this.pages
};
instead, you could do:
var book = {
price: somePrice * discount,
pages: 500
};
book.pricePerPage = book.price / book.pages;
// or book['pricePerPage'] = book.price / book.pages;
Dynamic property names:
If the property name is stored in some variable or created through some expression, then you have to use bracket notation:
var name = 'propertyName';
// the property will be `name`, not `propertyName`
var obj = {
name: 42
};
// same here
obj.name = 42;
// this works, it will set `propertyName`
obj[name] = 42;
There is various way to define a function. It is totally based upon your requirement. Below are the few styles :-
- Object Constructor
- Literal constructor
- Function Based
- Protoype Based
- Function and Prototype Based
- Singleton Based
Examples:
- Object constructor
var person = new Object();
person.name = "Anand",
person.getName = function(){
return this.name ;
};
- Literal constructor
var person = {
name : "Anand",
getName : function (){
return this.name
}
}
- function Constructor
function Person(name){
this.name = name
this.getName = function(){
return this.name
}
}
- Prototype
function Person(){};
Person.prototype.name = "Anand";
- Function/Prototype combination
function Person(name){
this.name = name;
}
Person.prototype.getName = function(){
return this.name
}
- Singleton
var person = new function(){
this.name = "Anand"
}
You can try it on console, if you have any confusion.