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