{"id":13506819,"url":"https://github.com/sultan99/react-on-lambda","last_synced_at":"2025-04-12T22:28:49.595Z","repository":{"id":34301980,"uuid":"175060977","full_name":"sultan99/react-on-lambda","owner":"sultan99","description":"A JavaScript library for building React applications in more functional way. Alternative to JSX.","archived":false,"fork":false,"pushed_at":"2024-05-08T02:23:53.000Z","size":1639,"stargazers_count":264,"open_issues_count":3,"forks_count":57,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-04T02:04:46.658Z","etag":null,"topics":["fp","lambda","no-jsx","react"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sultan99.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-03-11T18:31:46.000Z","updated_at":"2024-08-18T09:37:13.000Z","dependencies_parsed_at":"2024-05-08T03:36:52.037Z","dependency_job_id":null,"html_url":"https://github.com/sultan99/react-on-lambda","commit_stats":{"total_commits":68,"total_committers":3,"mean_commits":"22.666666666666668","dds":"0.27941176470588236","last_synced_commit":"47471f5f65b0b52f3d027efa81b42473799f8f40"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sultan99%2Freact-on-lambda","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sultan99%2Freact-on-lambda/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sultan99%2Freact-on-lambda/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sultan99%2Freact-on-lambda/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sultan99","download_url":"https://codeload.github.com/sultan99/react-on-lambda/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248637769,"owners_count":21137538,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["fp","lambda","no-jsx","react"],"created_at":"2024-08-01T01:00:58.335Z","updated_at":"2025-04-12T22:28:49.575Z","avatar_url":"https://github.com/sultan99.png","language":"JavaScript","readme":"\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/sultan99/react-on-lambda/raw/gh-pages/logo.svg?sanitize=true\" width=\"110\" height=\"110\"/\u003e\n  \u003cbr/\u003e\n  \u003cbr/\u003e\n  \u003cbr/\u003e\n  \n  \u003cimg src=\"https://raw.githubusercontent.com/sultan99/react-on-lambda/gh-pages/assets/comics.png\"/\u003e\n\u003c/div\u003e\n\n\u003cbr/\u003e\n\u003cbr/\u003e\n\n# React on lambda\n![GitHub package.json version](https://img.shields.io/github/package-json/v/sultan99/react-on-lambda.svg)\n[![Coverage Status](https://coveralls.io/repos/github/sultan99/react-on-lambda/badge.svg)](https://coveralls.io/github/sultan99/react-on-lambda)\n![npm bundle size](https://img.shields.io/bundlephobia/minzip/react-on-lambda?label=gzip%20size\u0026color=green)\n![NPM Downloads](https://img.shields.io/npm/dm/react-on-lambda)\n![GitHub License](https://img.shields.io/github/license/sultan99/react-on-lambda)\n\n\u003e A tiny library that simplifies the use of [React](https://github.com/facebook/react) without JSX.\n\n\u003cbr/\u003e\n\nJSX has simple, declarative and html-like syntax, nice extension to ECMAScript.\nUnfortunately, despite these cool features you deal with text.\nMost of time you find yourself doing js code inside html, and inside that html you make again another js code and so on.\nIn order to reuse some jsx fragments you have to wrap them by functions. Then you may come to the main question:\n\n#### Why not just use functions instead of jsx strings?\n\nAnd get all benefits of functional programming:\n - splitting code into more reusable parts\n - curry and function composition\n - easier testing and debugging\n - compact and clean code\n \n\u003cbr/\u003e\n\n## Features\n- fun functional programming\n- output bundle size less ~22% than JSX\n- faster render and mount up to ~10% than JSX\n- smooth integration to an existing React project with JSX\n- no transpiler necessary, can be run directly in browser\n\n\u003cbr/\u003e\n\n## Benchmarks\n[The project](https://github.com/sultan99/rol-vs-jsx) includes two applications written using \nReact on lambda and JSX for comparisons.\n\nThe follow results were gained:\n\n**Render performance**\n- React on lambda: `8.50ms`\n- JSX: `9.97ms`\n\nMost of time RoL showed faster results from **3%** up to **10%** than JSX version.\n\u003cbr/\u003e\n\n**Bundle size**\n- React on lambda: `2.03KB`\n- JSX: `2.57KB`\n\nRoL bundle size is less than JSX version 26%, but here we need to take an account the library size: `2.77KB`.\n\nSo the real advantage will be if the application size is larger than `11KB`.\n\n\u003cbr/\u003e\n\n## Examples\nReact on lambda demo projects:\n\n[Table component](https://github.com/sultan99/rol-table) is example of stateless components and function compositions.\n\nA live demo at [codesandbox](https://codesandbox.io/s/jjlo9m5jq5).\n\nTodos application:\n - [master branch](https://github.com/sultan99/rol-todos) - redux \u0026 ramda\n - [hooks branch](https://github.com/sultan99/rol-todos/tree/hooks) - no state management\n\n\u003cbr/\u003e\n\nRead more info about symbol `λ` in the section: [editor configuration](#editor-configuration).\n\n```js\nimport λ from 'react-on-lambda' // or import l from 'react-on-lambda'\nimport {render} from 'react-dom'\n\nconst postLink = λ.a({href: `/posts/123`})\n\nconst title = λ.compose(\n  λ.h1({class: `post-title`}), // or λ.h1({className: `post-title`})\n  postLink\n)\n\nconst post = λ.div(\n  title(`How to use react on lambda?`),\n  λ.p(`\n    Lorem ipsum dolor sit amet,\n    Ernestina Urbanski consectetur adipiscing elit.\n    Ut blandit viverra diam luctus luctus...\n  `),\n  postLink(`Read more`)\n)\n\nrender(\n  post,\n  document.getElementById(`app`)\n)\n```\n\u003cbr/\u003e\n\n## Getting started\nThe primary you will need to install `react-on-lambda` and `react`:\n\n```sh\n$ npm i react-on-lambda react -S\n```\n\noptionally you can install `styled-components` if you are going to use it:\n\n```sh\n$ npm i styled-components -S\n```\n\u003cbr/\u003e\n\n## API documentation\n\n**Creating element and component**\n\n```js\nimport λ, {div} from 'react-on-lambda'\n\ndiv(`Hello world!`)\n// jsx equivalent\n\u003cdiv\u003eHello world!\u003c/div\u003e\n\nλ.section({class: `sample`}, `Hello world!`)\n// jsx equivalent\n\u003csection className=\"sample\"\u003eHello world!\u003c/section\u003e\n\nλ(Provider, {store}, app)\n// jsx equivalent\n\u003cProvider store={store}\u003e\u003cApp/\u003e\u003c/Provider\u003e\n```\n\n\u003cbr/\u003e\n\n**Currying function**\n\nEndless currying until `children` or empty parameter is applied to the function.\n\n```js\nconst onClick = () =\u003e {} // just for demo\n\nconst span = λ.span({className: `tag`})({color: green})({size: `large`}) // -\u003e function\nspan()\n// jsx equivalent\n\u003cspan className=\"tag\" color=\"green\" size=\"large\"/\u003e\n\nconst btnPrimary = λ.button({primary: true}) // -\u003e function\nbtnPrimary({onClick}, `Save`)\n// jsx equivalent\n\u003cbutton primary onClick={onClick}\u003eSave\u003c/button\u003e\n```\n\nSo with currying you can predefine some properties of components.\n\nOr even you can override properties later.\n\n```js\nconst span = λ.span({size: `large`}) // -\u003e function\nspan({size: `small`}, `Sorry we changed our mind`)\n// jsx equivalent\n\u003cspan size=\"small\"\u003eSorry we changed our mind\u003c/span\u003e\n```\n\n\u003cbr/\u003e\n\n**Styling**\n\n`λ` wraps [styled-components](https://github.com/styled-components/styled-components) \nand returns a function. \n\u003eInstallation of styled-components is optional\n\n```js\nimport λ from 'react-on-lambda'\n\nconst header = λ.h1`\n  color: #ff813f;\n  font-size: 22px;\n`\n\nconst onClick = () =\u003e alert(`Hi!`)\n\nconst app = λ.div(\n  header(`Welcome to React on λamda!`),\n  λ.button({onClick}, `OK`)\n)\n\nexport default app\n```\n\u003cbr/\u003e\n\n**Function mapKey**\n```js\nconst pages = [`Home page`, `Portfolio`, `About`]\n\nλ.ul(\n  λ.mapKey(λ.li, pages)\n)\n\n// jsx equivalent\n\u003cul\u003e\n  {pages.map((item, key) =\u003e\n    \u003cli key={key}\u003e\n      {item}\n    \u003c/li\u003e\n  )}\n\u003c/ul\u003e\n```\n\u003cbr/\u003e\n\n**Composition**\n```js\nconst data = [\n  {id: 123, name: `Albert`, surname: `Einstein`},\n  {id: 124, name: `Daimaou `, surname: `Kosaka`},\n]\n\nconst userList = λ.compose(\n  λ.div({class: `followers`}),\n  λ.ul,\n  λ.mapKey(λ.li),\n  λ.mapProps({key: `id`, children: `name`})\n)\n\nuserList(data)\n\n// jsx equivalent\nconst UserList = props =\u003e (\n  \u003cdiv className=\"followers\"\u003e\n    \u003cul\u003e\n      {props.data.map(user =\u003e\n        \u003cli key={user.id}\u003e\n          {user.name}\n        \u003c/li\u003e\n      )}\n    \u003c/ul\u003e\n  \u003c/div\u003e\n)\n\n\u003cUserList data={data}/\u003e\n```\n\u003cbr/\u003e\n\n**Nesting**\n```js\nconst postPage = λ.nest(\n  λ.main({class: `app`}),\n  λ.section,\n  λ.article(`\n    Lorem ipsum dolor sit amet,\n    Ernestina Urbanski consectetur adipiscing elit.\n    Ut blandit viverra diam luctus luctus...\n  `),\n)\n\n// jsx equivalent\nconst PostPage = () =\u003e (\n  \u003cmain className=\"app\"\u003e\n    \u003csection\u003e\n      \u003carticle\u003e\n        Lorem ipsum dolor sit amet,\n        Ernestina Urbanski consectetur adipiscing elit.\n        Ut blandit viverra diam luctus luctus...\n      \u003c/article\u003e\n    \u003c/section\u003e\n  \u003c/main\u003e\n)\n```\n\u003cbr/\u003e\n\n**Debug**\n\n```js\nconst userList = λ.compose(\n  λ.div,\n  λ.ul,\n  λ.log(`after mapping`), // -\u003e will log piping value\n  λ.mapKey(λ.li)\n)\n```\n\n\u003cbr/\u003e\n\n## Editor configuration\n\u003e Code highlighting in Atom\n\n\u003cimg src=\"https://raw.githubusercontent.com/sultan99/react-on-lambda/gh-pages/assets/snippet-atom.png\" style=\"border-radius: 4px;\"/\u003e\n\u003cbr/\u003e\n\nPersonally I hate to use symbols `$` `_` it makes code look dirty and reminds me [Perl](https://regmedia.co.uk/2017/10/31/perl_code_example.png) or regular expression.\nI prefer to use Greek letter `λ` – short and meaningful.\n\nOf course you can use any identifier at your own choice:\n```js\nimport l from 'react-on-lambda'\n// or \nimport {div, h1} from 'react-on-lambda'\n\n```\n\nIf you like to try using `λ` you can setup hot key and CSS syntax highlighting following the instructions bellow:\n- [Github Atom](./docs/atom.md)\n- Microsoft VS Code (will be provided)\n\n\u003cbr/\u003e\n\u003cbr/\u003e\n\n## Feedback \nAny questions or suggestions?\n\nYou are welcome to discuss it on:\n\n[![Gitter](https://badges.gitter.im/react-on-lambda/community.svg)](https://gitter.im/react-on-lambda/community?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge)\n[![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/sultan_arziev)\n\n\u003cbr/\u003e\n\u003cbr/\u003e\n\n\u003ca href=\"https://www.buymeacoffee.com/KGEzqayNQ\" target=\"_blank\"\u003e\n  \u003cimg src=\"https://www.buymeacoffee.com/assets/img/guidelines/download-assets-sm-2.svg\" alt=\"Buy Me A Coffee\"/\u003e\n\u003c/a\u003e\n","funding_links":["https://www.buymeacoffee.com/KGEzqayNQ"],"categories":["Project Logo","Recently Updated","Libraries","Examples"],"sub_categories":["[Jan 22, 2025](/content/2025/01/22/README.md)"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsultan99%2Freact-on-lambda","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsultan99%2Freact-on-lambda","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsultan99%2Freact-on-lambda/lists"}