a reusable, self-contained code that contains rendering logic and JSX
Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.
Components are standardized, interchangeable building blocks of UIs.
They encapsulate the appearance and function of UI pieces. Think LEGO bricks. LEGOs can be used to build everything from castles to spaceships; components can be taken apart and used to create new features.
https://www.ubereats.com/en-CA/
Can you spot the "components" in these page?
Install React dev tools for your browser (available in all major browsers)
Airbnb: http://bit.ly/2TqjYa1
Ubereats: https://www.ubereats.com/en-CA/
Throughout the workshop, you'll see ES6 syntax which is a new standard of JS
Arrow functions: () => {}
The syntax comes off as weird if you're seeing it for the first time, but these are all equivalent.
These are named functions
// ES5 version
function add(a, b) {
return a + b;
}
// or
var add = function(a, b) {
return a + b;
}
// ES6 version
const add = (a, b) => {
return a + b;
};
Consider this anonymous (unnamed) function:
// ES5
function(item) {
return item*2;
}
// ES6 full syntax
(item) => {
return item*2;
}
// ES6 shorthand 1: return and {} optional if only one expression
// perfect for one-liners
(item) => item*2
// ES6 shorthand 2: () optional when only one param
item => item*2