Ryan Christiani I Heard React Was Good
Transcript of Ryan Christiani I Heard React Was Good
![Page 1: Ryan Christiani I Heard React Was Good](https://reader031.fdocuments.in/reader031/viewer/2022030302/587dbc3b1a28ab1b498b4f81/html5/thumbnails/1.jpg)
HI!
![Page 2: Ryan Christiani I Heard React Was Good](https://reader031.fdocuments.in/reader031/viewer/2022030302/587dbc3b1a28ab1b498b4f81/html5/thumbnails/2.jpg)
ABOUT MERyan work HackerYou
Instructor and Developer at HackerYou
@Rchristiani on Twitter
ryanchristiani.com
letslearnes6.com
![Page 3: Ryan Christiani I Heard React Was Good](https://reader031.fdocuments.in/reader031/viewer/2022030302/587dbc3b1a28ab1b498b4f81/html5/thumbnails/3.jpg)
![Page 4: Ryan Christiani I Heard React Was Good](https://reader031.fdocuments.in/reader031/viewer/2022030302/587dbc3b1a28ab1b498b4f81/html5/thumbnails/4.jpg)
I HEARD REACT WAS GOOD
![Page 5: Ryan Christiani I Heard React Was Good](https://reader031.fdocuments.in/reader031/viewer/2022030302/587dbc3b1a28ab1b498b4f81/html5/thumbnails/5.jpg)
![Page 6: Ryan Christiani I Heard React Was Good](https://reader031.fdocuments.in/reader031/viewer/2022030302/587dbc3b1a28ab1b498b4f81/html5/thumbnails/6.jpg)
REACT AT HACKERYOUInternal Applications
Alumni
![Page 7: Ryan Christiani I Heard React Was Good](https://reader031.fdocuments.in/reader031/viewer/2022030302/587dbc3b1a28ab1b498b4f81/html5/thumbnails/7.jpg)
CONSIDERATIONSHow would a new developer experience a new tool.
React is the new AngularJS in terms of job posting, whatdoes that mean for us?
![Page 8: Ryan Christiani I Heard React Was Good](https://reader031.fdocuments.in/reader031/viewer/2022030302/587dbc3b1a28ab1b498b4f81/html5/thumbnails/8.jpg)
WHY DO WE HAVE REACT?We have a lot of libraries and frameworks...
![Page 9: Ryan Christiani I Heard React Was Good](https://reader031.fdocuments.in/reader031/viewer/2022030302/587dbc3b1a28ab1b498b4f81/html5/thumbnails/9.jpg)
Ember
Angular
Backbone
Vue.js
Mithril
Tesla...
I thought I made that one up, I googled it, it is a thing...
![Page 10: Ryan Christiani I Heard React Was Good](https://reader031.fdocuments.in/reader031/viewer/2022030302/587dbc3b1a28ab1b498b4f81/html5/thumbnails/10.jpg)
JUST A VIEW LAYERThe 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> ); } });
![Page 11: Ryan Christiani I Heard React Was Good](https://reader031.fdocuments.in/reader031/viewer/2022030302/587dbc3b1a28ab1b498b4f81/html5/thumbnails/11.jpg)
The problem it really solves is application state.
![Page 12: Ryan Christiani I Heard React Was Good](https://reader031.fdocuments.in/reader031/viewer/2022030302/587dbc3b1a28ab1b498b4f81/html5/thumbnails/12.jpg)
Since React is just a view layer, it is more of tool in yourapplication structure, rather than the entire applicationstructure itself. You have freedom to build as you need.
![Page 13: Ryan Christiani I Heard React Was Good](https://reader031.fdocuments.in/reader031/viewer/2022030302/587dbc3b1a28ab1b498b4f81/html5/thumbnails/13.jpg)
![Page 14: Ryan Christiani I Heard React Was Good](https://reader031.fdocuments.in/reader031/viewer/2022030302/587dbc3b1a28ab1b498b4f81/html5/thumbnails/14.jpg)
COMPONENTS REIGN SUPREMEComponents allow you to look at your app in a modular,
DRY and reusable manner. Large templates can be brokendown into simple, reusable components.
![Page 15: Ryan Christiani I Heard React Was Good](https://reader031.fdocuments.in/reader031/viewer/2022030302/587dbc3b1a28ab1b498b4f81/html5/thumbnails/15.jpg)
NOT JUST REACTReact is not the only library focusing on components,
libraries like Polymer and frameworks like Ember havesimilar structures.
Polymer is all about components, the styles and events areall wrapper up into one file. One component.
![Page 16: Ryan Christiani I Heard React Was Good](https://reader031.fdocuments.in/reader031/viewer/2022030302/587dbc3b1a28ab1b498b4f81/html5/thumbnails/16.jpg)
LIFECYCLESEach component has a lifecycle. This lifecycle allows you to
really take control of your components. These will run atcertain points through the execution of the component.
![Page 17: Ryan Christiani I Heard React Was Good](https://reader031.fdocuments.in/reader031/viewer/2022030302/587dbc3b1a28ab1b498b4f81/html5/thumbnails/17.jpg)
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.
![Page 18: Ryan Christiani I Heard React Was Good](https://reader031.fdocuments.in/reader031/viewer/2022030302/587dbc3b1a28ab1b498b4f81/html5/thumbnails/18.jpg)
COMPONENTWILLUNMOUNT()
A hook run before the component is unmounted, orremoved. A place to clean up if needed.
This reminded me of Backbone, when you had to manuallyclean up after yourself.
![Page 19: Ryan Christiani I Heard React Was Good](https://reader031.fdocuments.in/reader031/viewer/2022030302/587dbc3b1a28ab1b498b4f81/html5/thumbnails/19.jpg)
COMPONENTS MAKE TESTING EASY.Because everything is broken up into modular parts, this
allows you to isolate your components to test them.
![Page 20: Ryan Christiani I Heard React Was Good](https://reader031.fdocuments.in/reader031/viewer/2022030302/587dbc3b1a28ab1b498b4f81/html5/thumbnails/20.jpg)
In general components are pretty loosely coupled, they arefairly self contained. Typically they are coupled most with
the data coming into them in the form of props.
![Page 21: Ryan Christiani I Heard React Was Good](https://reader031.fdocuments.in/reader031/viewer/2022030302/587dbc3b1a28ab1b498b4f81/html5/thumbnails/21.jpg)
JSXHTML in your JavaScript?! Yes.
Seems weird at first
Create a more intuitive templates
Attach your events on the DOM....
![Page 22: Ryan Christiani I Heard React Was Good](https://reader031.fdocuments.in/reader031/viewer/2022030302/587dbc3b1a28ab1b498b4f81/html5/thumbnails/22.jpg)
EVENTS IN YOUR TEMPLATESSeems counter intuitive, after all didn't we all learn to
decouple events from the DOM?
Declarative events on the DOM, since everything can exist inone file, it is easy to track down your events.
![Page 23: Ryan Christiani I Heard React Was Good](https://reader031.fdocuments.in/reader031/viewer/2022030302/587dbc3b1a28ab1b498b4f81/html5/thumbnails/23.jpg)
let User = React.createClass({ delete() { //Delete the user }, render() { return ( <div> ... <button onclick="{this.delete}">Delete User</button> </div> ) } });
![Page 24: Ryan Christiani I Heard React Was Good](https://reader031.fdocuments.in/reader031/viewer/2022030302/587dbc3b1a28ab1b498b4f81/html5/thumbnails/24.jpg)
We were also told that events on our DOM elements wasbad. 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.
![Page 25: Ryan Christiani I Heard React Was Good](https://reader031.fdocuments.in/reader031/viewer/2022030302/587dbc3b1a28ab1b498b4f81/html5/thumbnails/25.jpg)
LACK OF FEATURES
![Page 26: Ryan Christiani I Heard React Was Good](https://reader031.fdocuments.in/reader031/viewer/2022030302/587dbc3b1a28ab1b498b4f81/html5/thumbnails/26.jpg)
React provides us with great building blocks, but it does notprovide all the pieces. This is on purpose.
...I think that can be a good thing, more on that later
![Page 27: Ryan Christiani I Heard React Was Good](https://reader031.fdocuments.in/reader031/viewer/2022030302/587dbc3b1a28ab1b498b4f81/html5/thumbnails/27.jpg)
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...
![Page 28: Ryan Christiani I Heard React Was Good](https://reader031.fdocuments.in/reader031/viewer/2022030302/587dbc3b1a28ab1b498b4f81/html5/thumbnails/28.jpg)
HOW DO YOU START A PROJECT?Since React is just one layer of your app, how do you get
started?
![Page 29: Ryan Christiani I Heard React Was Good](https://reader031.fdocuments.in/reader031/viewer/2022030302/587dbc3b1a28ab1b498b4f81/html5/thumbnails/29.jpg)
WEBPACK?
GULP + BROWSERIFY?
NPM SCRIPTS?
BABELIFY?!
GRUNT? JUST GOT A V1 RELEASE!
![Page 30: Ryan Christiani I Heard React Was Good](https://reader031.fdocuments.in/reader031/viewer/2022030302/587dbc3b1a28ab1b498b4f81/html5/thumbnails/30.jpg)
THE EMBER WAYIf 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!
![Page 31: Ryan Christiani I Heard React Was Good](https://reader031.fdocuments.in/reader031/viewer/2022030302/587dbc3b1a28ab1b498b4f81/html5/thumbnails/31.jpg)
DATAOne of the first things you will want when working with
React is getting data.
![Page 32: Ryan Christiani I Heard React Was Good](https://reader031.fdocuments.in/reader031/viewer/2022030302/587dbc3b1a28ab1b498b4f81/html5/thumbnails/32.jpg)
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
![Page 33: Ryan Christiani I Heard React Was Good](https://reader031.fdocuments.in/reader031/viewer/2022030302/587dbc3b1a28ab1b498b4f81/html5/thumbnails/33.jpg)
React has what? $.ajax, fetch, roll your own?
![Page 34: Ryan Christiani I Heard React Was Good](https://reader031.fdocuments.in/reader031/viewer/2022030302/587dbc3b1a28ab1b498b4f81/html5/thumbnails/34.jpg)
IT'S UP TO YOU!
![Page 35: Ryan Christiani I Heard React Was Good](https://reader031.fdocuments.in/reader031/viewer/2022030302/587dbc3b1a28ab1b498b4f81/html5/thumbnails/35.jpg)
APPLICATION FLOW.How do we handle data at an application level?
![Page 36: Ryan Christiani I Heard React Was Good](https://reader031.fdocuments.in/reader031/viewer/2022030302/587dbc3b1a28ab1b498b4f81/html5/thumbnails/36.jpg)
FLUXFacebook's proposed application architecture.
...but not an actual implementation
![Page 37: Ryan Christiani I Heard React Was Good](https://reader031.fdocuments.in/reader031/viewer/2022030302/587dbc3b1a28ab1b498b4f81/html5/thumbnails/37.jpg)
![Page 38: Ryan Christiani I Heard React Was Good](https://reader031.fdocuments.in/reader031/viewer/2022030302/587dbc3b1a28ab1b498b4f81/html5/thumbnails/38.jpg)
REDUXThe most popular
![Page 39: Ryan Christiani I Heard React Was Good](https://reader031.fdocuments.in/reader031/viewer/2022030302/587dbc3b1a28ab1b498b4f81/html5/thumbnails/39.jpg)
RELAYGRAPHQL
![Page 40: Ryan Christiani I Heard React Was Good](https://reader031.fdocuments.in/reader031/viewer/2022030302/587dbc3b1a28ab1b498b4f81/html5/thumbnails/40.jpg)
GOOD PARTS
![Page 41: Ryan Christiani I Heard React Was Good](https://reader031.fdocuments.in/reader031/viewer/2022030302/587dbc3b1a28ab1b498b4f81/html5/thumbnails/41.jpg)
SPEEDReact is FAST!
And this has pushed frameworks like Ember even further!Ember implemented its Glimmer engine based off of ideas
from React.
![Page 42: Ryan Christiani I Heard React Was Good](https://reader031.fdocuments.in/reader031/viewer/2022030302/587dbc3b1a28ab1b498b4f81/html5/thumbnails/42.jpg)
FORCES EXPLORATIONBecause there are missing pieces, it forces you or your team
to explore other possibilities.
What practices work best for you, each project will have adifferent set of requirements.
![Page 43: Ryan Christiani I Heard React Was Good](https://reader031.fdocuments.in/reader031/viewer/2022030302/587dbc3b1a28ab1b498b4f81/html5/thumbnails/43.jpg)
CREATES BETTER JS DEVSIt is helping to create better JS devs, not better
`${framework} devs`.
Too often I see people getting stuck as a framework specificdeveloper, and not expanding on their core skills.
![Page 44: Ryan Christiani I Heard React Was Good](https://reader031.fdocuments.in/reader031/viewer/2022030302/587dbc3b1a28ab1b498b4f81/html5/thumbnails/44.jpg)
![Page 45: Ryan Christiani I Heard React Was Good](https://reader031.fdocuments.in/reader031/viewer/2022030302/587dbc3b1a28ab1b498b4f81/html5/thumbnails/45.jpg)
INTRO TO ES6
![Page 46: Ryan Christiani I Heard React Was Good](https://reader031.fdocuments.in/reader031/viewer/2022030302/587dbc3b1a28ab1b498b4f81/html5/thumbnails/46.jpg)
FUNCTIONAL PROGRAMMING
![Page 47: Ryan Christiani I Heard React Was Good](https://reader031.fdocuments.in/reader031/viewer/2022030302/587dbc3b1a28ab1b498b4f81/html5/thumbnails/47.jpg)
IMMUTABILITY
![Page 48: Ryan Christiani I Heard React Was Good](https://reader031.fdocuments.in/reader031/viewer/2022030302/587dbc3b1a28ab1b498b4f81/html5/thumbnails/48.jpg)
PEOPLE GET AFRAID OF POSSIBILITIES.IT IS IMPORTANT TO REMEMBER.
![Page 49: Ryan Christiani I Heard React Was Good](https://reader031.fdocuments.in/reader031/viewer/2022030302/587dbc3b1a28ab1b498b4f81/html5/thumbnails/49.jpg)
![Page 50: Ryan Christiani I Heard React Was Good](https://reader031.fdocuments.in/reader031/viewer/2022030302/587dbc3b1a28ab1b498b4f81/html5/thumbnails/50.jpg)
![Page 51: Ryan Christiani I Heard React Was Good](https://reader031.fdocuments.in/reader031/viewer/2022030302/587dbc3b1a28ab1b498b4f81/html5/thumbnails/51.jpg)
You don't need it all.
![Page 52: Ryan Christiani I Heard React Was Good](https://reader031.fdocuments.in/reader031/viewer/2022030302/587dbc3b1a28ab1b498b4f81/html5/thumbnails/52.jpg)
THANKS@Rchristiani