Intro to React and Effective Design Patterns

Brian Holt (Microsoft)
1:45pm–5:15pm Monday, 04/20/2015
Frameworks
Location: Salon 9
Average rating: ***..
(3.89, 18 ratings)
Slides:   external link

THIS TUTORIAL HAS REQUIREMENTS AND INSTRUCTIONS LISTED BELOW

One of the new, hot libraries in the JavaScript world is React and there is reason what it is getting so much attention: it offers some productivies gains you will not believe. In this workshop, we will cover React at a high level and then get in and write some code.

React is a library that totally eschews the traditional model-view-controller architecture in favor of consolidating all concerns of a component into a single location. This may seem to be a bad idea but it actually makes code very easy to read and maintain. This is, however, a break from the way we typically think. We will go over this new line of thinking, complete with little React examples to toy with.

By the end of this workshop, you will understand:

1. React, its purpose, and why you may want to use it.
2. How to bootstrap a new app and get React working for you.
3. The complete lifecycle of a React component.
4. Some battle-won React best practices as a result of having React code in production
5. This weird, cool, new JavaScript dialect called JSX.
6. Have built several complete React components, including a little app.

TUTORIAL REQUIREMENTS AND INSTRUCTIONS FOR ATTENDEES

Modern ES5 JavaScript. Having a knowledge of Angular, Ember, Backbone, or something else will help as many parallels will be drawn.

* Text editor / IDE of your choice
* node 0.12+ or iojs 1.0+ (I’ll be running the workshop with iojs 1.6)
* Clone the repo at https://github.com/btholt/es6-react-pres (please do night before or morning of; do not rely on the conference wi-fi!)
* `npm install` the requirements for the repo (please do night before or morning of; do not rely on the conference wi-fi!)
* The ability to be run gulp and iojs/node. I’ll be doing it from the CLI but you can do it however works for you.
* I’ll be doing the workshop with a Mac. Linux is a trivial translation but Windows can be hard.

Photo of Brian Holt

Brian Holt

Microsoft

Brian is currently working as a senior user interface engineer at Netflix. This means he’s using JavaScript to enable your (and his) binge watching of House of Cards. Previously he worked as the director of redditgifts front end at reddit. When not on a Netflix bender or devouring content on reddit, Brian is probably hanging out with wife and dog, running, traveling, or playing video games. Brian is presently a resident of San Francisco, CA.

Comments on this page are now closed.

Comments

Danillo Felixdaal
04/18/2015 9:34pm PDT

:( sorry i ment audra,,, autocorrect:P

Danillo Felixdaal
04/18/2015 9:32pm PDT

@audrey thank u:)

Picture of Audra Carter
Audra Carter
04/18/2015 3:49pm PDT

Hi Danillo,

I have made the change for you on your registration. You are now registered to attend this tutorial on React.

Danillo Felixdaal
04/18/2015 11:02am PDT

i ment @brian holt

Danillo Felixdaal
04/18/2015 11:02am PDT

@oscar, quick question, i signed up for another session, but lately i have been experimenting a lot with react, and would like to attend this session, is this still possible?

Picture of Brian Holt
Brian Holt
04/17/2015 8:59am PDT

@Oscar:

My guess is that you’re not using the correct version of node. You must be using either iojs or node 0.12+ with the —harmony flag.

Oscar Pagani
04/17/2015 8:49am PDT

Hi Brian,

I am getting an error when I run:

node app.js in the completed directory

I am just trying to test the app.

Could you please add some instructions on the README file?

What steps am I missing?

Thank you,

Oscar