Update example app for Tech challenges (#4192)

Update examples/playbook-rails-react-example to work better with tech
challenges.

Author: nidaqg

examples/rails-react-example/app/assets/stylesheets/application.scss

@@ -30,3 +30,8 @@ $extrabold:     700;
 
 @import "reset";
 @import "playbook";
+
+// To use Playbook tokens, you must import the relevant files as shown below
+// To view all available tokens, visit https://github.com/powerhome/playbook/tree/master/playbook/app/pb_kits/playbook/tokens
+// To see the tokens visually, see our docs here: https://playbook.powerapp.cloud/visual_guidelines
+@import "tokens/spacing";

examples/rails-react-example/app/javascript/components/App.tsx

@@ -4,6 +4,8 @@ import { CircleIconButton, Title } from "playbook-ui"
 
 import WebpackerReact from 'webpacker-react'
 
+// This is the main component that will be rendered in the Rails view if you choose to use React
+// This example showcases how to import and use Playbook components
 const App = () => {
   return (
     <div>

examples/rails-react-example/app/views/pages/index.html.erb

@@ -1,3 +1,9 @@
+<%# If choosing to use React components in Rails views, the following `react_component` helper is already set up. %>
+<%# Please use the components/App.tsx file to create your React components.%>
 <%= react_component("App") %>
 
+
+<%# If you want to use the Rails components only, you can use the following example: %>
+<%# Line 3 above can be deleted if choosing to use Rails components only. %>
+
 <%= pb_rails("button", props: { text: "Button Primary", margin_right: "lg" }) %>