Scala.js Facade for React, React-router, and React-redux

scalajs-reactjs

** ⚠️ This project is not maintained anymore, and I’m looking for a kind person who can take it over from me.** If you can inherit this project, please send a pull request to this README.md linking to your project so that we can direct people to the new home.

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.

Quick Look

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)

How to Use

  1. Apply scalajs-bundler plugin.

  2. 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
    )
    
    

Examples

Reusable Components

Download Details:

Author: shogowada

Source Code: https://github.com/shogowada/scalajs-reactjs

#react #reactjs #javascript

Scala.js Facade for React, React-router, and React-redux
12.30 GEEK