Use Ionic with Rescript.
Install
npm i rescript-ionic @rescript/reactAdd the following your bs-dependencies in rescript.json
"bs-dependencies": [
"@rescript/core",
"@rescript/react",
"rescript-ionic"
]Open IonicRescript globally.
You can do this by adding the following bsc-flags to your rescript.json
{
"bsc-flags": [
"-open RescriptCore",
"-open RescriptIonic"
]
}Add JSX to rescript.json
"jsx": { "version": 4 },- At the beggining of each file were you use Ionic open the module
open IonicAnd you are all set! Now you can start creating Rescript files inside your Ionic project
First create a new project using the Ionic CLI
ionic start myApp blank --type=reactFollow the Getting Started section and then create the following files
App.res
open Ionic
%%raw(`
/* Core CSS required for Ionic components to work properly */
import '@ionic/react/css/core.css';
`)
setupIonicReact();
@react.component
let make = () => {
<IonApp>
<Home></Home>
</IonApp>
}
@react.component
let make = () => {
<IonApp>
<Home></Home>
</IonApp>
}Home.res
open Ionic
@react.component
let make = () => {
<IonPage>
<IonHeader translucent=true>
<IonToolbar>
<IonTitle>{"Home"->React.string}</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent>
<IonText>{"Welcome to Rescript Ionic!"->React.string}</IonText>
<IonButton>{"Click me"->React.string}</IonButton>
</IonContent>
</IonPage>
}Main.res
switch ReactDOM.querySelector("#root") {
| Some(container) =>
container
->ReactDOM.Client.createRoot
->ReactDOM.Client.Root.render(
<React.StrictMode>
<App />
</React.StrictMode>,
)
| None => ()
}Finally update your index.html to include the build file from Main.res
<script type="module" src="/src/Main.res.mjs"></script>Now open two terminals, in one run npm run res:dev and in the other npm run dev