Writing React With JSFiddle

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

  • react-with-addons.js (the newer version of react.js)
  • react-dom.js
  • browser.js

Below is an embedded JSFiddle containing the HelloMessage component used throughout this chapter. By clicking on the “results” tab you can view the React component rendered to the DOM. To edit the code just click on “edit with JSFiddle”.

source code

Note that the “Babel” tab indicates the JavaScript written into this tab will be transformed by Babel (similar too, if not directly using browser.js). The “Resources” tab shows that JSFiddle is pulling in the react.js and react-dom.js files.

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

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