Yeah, SPFx isn't available in older versions like 2010.
I have tried something like this (with SharePoint 2010), but instead of using React, I used Vue.js. I wasn't required to embed an existing app, but was able to start from scratch and I found for my needs, there was really only one viable option:
- Host your react app on a new SharePoint wiki page by editing the source code to include <link> tag references to the react library and the pre-built .js file(s) for your project.
You can use the content editor web part, but I found it suboptimal for when you're trying to enhance an existing page that already has webparts and other content on it; I resorted to just inserting a link directing users to a separate wiki page.
Because you're going with react, you can use a node.js build system like Webpack during development (but remove the local http server as SharePoint uses IIS); this allows you to use Typescript with type definition libraries, but your build scripts needs to automatically upload your built files to SharePoint after node.js processes them (however, there's a trick to do this, by mounting a document library as a network drive; see below).
Getting node.js + webpack to work on a SharePoint 2010 document library:
While this method does not need Visual Studio or even SharePoint Designer, it is a hack, and doesn't allow webpack hot reloading to work. BUT - it does allow you to treat a SharePoint page library as if it were a local folder, node.js can watch it and you can F5 in a browser and be able view at development time how your code interacts with SharePoint.
Unfortunately this won't always work if your farm administrator has disabled WebDav, which is required to get it to mount in Windows Explorer. You also need the WebClient service on your machine to be started. Also I've only tested this in Windows 7.
- Create a SharePoint wiki pages document library to use as a dev folder and mount it as a network drive, using Windows Explorer (e.g. http://sharepoint/site/SitePages/ would be mapped to R:\). You have to map it as a network drive so your command prompt or powershell can also mount it. Also there may be issues with getting this to work if you don't already control a SharePoint instance. An easy way to mount a SharePoint document library as a network drive is to visit it in IE and click on the button in the ribbon 'Open with Windows Explorer', and then mount it using the address Explorer gives you. Google can help you here.
- Use this R:\ drive as your development folder - setup a new webpack + react template in it, but disable any local http server in your webpack script, as you're using SharePoint, which uses IIS - you only want webpack to build your typescript+sass (etc). After you've mounted it as a network drive, point node.js to watch the drive, using npm run watch or whatever command is applicable to your project.
I'd also advise you don't init a git repo in your R:\ drive, as all the files in that drive are uploaded to SharePoint over HTTP.