Pierwsza testowa aplikacja w React - pytanie

Question

React:

let wolf= {grey:{name:"Weick",height:0.7,age:3,desc:"Calmly and nice"},
			brown:{name:"Choc",height:0.5,age:2,desc:"Fast nad funny"},
			white:{name:"Alpha",height:1.2,age:4,desc:"Dangerous "}
			}
  
   function WolfDetails({wolf}){
			return(
			
			<i>  Wiek: {wolf.age} lata <br/> Wzrost: {wolf.height} <br/> {wolf.desc}</i>
		
   
   )}
  
   function WolfShow({wolf}){
			return(
			
			<div className="elem"> <div className="only"><b>{wolf.name}</b></div>
			
			<WolfDetails wolf={wolf} />
			
			</div>
   
   )}
  
	function App ({wolf}){
			return(
			
			<div className="main">
	
			<WolfShow wolf={wolf.grey}/>
			<WolfShow wolf={wolf.brown}/>
			<WolfShow wolf={wolf.white}/>
			
			</div>
			
			)}
			

	ReactDOM.render(<App wolf={wolf} />,document.getElementById("app"));

CSS:

.main{
 display:flex;
 height:200px;
 width:400px;
 border:1px black solid;
 }
 
 
 .only{
 dislpay:block;
}
 
 
 .elem{
 padding:2px;
 margin:2px;
 border:1px black solid;

 }

Wynik aplikacji graficznie

 

Podana wyzej prosta aplikacja generuje tablice z imionami wilkow zapisanych jako obiekty oraz ich szczegolami.

 

Jako ze Reacta ucze sie od ok. 5 godzin chcialbym aby ktos rzucil okiem i powiedzial co ew. mozna poprawic, co wypadaloby lepiej zrobic lub zmienic, a co jest po prostu zle.

 

Pytanie dotyczy jsx, a bardziej tego jak przekazywany jest obiekt do komponentu. wysylany jest jako obiekt, uprzednio zmieniony przez Babel z atrybutow - to jest zrozumiale, lecz kompletnie nie rozumiem tego w jaki sposob jest on odbierany przez komponent, tego zapisu np. ({name, age}), dlaczego nie np. x z wlasnosciami x.name i x.age, tylko tworzy w komponencie tak jakby odrazu zmienne, moze ktos mnie nakierowac lub wytlumaczyc o co w tym chodzi?

Comments

Reacta nie znam wcale, wiele nie pomogę, ale szukaj pod hasłem "variable binding". Zresztą pewnie zaraz ktoś pomoże :)

---

@mNmNmN, zapis {name, age} wskazuje mniej więcej tyle, że jest to obiekt z takimi, tak na prawdę metodami. Tak na prawdę tutaj rozwiń pytanie czego najbardziej nie rozumiesz, bo jednak odpowiedź może być czasami niejednoznaczna, szczególnie w przypadku JS :D