React.js: Components, JSX, and Props
Table of Contents
On this post we are showing two topics related to React.js Components.
The first one is regarding to how the output of the Components can be done using JSX or the createElement function.
The second is related to passing data to the Components via the props argument.
JSX vs createElement
React.js Components return html code that will be part of the user interface of your application. You can return html code with JSX or the createElement function.
JSX stands for Javascript XML, and it allows to write html code directly into your javascript code as shown on the Sample1 Component in the code snippet below. Using JSX the code will be more succinct and clear.
The createElement function which has the following syntax "React.createElement(component, props, ...children)" can be used to also output html code as shown on the Sample2 Component.
import React from "react";
// JSX vs createElement
function Sample1() {
return (
<div>
<h1>Sample Component 1</h1>
<div>This sample uses JSX</div>
</div>
);
}
function Sample2() {
return (
React.createElement('div', null,
React.createElement('h1', null,
"Sample Component 2"
),
React.createElement('div', null,
"This sample uses the createElement function"
)
)
);
}
function App() {
return (
<>
<Sample1 />
<Sample2 />
</>
);
}
export default App;
Props, and Destructuring
The props argument is used to pass data to the React.js Component as shown on the Sample3a Component. Alternatively the props argument can be "destructured" into individual arguments as shown on the Sample3b Component.
import React from "react";
// Props
const name = 'John';
const email = 'john@example.com';
const number = 9;
function Sample3a(props) {
return (
<div>
<h1>Sample 3a</h1>
<div>{props.name}'s email is {props.email}</div>
<div>The square root of {props.number} is {Math.sqrt(props.number)}</div>
</div>
);
}
// Destructuring
function Sample3b({name, email, number}) {
return (
<div>
<h1>Sample 3b</h1>
<div>{name}'s email is {email}</div>
<div>The square root of {number} is {Math.sqrt(number)}</div>
</div>
);
}
function App() {
return (
<>
<Sample3a name={name} email={email} number={number} />
<Sample3a name="John" email="john@example.com" number={9} />
<Sample3b name={name} email={email} number={number} />
</>
);
}
export default App;
Props Arrays
You can pass javascript arrays as the props arguments.
import React from "react";
// Arrays
const primary_colors = ['Red', 'Yellow', 'Blue'];
function Sample4({primary_colors}) {
return (
<div>
<h1>Sample 4</h1>
<div>The primary colors are:
<ul>{
primary_colors.map((c) => <li key={c}>{c}</li>)
}</ul>
</div>
</div>
);
}
function App() {
return (
<>
<Sample4 primary_colors={primary_colors} />
<Sample4 primary_colors={['Red', 'Yellow', 'Blue']} />
</>
);
}
export default App;
Props Objects
You can pass javascript objects as the props arguments.
import React from "react";
// Objects
const person = {
first_name: 'Isaac',
last_name: 'Newton',
birth_place: {
hamlet: 'Woolsthorpe-by-Colsterworth',
district: 'South Kesteven',
county: 'Lincolnshire',
country: 'England'
},
birth_date: '4 January 1643',
fields: ['Physics',
'Natural philosophy',
'Alchemy',
'Theology',
'Mathematics',
'Astronomy',
'Economics'
]
}
function Sample5a(props) {
return (
<div>
<h1>Sample 5a</h1>
<div>{props.person.first_name} {props.person.last_name} was born
in {props.person.birth_date},
in {props.person.birth_place.county}, {props.person.birth_place.country}
</div>
<div>His fields of interests were:
<ul>{
props.person.fields.map((f) => <li key={f}>{f}</li>)
}</ul>
</div>
</div>
);
}
function Sample5b({person}) {
return (
<div>
<h1>Sample 5b</h1>
<div>{person.first_name} {person.last_name} was born
in {person.birth_date},
in {person.birth_place.county}, {person.birth_place.country}
</div>
<div>His fields of interests were:
<ul>{
person.fields.map((f) => <li key={f}>{f}</li>)
}</ul>
</div>
</div>
);
}
function Sample5c({first_name, last_name, birth_place, birth_date, fields}) {
return (
<div>
<h1>Sample 5c</h1>
<div>{first_name} {last_name} was born
in {birth_date},
in {birth_place.county}, {birth_place.country}
</div>
<div>His fields of interests were:
<ul>{
fields.map((f) => <li key={f}>{f}</li>)
}</ul>
</div>
</div>
);
}
function App() {
return (
<>
<Sample5a person={person} />
<Sample5b person={person} />
<Sample5c {...person} />
</>
);
}
export default App;
Copying Objects
You can copy javascript objects with destructuring as shown below with the "person2" object, which has been created using the "person.first_name", "person.last_name", and the destructured birth_place fields "...person.birth_place"
import React from "react";
// Copying Objects
const person = {
first_name: 'Isaac',
last_name: 'Newton',
birth_place: {
hamlet: 'Woolsthorpe-by-Colsterworth',
district: 'South Kesteven',
county: 'Lincolnshire',
country: 'England'
},
birth_date: '4 January 1643',
fields: ['Physics',
'Natural philosophy',
'Alchemy',
'Theology',
'Mathematics',
'Astronomy',
'Economics'
]
}
// New object (person2) created with attributes from another object (person)
const person2 = {first_name: person.first_name, last_name: person.last_name, ...person.birth_place};
function Sample5d({first_name, last_name, district, county, country}) {
return (
<div>
<h1>Sample 5d</h1>
<div>{first_name} {last_name} was born
in {county}, {country}
</div>
</div>
);
}
function App() {
return (
<>
<Sample5d first_name={person.first_name} last_name={person.last_name} {...person.birth_place} />
<Sample5d {...person2} />
</>
);
}
export default App;
Live Demo
See a live demo of the above code on StackBlitz here.