@onejs-dev/components NPM

A functional, JavaScript only, cross platform framework. oneJS is a next generation, open source JavaScript framework for building modern apps for web and mobile from a single codebase. oneJS is not owned by any Tech Giant; it is an independent project developed by contributors from all around the world. oneJS is based on three principles:

Functional: Predictable, code efficient and easily testable. Pure functions are the building blocks of oneJS. Fall in love with the functional programming paradigm ❤️.
JS Only. Really: You can write your entire app in pure Vanilla JS or Typescript. That's right, not a single line of HTML, CSS or JSX needed. Can you believe it?
Cross Platform: Write the same code for web and native apps. Simplicity is our true cross platform weapon; reduce your effort and multiply your reach! Powered by React and React Native's new architecture.

🗂️ Repository: components

A component is a function that receives properties and returns a structure that can be rendered on the screen. This repository contains all the components offered out of the box by oneJS and functions to create your own. Head to the docs section to discover all the comopnents you can import.

🚀 Get Started

Open your terminal window and navigate to the folder that will contain your app. Once there type the command below:

npx @onejs-dev/create-app

Follow the instructions in the terminal to setup your app. Once ready, type the start command:

npm start

Visit the Start! section of our website for more in depth content.

🧪 Example

Our best publicity is our own code. The example below is our version of the "Hello World!" staple:

/* Imports: Required modules to setup the app ================================================== */
import { app, read, update } from "@onejs-dev/core";
import { Text, View, Input } from "@onejs-dev/components";

/* State: Variable declaration  ================================================================= */
const state = { name: "World" };

/* App Component: Returns the structure to be rendered ========================================== */
const AppComponent = () => {
    return View({ content: { h: "center", v: "center", direction: "column" } })([
        Text({ style: { fontSize: 22, paddingBlock: 60 } })(`Hello ${read("name")}!`),
        Input({ type: "text", value: read("name"), onChange: update("name") })
    ]);
};

/* App Function: Renders the App Component in the screen ======================================== */
app({component: AppComponent, theme: {preset: "oneJS"}, state: state });

100% JavaScript as promised. You won’t have to write a single line in any other language.

Use the online Playground to put your skills to test.

📖 Documentation

The full oneJS documentation can be found on our website.

You do not require extensive JavaScript knowledge to become an expert in oneJS; the learn section will take you from zero to hero! It is composed of several units, each focusing on a key topic.