[React 19] Update OSS package imports for consistency (#1944)

Why
Pro package uses named imports but OSS still used namespace imports,
creating inconsistency across the codebase.

Summary
Converts 3 OSS files from namespace imports (import * as React) to
named imports (createElement, isValidElement), matching Pro package
style and React 19 best practices.

Key improvements
- Eliminates React namespace references in favor of direct imports
- Improves tree-shaking by explicitly importing only what's used
- Achieves full codebase consistency between OSS and Pro packages

Impact
Existing: No changes - both import styles work identically
New: OSS package follows same pattern as Pro package

Risks
None. Import style change only, no runtime behavior differences.

Author: justin808

packages/react-on-rails/src/createReactOutput.ts

@@ -1,13 +1,13 @@
-import * as React from 'react';
+import { createElement, isValidElement, type ReactElement } from 'react';
 import type { CreateParams, ReactComponent, RenderFunction, CreateReactOutputResult } from './types/index.ts';
 import { isServerRenderHash, isPromise } from './isServerRenderResult.ts';
 
 function createReactElementFromRenderFunctionResult(
   renderFunctionResult: ReactComponent,
   name: string,
   props: Record<string, unknown> | undefined,
-): React.ReactElement {
-  if (React.isValidElement(renderFunctionResult)) {
+): ReactElement {
+  if (isValidElement(renderFunctionResult)) {
     // If already a ReactElement, then just return it.
     console.error(
       `Warning: ReactOnRails: Your registered render-function (ReactOnRails.register) for ${name}
@@ -19,7 +19,7 @@ work if you return JSX. Update by wrapping the result JSX of ${name} in a fat ar
   }
 
   // If a component, then wrap in an element
-  return React.createElement(renderFunctionResult, props);
+  return createElement(renderFunctionResult, props);
 }
 
 /**
@@ -88,5 +88,5 @@ export default function createReactOutput({
     return createReactElementFromRenderFunctionResult(renderFunctionResult, name, props);
   }
   // else
-  return React.createElement(component as ReactComponent, props);
+  return createElement(component as ReactComponent, props);
 }

packages/react-on-rails/src/handleError.ts

@@ -1,11 +1,11 @@
-import * as React from 'react';
+import { createElement } from 'react';
 import { renderToString } from './ReactDOMServer.cts';
 import type { ErrorOptions } from './types/index.ts';
 import generateRenderingErrorMessage from './generateRenderingErrorMessage.ts';
 
 const handleError = (options: ErrorOptions): string => {
   const msg = generateRenderingErrorMessage(options);
-  const reactElement = React.createElement('pre', null, msg);
+  const reactElement = createElement('pre', null, msg);
   return renderToString(reactElement);
 };
 

packages/react-on-rails/src/serverRenderReactComponent.ts

@@ -1,5 +1,4 @@
-import * as React from 'react';
-import type { ReactElement } from 'react';
+import { isValidElement, type ReactElement } from 'react';
 
 // ComponentRegistry is accessed via globalThis.ReactOnRails.getComponent for cross-bundle compatibility
 import createReactOutput from './createReactOutput.ts';
@@ -69,7 +68,7 @@ function processPromise(
     return '{}';
   }
   return result.then((promiseResult) => {
-    if (React.isValidElement(promiseResult)) {
+    if (isValidElement(promiseResult)) {
       return processReactElement(promiseResult);
     }
     return promiseResult;