[React 19] Update OSS package imports for consistency with Pro

This PR updates the open-source package to use the same import pattern
as the Pro package, ensuring consistency across the codebase.

## Changes

Changed from namespace imports to named imports in 3 OSS files:

**Before (inconsistent with Pro):**
```typescript
import * as React from 'react';
React.createElement()
React.isValidElement()
```

**After (consistent with Pro):**
```typescript
import { createElement, isValidElement } from 'react';
createElement()
isValidElement()
```

### Files Updated

1. `packages/react-on-rails/src/createReactOutput.ts`
   - `React.createElement` → `createElement`
   - `React.isValidElement` → `isValidElement`
   - `React.ReactElement` type → `ReactElement` type

2. `packages/react-on-rails/src/handleError.ts`
   - `React.createElement` → `createElement`

3. `packages/react-on-rails/src/serverRenderReactComponent.ts`
   - `React.isValidElement` → `isValidElement`
   - Consolidated duplicate ReactElement import

## Why This Matters

**Consistency:** Pro package (PR #1943) uses named imports. This brings OSS in line.

**React 19 Best Practice:** Named imports are the recommended pattern for React 19:
- Better tree-shaking
- Clearer dependencies
- More explicit code

**No Breaking Changes:** Both patterns work with React 18 and 19.

## Testing

✅ Builds successfully
✅ All existing tests pass
✅ No API changes
✅ Runtime behavior unchanged

## Dependencies

- Independent of PR #1942 and #1943
- Can merge in any order
- Purely a code style/consistency improvement

## Impact

- ✅ Improves codebase consistency
- ✅ Follows React 19 best practices
- ✅ No breaking changes
- ✅ Works with React 18 and 19

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: justin808

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

@@ -1,13 +1,13 @@
-import * as React from 'react';
+import React, { 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);
 }
 
 /**

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;