If you run into one that I didn't cover, don't hesitate to reach out to me in the comments below or on Twitter and I'll help you understand it and add it to the list. I'm confident there are more elements of both React and ES6 that are confusing. Here's an in-depth tutorial on JSX: JSX in Depth. This allows the easy embedding of logic or dynamic values into your markup. handleChange = () => gets evaluated as JavaScript. Below I break down a lot of the syntax you'll see in React tutorials and examples.įor each feature, I show a couple examples of what it might look like, identify where it is coming from, give you a quick overview of what is called and what it does, and link off to some resources that can help you learn about it.Īrrow Functions (ES6) // example 1 this. Knowing what is what can help tremendously in figuring out what to search for and where to learn it. Update from : Updated the code and text to use React 15. Update from : Updated the code and text to use Babel 6 instead of Babel 5. What’s coming from React? What’s just ES6 JavaScript? 5+ years’ experience developing with React JS and React Native Strong Fundamental JavaScript skills (ES5 and ES6). React and ES6 - Part 5, React and ES6 Workflow with JSPM React and ES6 - Part 6, React and ES6 Workflow with Webpack The code corresponding to this article is available on the GitHub. In a recent blog post about his struggle to learn React, Brad Frost highlighted an issue that I've heard from developer after developer:īecause React and ES6 are very much intertwined, I have a hard time digesting any given block of code.