React Introduction

The React filter enables you to build React components.

The examples below are based on the examples from the React website. For best results:

  • Review the React website first, and refer to it as you work through each example that follows. Compare the Ruby source, the JavaScript that is generated from these pages against the JavaScript source and the JavaScript that results if you uncheck the JSX? checkbox in the top right of each corresponding example.

  • Change the Ruby source code in your browser , and see how the JavaScript and results change.

  • Download and run the demo. Again, feel free to make changes and see the results live.


As you go through these examples, you will see that there are multiple ways to do things (for example, three ways to express HTML, two ways to access state). This enables you to chose between adopting a more JavaScript/JSX style or a more Ruby/Markaby/builder style. Feel free to mix and match the various approaches, even within the scope of a single method.

Next: A Simple Component