{"library":"one","title":"One React Framework","description":"One is an innovative React framework designed to unify web and native application development from a single codebase, leveraging Vite as its core bundler for both environments. Currently at version 1.15.10, it integrates with React 19.2.0 and React Native 0.83.2. This framework aims to simplify full-stack development by providing features like typed file-system routing, per-page render modes (SPA, SSR, SSG), and loaders, abstracting away complex platform-specific configurations and build processes. Its key differentiator is a focus on a cohesive, performant developer experience for hybrid apps, aiming to replace traditional setups involving Metro for native and separate web frameworks. One originated from the experience of building cross-platform apps with Tamagui Takeout and at Uniswap, highlighting its practical, production-oriented approach.","language":"javascript","status":"active","last_verified":"Thu Apr 23","install":{"commands":["npm install one"],"cli":null},"imports":["import { defineConfig } from '@one/vite-plugin';\n\nexport default defineConfig({});","import { App } from 'one';\n\nfunction MyRootApp() {\n  return <App initialRoute='/'>...</App>;\n}","import { useLoader } from 'one/server';\n\nfunction MyComponent() {\n  const data = useLoader((ctx) => {\n    // Server-side data fetching logic\n    return { message: 'Hello from loader!' };\n  });\n  return <p>{data.message}</p>;\n}"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import { App, Text, View } from 'one';\nimport React from 'react';\n\n// Define a root layout component that can adapt to web and native\nfunction RootLayout({ children }: { children: React.ReactNode }) {\n  return (\n    <View style={{\n      flex: 1,\n      justifyContent: 'center',\n      alignItems: 'center',\n      padding: 20,\n      backgroundColor: '#f0f0f0',\n    }}>\n      <Text style={{\n        fontSize: 24,\n        fontWeight: 'bold',\n        marginBottom: 20,\n        color: '#333'\n      }}>\n        Welcome to One!\n      </Text>\n      {children}\n    </View>\n  );\n}\n\n// Define a page component, e.g., for '/'\nfunction HomePage() {\n  return (\n    <View>\n      <Text style={{ fontSize: 18, color: '#555' }}>\n        This is a hybrid web and native app.\n      </Text>\n      <Text style={{ fontSize: 16, marginTop: 10, color: '#777' }}>\n        Edit src/app/index.tsx to get started.\n      </Text>\n    </View>\n  );\n}\n\n// One framework entry point\nexport default function OneApp() {\n  return (\n    <App initialRoute=\"/\">\n      <RootLayout>\n        {/* File-system based routing expects components in `src/app` */}\n        {/* For demonstration, we'll render HomePage directly */}\n        <HomePage />\n      </RootLayout>\n    </App>\n  );\n}\n","lang":"typescript","description":"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}