shogowada/scalajs-reactjs

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:

• scommons/scalajs-reactjs

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

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

Reusable Components

• ReactCrop: Crop an image

scalajs-reactjs's Issues

Migrate react-router to v4.x

See https://reacttraining.com/react-router/web/guides/quick-start for details

Create ReactClassBuilder

Many developers are more comfortable writing functions than classes. Create ReactClassBuilder that lets you create ReactClass purely by composing functions.

Draft (incomplete and highly likely to change, but just to demonstrate the idea):

case class ReactClassContext[WrappedProps, State](
  native: js.Dynamic,
  props: Props[WrappedProps],
  state: State
) {
  def setState(state: State): Unit = // ...
}

val reactClass: ReactClass =
    ReactClassBuilder[Props, State]()
        .shouldComponentUpdate((context: ReactClassContext[WrappedProps, State], nextContext: ReactClassContext[WrappedProps, State]) => Boolean)
        .render((context: ReactClassContext[WrappedProps, State]) => ReactElement)
        .build

Create facade for react-router-redux

Create facade of react-router-redux once it's out of beta.

Migrate to React.Component from React.createClass

React.createClass is deprecated since v15.5.0. Migrate to React.Component so that it will be ready for v16.

Fix signature of Provider for react-redux facade

The provider must take only one ReactElement, but the signature is taking multiple. Change the signature so that it only takes one ReactElement.

Current signature:

def Provider(store: Store)(children: js.Any*): ReactElement

Desired signature:

def Provider(store: Store)(child: ReactElement): ReactElement

Migrate to create-react-class from React.createClass

React.createClass is deprecated since v15.5.0. Migrate to create-react-class module so that it will be ready for v16.

This is a short-term solution without making much change. Eventually, we need to migrate to React.Component (#23).

Support Redux middlewares

http://redux.js.org/docs/advanced/Middleware.html

Support all the React events

https://facebook.github.io/react/docs/events.html#supported-events

Please add a project definition to the examples

It's really hard to open/run your examples without any project definition (sbt, maven, ...).

Can you please add one? At least for one of the projects (e.g. redux).

Optimize shouldComponentUpdate

Right now, it's always returning true. Optimize the method so that it does the equivalent of the native React: shallow comparison of old props and new props and old state and new state.

How do I run/compile one of your examples?

Can you add some hints how to run/compile one of your example projects?

Add cross-compilation for scala 2.13.x and scala-js 1.x

Support creating a stateless component with functions

Create Reducer[State] trait

Many find it easier to test with dependency injection. One of the ways to achieve dependency injection is to inject dependencies to class's constructor.

Create the following trait:

trait Reducer[State] {
  def apply(maybeState: Option[State], action: Action): State
}

And add the following method to Redux facade:

def createStore[State](reducer: Reducer[State]): Store

Support all the component methods

https://facebook.github.io/react/docs/react-component.html

Add Redux facade