Writing React with CodePen

The basic setup that has been described in this chapter can be used online via CodePen. CodePen uses the same three resources used earlier to make writing React online.

• react
• react-dom
• babel

Below is an embedded CodePen containing the HelloMessage component used throughout this chapter. By clicking on the “Result” tab you can view the React component rendered to the DOM. To edit the code just click on “EDIT ON CODEPEN” at the top right corner.

See the Pen rvrQod by Bunlong (@Bunlong) on CodePen.

Note that the “Babel” tab indicates the JavaScript written into this tab will be transformed by Babel.

It will be assumed that after reading this chapter that you understand the basic requirements to setup React and Babel via babel js. And that while CodePen does not make it obvious, this is the same exact setup being used by CodePen to run React code.

CodePen will be used throughout the rest of this book to show the results of React code transformed by Babel.