What is a component?

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.

React docs



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.

Component driven UI

🏘 Case study: Airbnb and UberEats



Can you spot the "components" in these page?

🏷 Sidenote: React dev tools extension

Install React dev tools for your browser (available in all major browsers)


😎 You can inspect React component tree of some React websites

Airbnb: http://bit.ly/2TqjYa1


Ubereats: https://www.ubereats.com/en-CA/


🏷 ES6 Arrow functions

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;

🏷 ES6 Side note: Arrow function shorthand

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