One React Framework

Common errors

Warnings

Install

Imports

• config
  wrong

  const { defineConfig } = require('@one/vite-plugin');

  correct

  import { defineConfig } from '@one/vite-plugin';
  
  export default defineConfig({});

  Configuration is typically handled via a Vite plugin, which is ESM-only. The framework is designed around `defineConfig` for type-safety and best practices.

• App
  wrong

  import App from 'one'; // One typically provides a named export for the root App component.

  correct

  import { App } from 'one';
  
  function MyRootApp() {
    return <App initialRoute='/'>...</App>;
  }

  The primary application entry component is typically a named export, allowing for specific framework-level configurations or wrappers.

• useLoader
  wrong

  import { useLoader } from 'one'; // Incorrect subpath for server-side utilities.

  correct

  import { useLoader } from 'one/server';
  
  function MyComponent() {
    const data = useLoader((ctx) => {
      // Server-side data fetching logic
      return { message: 'Hello from loader!' };
    });
    return <p>{data.message}</p>;
  }

  Loaders, inspired by Remix, are a key feature for data fetching and are exposed from a dedicated `one/server` subpath, indicating their server-side or universal nature. Ensure explicit subpath imports for framework-specific utilities.

Quickstart

This quickstart demonstrates a basic 'One' application structure, including a root layout and a simple page component, configured for both web and native environments. It highlights the use of `App`, `View`, and `Text` components within the 'One' framework.

import { App, Text, View } from 'one';
import React from 'react';

// Define a root layout component that can adapt to web and native
function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <View style={{
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      padding: 20,
      backgroundColor: '#f0f0f0',
    }}>
      <Text style={{
        fontSize: 24,
        fontWeight: 'bold',
        marginBottom: 20,
        color: '#333'
      }}>
        Welcome to One!
      </Text>
      {children}
    </View>
  );
}

// Define a page component, e.g., for '/'
function HomePage() {
  return (
    <View>
      <Text style={{ fontSize: 18, color: '#555' }}>
        This is a hybrid web and native app.
      </Text>
      <Text style={{ fontSize: 16, marginTop: 10, color: '#777' }}>
        Edit src/app/index.tsx to get started.
      </Text>
    </View>
  );
}

// One framework entry point
export default function OneApp() {
  return (
    <App initialRoute="/">
      <RootLayout>
        {/* File-system based routing expects components in `src/app` */}
        {/* For demonstration, we'll render HomePage directly */}
        <HomePage />
      </RootLayout>
    </App>
  );
}