React + ES.Next by Ben Ilegbodu of Eventbrite
Talk Abstract
Discover how to leverage the new JavaScript language features and apply them to our React Native project.
Talk Description
JavaScript is evolving quickly. The ES6 specification was released back in 2015 and has been implemented by modern browsers. New versions of ECMAScript will now be released on a yearly basis. We can leverage ES6 and functionality slated for future versions right now to write even clearer and more concise React code.
Experience with React will help you get the most out of this session, but you don’t have to have a JavaScript black belt to leave feeling confident in using ES.next with React. Learn how to write cleaner code using the new spread operator, classes, modules, destructuring, and other tasty syntactic sugar features being introduced into ECMAScript. Oh, and don’t worry if you don’t understand all of those terms — you soon will after this session!
Notes
The goal of this talk is to walk React / React Native developers who aren’t familiar with new ECMAScript through some of its cool new features (including proposed new ones). But it’s more than just learning ES6+. It’s about how we can apply it (as well as future versions of ECMAScript) with React to write clearer and more succinct code. We’ll start off with React’s previous official tutorial that is 100% ES5 and slowly transform it using various ES6 and proposed future ECMAScript features that are transpiled via Babel. I developed a Github repo that is a step-by-step example of how to leverage ES6+/ES2015+ in React by rewriting (an adapted version of) the official React tutorial.
ECMAScript 2015 is JavaScript. React added support for native ES6 classes over a year ago (with v0.13), but there is still lots of developers still writing in ES5. Many coding examples and StackOverflow answers are given in ES6 so it’s important for us in the React community to level up.
Outline:
Quick React explanation
Quick ECMAScript explanation
Modules
Classes
Destructuring
Array + object spread (object.assign)
Object rest parameters
Arrow functions
Block scoping (Let & const)
Promise (w/ fetch api)
Computed object literal properties with class names
Array api additions
Default parameters