This project shows an example of using Elixirscript with React.

There is an Elixir module ,`R`, defined at `app/elixirscript/r.exjs` that creates macros that create React elements.

The module, `App`, defined at `app/elixirscript/app.exjs` uses these macros to create React elements thanks to React's ability to make stateless components. The rest of the module shows something

similar to the Elm architecture: Model, View, Update.

The model here is just a map with name and email fields. The model is saved within an Agent.

The update function is responsible for taking messages and using them to update the model. At the very end, it renders the new view.

The view is a function that creates HTML via React components. In the example, it also defines helper view functions to compose together the main view. This is less typical of something you would see in React and more like the patterns seen in Elm.

use R

def my_form(model) do

form do

input [type: "text", placeholder: "Name", onChange: &update(&1, :name), value: model.name]

input [type: "email", placeholder: "Email", onChange: &update(&1, :email), value: model.email]

end

end

def field(title, value) do

div do

"#{title}: #{value}"

end

end

div do

my_form(model)

field("Name", model.name)

field("Email", model.email)

end

defmacro __using__(_) do

quote do

JS.import React, "react"

JS.import ReactDOM, "react-dom"

import R

end

end