cxa / Ppx_bsx
Licence: mit
OCaml JSX for ReasonReact
Stars: ✭ 69
Programming Languages
ocaml
1615 projects
Labels
Projects that are alternatives of or similar to Ppx bsx
Jsx Lite
Write components once, run everywhere. Compiles to Vue, React, Solid, Angular, Svelte, and Liquid.
Stars: ✭ 1,015 (+1371.01%)
Mutual labels: jsx
Js Toolbox
CLI tool to simplify the development of JavaScript apps/libraries with little to no configuration. (WORK IN PROGRESS/PACKAGE NOT PUBLISHED).
Stars: ✭ 53 (-23.19%)
Mutual labels: jsx
Instrinsicreactjsx
example for kontraktor react/jsx SPA without nodejs (java implementation of jsx, npm and bundling)
Stars: ✭ 61 (-11.59%)
Mutual labels: jsx
React Es6 Padawan To Jedi Book
Uma introdução simples e completa para React usando ES6 e Babel.
Stars: ✭ 46 (-33.33%)
Mutual labels: jsx
Universal React Demo
ES6 demo of a simple but scalable React app with react-router, code splitting, server side rendering, and tree shaking.
Stars: ✭ 50 (-27.54%)
Mutual labels: jsx
Recontainers
[DEPRECATED] ReasonReact utilitary high order components
Stars: ✭ 54 (-21.74%)
Mutual labels: reason-react
Rich Text To Jsx
📄 Opinionated JSX renderer for the Contentful rich text field type.
Stars: ✭ 39 (-43.48%)
Mutual labels: jsx
React Native Hotels App
⛺️ Hotels App: A simple react-native App exercise with nodeJS API consumption
Stars: ✭ 50 (-27.54%)
Mutual labels: jsx
Calendar Graph
Calendar graph like github using jsx support SVG, Canvas and SSR
Stars: ✭ 58 (-15.94%)
Mutual labels: jsx
Inferno Most Fp Demo
A demo for the ReactJS Tampa Bay meetup showing how to build a React+Redux-like architecture from scratch using Inferno, Most.js, reactive programmning, and various functional programming tools & techniques
Stars: ✭ 45 (-34.78%)
Mutual labels: jsx
Pragma
Pragma is a self-hosted, open-source, personal note taking app.
Stars: ✭ 39 (-43.48%)
Mutual labels: reason-react
Rescript React Navigation
ReScript bindings for React Navigation
Stars: ✭ 54 (-21.74%)
Mutual labels: reason-react
Component Playground
A component for rendering React components with editable source and live preview
Stars: ✭ 1,148 (+1563.77%)
Mutual labels: jsx
Markdown To Jsx
🏭 The most lightweight, customizable React markdown component.
Stars: ✭ 1,079 (+1463.77%)
Mutual labels: jsx
ppx_bsx
OCaml JSX for ReasonReact.
Install
ppx_bsx
depends on ppx_lib
, which means that ppx_bsx
doesn't support bs-platform
5.x, so first step is configuring your project to "bs-platform": "^6.0.1"
.
Install ppx_bsx
with opam
or esy
, and add ppx_bsx
executable to bs-config.json
:
{
"ppx-flags": [
"./_opam/bin/ppx_bsx",
"./node_modules/bs-platform/lib/bsppx.exe -bs-jsx 3"
]
}
Replace ./_opam/bin/ppx_bsx
to actual ppx_bsx
installed path.
Example: https://github.com/cxa/ppx_bsx_example.
Basic Usage
This is how it feel:
[%bsx "
<Container>
<h1>Nice example</h1>
<nav className="(styles "sidebar")">
This is sidebar
</nav>
<div className="(styles "content")">
"(React.string {j|这是主内容|j})"
</div>
</Container>
"]
Simple Rules
- Break
[%bsx ""]
into[%bsx " "]
and ignore the first and last quotation marks. - When you need OCaml expression, wrap it with double quotation marks, otherwise
- For string literal value, just use single quotation marks
- For single text node, you don't need to wrap it to
ReasonReact.string
, (surprisedly)<span>Hello, World</span>
is accepted - Single text
{|你好|}
(but notexpr {|你好|}
) will be transformed to{j|你好|j}
automatically
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].