Develop React applications with Scala.

It is compatible with Scala 2.13+, Scala.js 1.5+ and with React.js v17+.

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)

1. Apply scalajs-bundler plugin.
2. Depend on the libraries.

   libraryDependencies ++= Seq(
     "org.scommons.shogowada" %%% "scalajs-reactjs-core" % [version],          // For react facade
     "org.scommons.shogowada" %%% "scalajs-reactjs-dom" % [version],           // For react-dom facade
   
     "org.scommons.shogowada" %%% "scalajs-reactjs-router-dom" % [version],    // Optional. For react-router-dom facade
     "org.scommons.shogowada" %%% "scalajs-reactjs-redux" % [version],         // Optional. For react-redux facade
     "org.scommons.shogowada" %%% "scalajs-reactjs-redux-devtools" % [version] // Optional. For redux-devtools facade
   )
   

• Basics
• TODO App
• Router
• Redux
• Redux Middleware
• Redux DevTools
• I don't like < and ^. How can I change them?

• ReactCrop: Crop an image