An introduction to React.js presented as part of an internal sharing event inside of IBM Design. This talk tries to cover what React is actually trying to do, versus explaining how to use it.
8. Imperative
Specify how to do something
var nums = [1, 2, 3, 4, 5];
// Double an array of values
for (var i = 0; i < nums.length; i++) {
nums[i] = nums[i] * 2;
}
9. Declarative
Specify the desired result
var nums = [1, 2, 3, 4, 5];
var doubled = nums.map(function (num) {
return num * 2;
});
21. – J I M S P R O C H
“React is a translation layer that takes in a description
of how things should be and executes the minimal
DOM operations to make it happen.”
24. – S E B A S T I A N M A R K B Å G E
“React is not a virtual DOM library for you to render
to the DOM. It’s a tool for building out your toolbox
of components.”
33. • We can think about components in isolation, rather than about a
system as a whole
• We basically write a function that describes what should happen, and
React handles the transitions for you
function render(state) → DOM
34. – J O S E P H S AV O N A
“React makes it a lot easier to do client side
development because it’s a simpler mental model.”
35. AV O I D I N G D ATA M U TAT I O N
• Complexity is often strongly correlated with data mutation
• If you rewrite the complex code to avoid mutation, it is usually much
easier to reason about
36. W R I T E S I M P L E R C O D E
• Makes it difficult to do data mutation
• Makes it difficult to use an Imperative API
• As a result, your application is more manageable
37. W H AT D O E S A C O M P O N E N T
L O O K L I K E ?
56. – J O S E P H S AV O N A
“For new developers, it’s really hard to jump into the
system and begin making changes and making
decisions while still being confident that the overall
system will work.”
83. – J O S E P H S AV O N A
“Our simple change has turned into this. One change
requires a cascade of change throughout our
application. If you’re a new developer and you get a
task like add a photo, you might think it is easy but
then you have to understand the entire system in
order to make the change. This doesn’t scale.”
92. • We build up the primitive components of our application
• We compose them together to create abstractions for higher order
components
• React is the tool that allows us to build out our toolbox of
components specific to our application
97. – S E B A S T I A N M A R K B Å G E
“Your job is not to create clever hacks to compose
two wrong abstractions together. Your job is to
compose the right abstractions for the right job.”
98. R E A C T TA R G E T S
• DOM
• SVG
• WebGL
• iOS
• Android
• Canvas