React's website is a great place to start looking if you need more info. Thinking in React is specially good if you're not very familiar with it: (from this link you can go through to the actual post).

Getting Started - React

How sharp are you with React and JS in general? I'd recommend looking up some foundation React so you have a better clue of what kind of approach React normally expect you to take

It might be more effective to use Requirements::customScript() on your controller though

The simplest way I can see to link SS data into React is to either use GraphQL or a JSON string that React can access once the page has rendered. eg, somewhere on your template have:

  1. <script>
  2. var data = Page.toMap();
  3. </script>

Your React components would be defined and compiled from JS files (eg Header.js exports a Header component). That JS is only ever run in the browser, where the template variables from SS will already have been resolved into their values.

I'm not 100% clear on what you mean @zkairys but from what I understand React shouldn't be able to get any of SS variables from the template