Using React Fragments for the first time

  • Up until React 16 each component had to return a single element: – – With the release of React 16, you were able to return an array of elements that a component would render: – – This is OK; but it has two problems: – – Because returning arrays didn’t…
  • On a large application with a suite of components this can very quickly lead to a set of wrapping elements that can produce a big set of HTML soup.
  • The difference is that a component doesn’t end up adding any extra markup into the DOM: – – First, we import just like we import from : – – And then we use it just like any other React component: – – The key here is that the resulting DOM…
  • However, swapping out the string interpolation using ES2015 template strings for a React suddenly made the entire code easier to follow, and allowed me to use an HTML entity: – – This is now easier to follow and allows me to use HTML entities and have them work as expected….
  • Not only do they clear up a lot of component code, but the fact that they have no output into the DOM should lead to fewer superfluous and elements that a lot of React applications are littered with.

React v16 was a very exciting release for React, and included many new features. In the recent React 16.2 release, improved support for Fragments was announced, and it’s this feature that I want to talk about today.
Continue reading “Using React Fragments for the first time”

Convert React.createClass to ES6 Class

Convert React.createClass to ES6 Class

#ReactJS #ES6 #JS

  • This video and article go over how to convert to ES6 classes.
  • When replacing there are 2 options:

    This post covers converting to ES6 classes – another one covers stateless functions.

  • The helpful folks at Facebook created a project called react-codemod which holds a suite of scripts for automatically transforming old-and-busted React code into the modern style.
  • Right now it contains 11 different scripts to transform all kinds of things, like changing to , converting to ES6 classes, and even sorting the methods in a component to match best practices.
  • You can see the full list in the repo but we’ll go over how to apply the createClass -> ES6 transform here.

As of React 15.5, createClass is deprecated. You’ll get warnings in the console if you’re using it in your code – and, when React 16 comes out, createClass will be removed entirely.
Continue reading “Convert React.createClass to ES6 Class”