Further maintenance of the repo can be found here:
Develop React applications with Scala. It is compatible with Scala 2.12 and Scala.js 0.6.14.
Optionally include react-router and react-redux facades, too.
import io.github.shogowada.scalajs.reactjs.VirtualDOM._
import io.github.shogowada.scalajs.reactjs.{React, ReactDOM}
import org.scalajs.dom
case class WrappedProps(name: String)
val reactClass = React.createClass[WrappedProps, Unit](
(self) => <.div(^.id := "hello-world")(s"Hello, ${self.props.wrapped.name}!")
)
val mountNode = dom.document.getElementById("mount-node")
ReactDOM.render(<(reactClass)(^.wrapped := WrappedProps("World"))(), mountNode)
You can also directly render without creating a React class:
import io.github.shogowada.scalajs.reactjs.ReactDOM
import io.github.shogowada.scalajs.reactjs.VirtualDOM._
import org.scalajs.dom
val mountNode = dom.document.getElementById("mount-node")
ReactDOM.render(<.div(^.id := "hello-world")("Hello, World!"), mountNode)
- Apply scalajs-bundler plugin.
- Depend on the libraries.
libraryDependencies ++= Seq( "io.github.shogowada" %%% "scalajs-reactjs" % "0.14.0", // For react facade "io.github.shogowada" %%% "scalajs-reactjs-router-dom" % "0.14.0", // Optional. For react-router-dom facade "io.github.shogowada" %%% "scalajs-reactjs-router-redux" % "0.14.0", // Optional. For react-router-redux facade "io.github.shogowada" %%% "scalajs-reactjs-redux" % "0.14.0", // Optional. For react-redux facade "io.github.shogowada" %%% "scalajs-reactjs-redux-devtools" % "0.14.0" // Optional. For redux-devtools facade )
- Basics
- TODO App
- Router
- Redux
- Redux Middleware
- Router Redux
- Redux DevTools
- I don't like
<
and^
. How can I change them?
- ReactCrop: Crop an image