Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/shogowada/scalajs-reactjs
Scala.js facade for react, react-router, and react-redux
https://github.com/shogowada/scalajs-reactjs
react react-redux react-router redux scala scalajs
Last synced: 2 months ago
JSON representation
Scala.js facade for react, react-router, and react-redux
- Host: GitHub
- URL: https://github.com/shogowada/scalajs-reactjs
- Owner: shogowada
- License: mit
- Created: 2016-10-02T11:43:29.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2021-02-10T12:34:15.000Z (almost 4 years ago)
- Last Synced: 2024-09-29T00:20:34.451Z (3 months ago)
- Topics: react, react-redux, react-router, redux, scala, scalajs
- Language: Scala
- Homepage:
- Size: 313 KB
- Stars: 28
- Watchers: 1
- Forks: 8
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: history/src/main/scala/io/github/shogowada/scalajs/history/History.scala
- License: LICENSE
Awesome Lists containing this project
README
# 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](https://github.com/scommons/scalajs-reactjs)
[](https://travis-ci.org/shogowada/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
```scala
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:
```scala
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](https://scalacenter.github.io/scalajs-bundler/getting-started.html) 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](/example)
- [TODO App](/example/todo-app/src/main/scala/io/github/shogowada/scalajs/reactjs/example/todoapp/Main.scala)
- [Router](/example/routing/src/main/scala/io/github/shogowada/scalajs/reactjs/example/router/Main.scala)
- [Redux](/example/todo-app-redux/src/main/scala/io/github/shogowada/scalajs/reactjs/example/todoappredux)
- [Redux Middleware](/example/redux-middleware/src/main/scala/io/github/shogowada/scalajs/reactjs/example/redux/middleware/Main.scala)
- [Router Redux](/example/router-redux/src/main/scala/io/github/shogowada/scalajs/reactjs/example/router/redux/Main.scala)
- [Redux DevTools](/example/redux-devtools/src/main/scala/io/github/shogowada/scalajs/reactjs/example/redux/devtools/Main.scala)
- [I don't like `<` and `^`. How can I change them?](/example/custom-virtual-dom)
## Reusable Components
- [ReactCrop](https://github.com/shogowada/scalajs-reactjs-image-crop): Crop an image