JarCastingscala-js-react
Scala-js-react provides nice statically typed interface to Facebook's React.
Quickstart
For detailed sbt configuration please refer to scala.js documentation.
build.sbt
enablePlugins(ScalaJSPlugin)
scalaVersion := "2.11.5"
libraryDependencies ++= Seq(
"com.xored.scalajs" %%% "scalajs-react" % "0.3.3",
compilerPlugin("org.scalamacros" % "paradise" % "2.0.1" cross CrossVersion.full)
)
project/plugins.sbt
addSbtPlugin("org.scala-js" % "sbt-scalajs" % "0.6.0")
project/build.properties
sbt.version=0.13.7
Features
scala-js-react aims to support all Facebook React features.
scalax annotation
While Facebook React uses JSX, scala-js-react offers scalax support. Basically scalax allows to use Scala XML literals to build React DOM.
React DOM allows to put objects into attribute values, while scala.xml.UnprefixedAttribute constructor takes Seq[Node] or String. So we have to transform methods before it typechecks. That is why scalax scalax uses macro annotations and requires macro paradise compiler plugin.
object HelloMessage extends TypedReactSpec {
case class State()
case class Props(name: String)
def getInitialState(self: This) = State()
@scalax
def render(self: This) = {
<div>Hello {self.props.name}</div>
}
}
React.renderComponent(
HelloMessage(HelloMessage.Props(name = "John")),
mountNode
)
Internal State
A component can maintain internal state.
object Timer extends TypedReactSpec with TypedEventListeners {
case class Props()
case class State(secondsElapsed: Int, interval: Option[Int])
def getInitialState(self: This) = State(secondsElapsed = 0, interval = None)
implicit class Closure(self: This) {
import self._
val tick = () => {
setState(state.copy(secondsElapsed = state.secondsElapsed + 1))
}
}
override def componentDidMount(self: This) = {
val interval = window.setInterval(self.tick, 1000)
self.setState(self.state.copy(interval = Some(interval)))
}
override def componentWillUnmount(self: This) = {
self.state.interval.foreach(window.clearInterval)
}
@scalax
def render(self: This) = {
<div>Seconds Elapsed: {self.state.secondsElapsed}</div>
}
}
Typed listeners and closures
object Say extends TypedReactSpec with TypedEventListeners {
case class Props()
case class State(text: String)
implicit class Closure(self: This) {
import self._
val onChange = input.onChange(e => {
setState(state.copy(text = e.target.value))
})
val onClick = button.onClick(e => {
alert(state.text)
})
}
def getInitialState(self: This) = State(text = "")
@scalax
def render(self: This) = {
<div>
<input type="text" value={self.state.text} onChange={self.onChange}></input>
<button type="text" onClick={self.onClick}>Say</button>
</div>
}
}
How to run examples
$ sbt "project scalajs-react-examples" fastOptJS
$ open scalajs-react-examples/index.html
Copyright
Copyright © 2014 Xored Software, Inc.
Licensed under the Apache License, Version 2.0.
