Download - Ryan Christiani I Heard React Was Good
HI!
ABOUT MERyan work HackerYou
Instructor and Developer at HackerYou
@Rchristiani on Twitter
ryanchristiani.com
letslearnes6.com
I HEARD REACT WAS GOOD
REACT AT HACKERYOUInternal Applications
Alumni
CONSIDERATIONSHow would a new developer experience a new tool.
React is the new AngularJS in terms of job posting, whatdoes that mean for us?
WHY DO WE HAVE REACT?We have a lot of libraries and frameworks...
Ember
Angular
Backbone
Vue.js
Mithril
Tesla...
I thought I made that one up, I googled it, it is a thing...
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> ); } });
The problem it really solves is application state.
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.
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.
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.
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.
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.
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.
COMPONENTS MAKE TESTING EASY.Because everything is broken up into modular parts, this
allows you to isolate your components to test them.
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.
JSXHTML in your JavaScript?! Yes.
Seems weird at first
Create a more intuitive templates
Attach your events on the DOM....
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.
let User = React.createClass({ delete() { //Delete the user }, render() { return ( <div> ... <button onclick="{this.delete}">Delete User</button> </div> ) } });
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.
LACK OF FEATURES
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
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...
HOW DO YOU START A PROJECT?Since React is just one layer of your app, how do you get
started?
WEBPACK?
GULP + BROWSERIFY?
NPM SCRIPTS?
BABELIFY?!
GRUNT? JUST GOT A V1 RELEASE!
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!
DATAOne of the first things you will want when working with
React is getting data.
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
React has what? $.ajax, fetch, roll your own?
IT'S UP TO YOU!
APPLICATION FLOW.How do we handle data at an application level?
FLUXFacebook's proposed application architecture.
...but not an actual implementation
REDUXThe most popular
RELAYGRAPHQL
GOOD PARTS
SPEEDReact is FAST!
And this has pushed frameworks like Ember even further!Ember implemented its Glimmer engine based off of ideas
from React.
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.
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.
INTRO TO ES6
FUNCTIONAL PROGRAMMING
IMMUTABILITY
PEOPLE GET AFRAID OF POSSIBILITIES.IT IS IMPORTANT TO REMEMBER.
You don't need it all.
THANKS@Rchristiani