I Heard React Was Good
with Ryan Christiani
There is no doubt React is here to stay, it’s popularity is on the rise. But if you are new to JS or new to JS frameworks you might be wondering WHY is it so popular. In this talk we will look at why we have React and what problems it solves. The concepts of reusable components, their life cycles and the common terminology. We will also explore what the workflow for building a modern React app looks like, and where React can fall short. Learning React in 2016 will be an important step in your career, so lets dive in!
OBJECTIVE
Break down the concepts behind React and make it easy for people to start building with it.
TARGET AUDIENCE
JavaScript developers or project mangers looking to get a better understanding of React.
ASSUMED AUDIENCE KNOWLEDGE
Intermediate understanding of JavaScript.
FIVE THINGS AUDIENCE MEMBERS WILL LEARN
Why do we have react, what problems does it solve
React components
Component life cycles
Common terminology
Where React falls short
10. JUST A VIEW LAYER
The one key feature of the React library, is that it is really
just a view layer. It is just simple components.
let App = React.createClass({
render() {
return (
<main>
<h1>What an APP!</h1>
</main>
);
}
});
12. Since React is just a view layer, it is more of tool in your
application structure, rather than the entire application
structure itself. You have freedom to build as you need.
14. COMPONENTS REIGN SUPREME
Components allow you to look at your app in a modular,
DRY and reusable manner. Large templates can be broken
down into simple, reusable components.
15. NOT JUST REACT
React is not the only library focusing on components,
libraries like Polymer and frameworks like Ember have
similar structures.
Polymer is all about components, the styles and events are
all wrapper up into one file. One component.
16. LIFECYCLES
Each component has a lifecycle. This lifecycle allows you to
really take control of your components. These will run at
certain points through the execution of the component.
17. COMPONENTDIDMOUNT()
This is a hook that will run when the component is rendered,
and it will run only once. But here is where we can decide
whether or not to load data.
18. COMPONENTWILLUNMOUNT()
A hook run before the component is unmounted, or
removed. A place to clean up if needed.
This reminded me of Backbone, when you had to manually
clean up after yourself.
19. COMPONENTS MAKE TESTING EASY.
Because everything is broken up into modular parts, this
allows you to isolate your components to test them.
20. In general components are pretty loosely coupled, they are
fairly self contained. Typically they are coupled most with
the data coming into them in the form of props.
21. JSX
HTML in your JavaScript?! Yes.
Seems weird at first
Create a more intuitive templates
Attach your events on the DOM....
22. EVENTS IN YOUR TEMPLATES
Seems counter intuitive, after all didn't we all learn to
decouple events from the DOM?
Declarative events on the DOM, since everything can exist in
one file, it is easy to track down your events.
23. let User = React.createClass({
delete() {
//Delete the user
},
render() {
return (
<div>
...
<button onclick="{this.delete}">Delete User</button>
</div>
)
}
});
24. We were also told that events on our DOM elements was
bad. It tied our logic and JS to closely to the HTML, the
structure of our page.
The structure is becoming increasing more dynamic.
Keeping our events tied to this structure now makes more
sense.
26. React provides us with great building blocks, but it does not
provide all the pieces. This is on purpose.
...I think that can be a good thing, more on that later
27. NO CLEAR PATH.
However that can be confusing. When you start working
with Angular, or Ember. There is a real
`${library.name}-way`of doing things.
little ES6 joke there...
28. HOW DO YOU START A PROJECT?
Since React is just one layer of your app, how do you get
started?
30. THE EMBER WAY
If you have ever worked with Ember, you know there is a
very Ember way to do things.
Ember has the ember-cli as a great tool to get going with!
31. DATA
One of the first things you will want when working with
React is getting data.
32. WHERE DOES IT COME FROM?
Most frameworks have a preferred method of getting data.
Ember has Ember Data.
Angular has $http
Backbone has Backbone.Model
41. SPEED
React is FAST!
And this has pushed frameworks like Ember even further!
Ember implemented its Glimmer engine based off of ideas
from React.
42. FORCES EXPLORATION
Because there are missing pieces, it forces you or your team
to explore other possibilities.
What practices work best for you, each project will have a
different set of requirements.
43. CREATES BETTER JS DEVS
It is helping to create better JS devs, not better
`${framework} devs`.
Too often I see people getting stuck as a framework specific
developer, and not expanding on their core skills.