Presented at FITC Toronto 2016 See details at www.fitc.ca 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 concept 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

1. HI!

2. ABOUT ME
Lead Instructor and Developer at HackerYou
@Rchristiani on Twitter
ryanchristiani.com
letslearnes6.com

4. I HEARD REACT
WAS GOOD

6. REACT AT HACKERYOU
Internal Applications
Alumni

7. CONSIDERATIONS AS A TEACHER
React is the new AngularJS in terms of job posting, what
does that mean for us?
Students are getting jobs using React.

8. INFORMS HOW WE TEACH
When students start exploring frameworks and libraries so
early on, this starts to change how we teach.

9. WHY DO WE HAVE REACT?
We have a lot of libraries and frameworks...

10. Ember
Angular
Backbone
Vue.js
Mithril
Tesla...
I thought I made that one up,
I googled it, it is a thing...

11. MVC DREAMS
We have so many frameworks that follow an MVC or MV*
pattern. The goal of all of them is to create structure and
organization.

12. SOME ARE OPINIONATED.

13. SOME ARE NOT.

14. REACT IS JUST A VIEW LAYER
The one key feature of the React library, is that it is really just
a view layer, mostly simple components.
let App = React.createClass({
render() {
return (
<main>
<h1>What an APP!</h1>
</main>
);
}
});

15. Since React is just a view layer, it is more of block in your
application stack, rather than the entire application
structure itself. You have freedom to build as you need.

16. 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.

18. REUSABLE
let Avatar = React.createClass({
render() {
let imageUrl = (() => {
let email = this.props.email;
let size = this.props.size || 200;
if(email) {
return 'https://www.gravatar.com/avatar/' + md5(email) + '?s=' + size;
}
})();
return (
<img className="avatar" src={imageUrl} alt="" />
);
}
});

19. <li>
<AvatarImage email={this.state.user.email} size="50" />
{this.state.user.name}
</li>

20. PROPS
<AvatarImage email={this.state.user.email} size="50" />
Props allow us to create nice composable components.

21. 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.

22. 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.

23. 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.

24. 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 a er yourself.

25. COMPONENTS MAKE TESTING EASY.
Because everything is broken up into modular parts, this
allows you to isolate your components to test them.

26. //avatar.js
export default React.createClass({
...
});
//avatar-test.js
import Avatar from './components/avatar.js';

27. DON'T NEED ANYTHING FANCY?
Use a stateless component.
const UserName = (props) => {
return (
<h3>{props.userName}</h3>
)
};
//Useage
<UserName userName="Ryan Christiani" />

28. 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.

29. JSX

30. HTML in your JavaScript?!
Seems weird at first.
Create a more intuitive templates.

31. ALLOWS DESIGNERS TO GET INVOLVED WITH
THE PROCESS

32. Attach your events on the DOM....

33. EVENTS IN YOUR TEMPLATES
Seems counter intuitive, a er all didn't we all learn to
decouple events from the DOM?
Creating declarative events on the DOM, since everything
can exist in one file, makes it easy to track down your events
and understand your logic.

34. let User = React.createClass({
delete() {
//Delete the user
},
render() {
return (
<div>
...
<button onclick="{this.delete}">Delete User</button>
</div>
)
}
});

35. The structure is becoming increasing more dynamic.
Keeping our events tied to this structure now makes more
sense.

36. LACK OF FEATURES

37. 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

38. 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...

39. HOW DO YOU START A PROJECT?
Since React is just one layer of your app, how do you get
started?

40. WEBPACK?
GULP + BROWSERIFY?
NPM SCRIPTS?
BABELIFY?!
GRUNT? JUST GOT A V1 RELEASE!

41. 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!

42. ember new app

43. ember generate component user

44. react-cli
rackt-cli
Build your own?

45. There is no set structure for a React app

46. DATA
One of the first things you will want when working with
React is getting data.

47. 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 and Backbone.Collection

48. React has what?

49. $.ajax

50. fetch
(They finally made that happen)

51. Roll your own?

52. IT'S UP TO YOU!

53. APPLICATION FLOW.
How do we handle data at an application level?

54. REACT IS NOT AN MVC FRAMEWORK

55. FLUX
Facebook's proposed application architecture.
...but not an actual implementation

57. REDUX

58. RELAY
GRAPHQL

59. GOOD PARTS

60. SPEED
React is FAST!
And this has pushed frameworks like Ember even further!
Ember implemented its Glimmer engine based off of ideas
from React.

61. 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.

62. CREATES BETTER JS DEVS
It is helping to create better JS devs, not better
`${framework} devs`.
Too o en I see people getting stuck as a framework specific
developer, and not expanding on their core skills.

64. INTRO TO ES6
letslearnes6.com

65. FUNCTIONAL PROGRAMMING

66. IMMUTABILITY

67. PEOPLE GET AFRAID OF POSSIBILITIES.
IT IS IMPORTANT TO REMEMBER.

70. You don't need it all.

71. THANKS
@Rchristiani