HI!

ABOUT MELead Instructor and Developer at HackerYou

@Rchristiani on Twitter

ryanchristiani.com

letslearnes6.com

I HEARD REACT WAS GOOD

REACT AT HACKERYOUInternal Applications

Alumni

CONSIDERATIONS AS A TEACHERReact is the new AngularJS in terms of job posting, what

does that mean for us?

Students are getting jobs using React.

INFORMS HOW WE TEACHWhen students start exploring frameworks and libraries so

early on, this starts to change how we teach.

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

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

organization.

SOME ARE OPINIONATED.

SOME ARE NOT.

REACT IS JUST A VIEW LAYERThe 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> ); } });

Since React is just a view layer, it is more of block in yourapplication stack, rather than the entire application

structure itself. You have freedom to build as you need.

COMPONENTS REIGN SUPREMEComponents allow you to look at your app in a modular, DRYand reusable manner. Large templates can be broken down

into simple, reusable components.

REUSABLElet 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="" /> ); } });

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

PROPS<AvatarImage email={this.state.user.email} size="50" />

Props allow us to create nice composable 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 a�er yourself.

COMPONENTS MAKE TESTING EASY.Because everything is broken up into modular parts, this

allows you to isolate your components to test them.

//avatar.js export default React.createClass({ ... });

//avatar-test.js import Avatar from './components/avatar.js';

DON'T NEED ANYTHING FANCY?Use a stateless component.

const UserName = (props) => { return ( <h3>{props.userName}</h3> ) };

//Useage <UserName userName="Ryan Christiani" />

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.

JSX

HTML in your JavaScript?!

Seems weird at first.

Create a more intuitive templates.

ALLOWS DESIGNERS TO GET INVOLVED WITHTHE PROCESS

Attach your events on the DOM....

EVENTS IN YOUR TEMPLATESSeems counter intuitive, a�er all didn't we all learn to

decouple events from the DOM?

Creating declarative events on the DOM, since everythingcan exist in one file, makes it easy to track down your events

and understand your logic.

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

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!

ember new app

ember generate component user

react-cli

rackt-cli

Build your own?

There is no set structure for a React app

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

React has what?

$.ajax

fetch(They finally made that happen)

Roll your own?

IT'S UP TO YOU!

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

REACT IS NOT AN MVC FRAMEWORK

FLUXFacebook's proposed application architecture.

...but not an actual implementation

REDUX

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 o�en I see people getting stuck as a framework specificdeveloper, and not expanding on their core skills.

INTRO TO ES6letslearnes6.com

FUNCTIONAL PROGRAMMING

IMMUTABILITY

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

You don't need it all.

THANKS@Rchristiani