https://github.com/mvillafuertem/scalajs-react-world
👌 Scala.js Real World Apps 📱 No More Hello World 🌍
https://github.com/mvillafuertem/scalajs-react-world
react react-native scalajs
Last synced: 9 months ago
JSON representation
👌 Scala.js Real World Apps 📱 No More Hello World 🌍
- Host: GitHub
- URL: https://github.com/mvillafuertem/scalajs-react-world
- Owner: mvillafuertem
- Created: 2020-09-10T13:45:14.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2022-08-30T15:47:33.000Z (almost 4 years ago)
- Last Synced: 2025-04-13T02:15:18.853Z (about 1 year ago)
- Topics: react, react-native, scalajs
- Language: Scala
- Homepage:
- Size: 29.6 MB
- Stars: 7
- Watchers: 2
- Forks: 1
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
:warning: PLEASE, DO NOT EDIT THIS FILE.
IT IS AUTOGENERATE YOU SHOULD EDIT `modules/docs/src/main/mdoc/README.md`
WITH THE COMMAND `sbt docs/mdoc`
---
Scala.js React World
[](https://github.com/mvillafuertem/scalajs-react-world/actions?query=workflow%3A%22scalaci%22)
[](https://www.scala-js.org)
[](https://reactjs.org)
[](https://www.oracle.com/technetwork/java/javase/11all-relnotes-5013287.html)
[](https://github.com/sbt/sbt/releases)
[](https://github.com/scala-steward-org/scala-steward)
## Real World Examples
### [Calendar](https://mvillafuertem.github.io/scalajs-react-world/calendar/)
[Calendar](https://mvillafuertem.github.io/scalajs-react-world/calendar/) is
inspired by [microsoft graph training](https://github.com/microsoftgraph/msgraph-training-reactspa)
```shell
sbt calendar
```
### Chat
#### Backend Development
```shell script
sbt "project chat-backend; ~reStart"
```
#### Frontend Development
```shell script
sbt chat-frontend
```
#### Docker
```shell script
sbt "chat-release;chat-backend/docker:publishLocal" && \
docker run --rm -p 8080:8080 user/chat-backend:0.1.0
```
#### Production Build
```shell script
sbt chat-release
```
Creates an optimized Client bundle and adds it to the Server Library.
The whole distribution you can find here: `./modules/chat/chat-backend/target/universal/stage`.
You can start the server like this:
* Mac / Linux: `./modules/chat/chat-backend/target/universal/stage/bin/chat-backend`
* Windows: `./modules/chat/chat-backend/target/universal/stage/bin/chat-backend`
### [Dashboard](https://mvillafuertem.github.io/scalajs-react-world/dashboard/)
[Dashboard](https://mvillafuertem.github.io/scalajs-react-world/dashboard/) is
inspired by [material-ui layout example](https://v3.material-ui.com/getting-started/page-layout-examples/dashboard/)
### [Gif Finder](https://mvillafuertem.github.io/scalajs-react-world/gif-finder/)
### [Heroes](https://mvillafuertem.github.io/scalajs-react-world/heroes/)
### [Journal](https://mvillafuertem.github.io/scalajs-react-world/journal/)
### [Laminar](https://mvillafuertem.github.io/scalajs-react-world/laminar/)
### Counter Native
```shell
sudo gem install cocoapods
```
Note for Mac M1 users
```shell
sudo arch -x86_64 gem install ffi
cd modules/counter-native/ios && arch -x86_64 pod install
```
```shell script
sbt "project counter-native; clean;~fastLinkJS"
```
In a separate terminal
```shell
yarn --cwd modules/counter-native/ ios
```
### Pokedex
```shell script
sbt "project pokedex-native; clean;~fastLinkJS"
```
In a separate terminal
```shell
yarn react-native start
yarn react-native run-ios
```
## Quickstart New Project
```shell
export APP_NAME=my-app
cd modules
yarn create react-app $APP_NAME --template typescript
cd $APP_NAME && mkdir -p src/main/scala/io/mvillafuertem/$APP_NAME
yarn add --dev snowpack
```
## Quickstart New Native Project
```shell
export APP_NAME=my-app
cd modules
npx react-native init $APP_NAME --template react-native-template-typescript
cd $APP_NAME
// Comment $APP_NAME/ios/Podfile
// use_flipper!()
npx pod-install
```
## Libraries
https://github.com/ScalablyTyped/Converter
https://github.com/japgolly/scalajs-react
https://github.com/shadaj/slinky
https://github.com/zio/zio
## Notes
https://github.com/japgolly/scalajs-react/blob/master/doc/INTEROP.md
https://staltz.com/unidirectional-user-interface-architectures.html
https://stackoverflow.com/questions/25139257/terminology-what-is-a-glitch-in-functional-reactive-programming-rx
https://stackoverflow.com/questions/1028250/what-is-functional-reactive-programming/28247944#28247944