Scala ReactDOM类代码示例

//设置package包名称以及导入依赖的类
package jp.ne.opt.client

import jp.ne.opt.domain.TodoStore

import scala.scalajs.js.JSApp
import scala.scalajs.js.annotation.JSExport
import japgolly.scalajs.react.{ReactComponentB, ReactDOM}
import japgolly.scalajs.react.vdom.prefix_<^._
import org.scalajs.dom.document

object TutorialApp extends JSApp {
  def main(): Unit = {
    println("helloWorld")
  }

  @JSExport
  def count():Unit = {
    countNumber +=1
    println(countNumber)
  }
  var countNumber: Int = 1

  val Hello =
    ReactComponentB[String]("Hello")
      .render_P(name => <.div(^.id:="hoge","Hello there ", name))
      .build

  ReactDOM.render(Hello("hohohohoho"), document.getElementById("content"))
} 

//设置package包名称以及导入依赖的类
package app

import scala.scalajs.js.annotation.JSExport
import org.scalajs.dom
import japgolly.scalajs.react.ReactDOM
import scala.scalajs.js.JSApp
import japgolly.scalajs.react.ReactComponentB
import css.StyleStore.MyStyles
import scalacss.Defaults._
import scalacss.ScalaCssReact._
import scalacss.internal.mutable.GlobalRegistry


@JSExport
object App extends JSApp {

  private val component = ReactComponentB[Unit]("App")
    .render(_ => AppRouter.component())
    .build

  @JSExport
  def main(): Unit = {
    println("-----> in App AdminUser -------")
    MyStyles.addToDocument()
    GlobalRegistry.addToDocumentOnRegistration()
    ReactDOM.render(component(), dom.document.getElementById("mainRootBody"))
  }

} 

//设置package包名称以及导入依赖的类
package client

import game._
import japgolly.scalajs.react.ReactDOM
import org.scalajs.dom
import scala.scalajs.js.JSApp
import scalacss.Defaults._
import scalacss.ScalaCssReact._

object Client extends JSApp {
  def main(): Unit = {
    val movesOptimal34: Seq[Point19] = Seq(
      (3, 4), (3, 3), (4, 3), (4, 4), (4, 5),
      (2, 4), (5, 4), (3, 2), (2, 5), (1, 4),
      (4, 2), (3, 1), (1, 2), (2, 2), (3, 5),
      (1, 3), (4, 1), (1, 1), (18, 2)
    ).map(Function.tupled(Point19.apply))

    val position = Go.playAll(movesOptimal34.map(Move.apply)).right.get.head

    Style.addToDocument()
    val div = dom.document.body.appendChild(dom.document.createElement("div"))
    ReactDOM.render(Board(Style.board).component(position), div)

    ()
  }
} 

//设置package包名称以及导入依赖的类
package console

import console.style.{GlobalStyles, GraphStyles}
import japgolly.scalajs.react.ReactDOM
import console.components.{ClusterModule, MainMenu, MetricsModule}
import japgolly.scalajs.react.extra.router.{BaseUrl, Redirect, Resolution, Router, RouterConfigDsl, RouterCtl}
import org.scalajs.dom
import japgolly.scalajs.react.vdom.prefix_<^._

import scala.scalajs.js
import scala.scalajs.js.annotation.JSExport

@JSExport
object JsApplication extends js.JSApp {
  sealed trait Route
  case object DashboardRoute extends Route
  case object ClusterMapRoute extends Route
  
  // configure the router
  val routerConfig = RouterConfigDsl[Route].buildConfig { dsl =>
    import dsl._
    (staticRoute(root, DashboardRoute) ~> renderR(ctl => MetricsModule(ctl))
      | staticRoute("#cluster", ClusterMapRoute) ~> renderR(ctl => ClusterModule(ctl))
    ).notFound(redirectToPage(DashboardRoute)(Redirect.Replace))
  }.renderWith(layout)

  def layout(c: RouterCtl[Route], r: Resolution[Route]) = {
    <.div(
      // here we use plain Bootstrap class names as these are specific to the top level layout defined here
      <.nav(^.className := "navbar navbar-inverse navbar-fixed-top")(
        <.div(^.className := "container-fluid")(
          <.div(^.className := "navbar-header")(<.span(^.className := "navbar-brand")("Console")),
          <.div(^.className := "collapse navbar-collapse")(MainMenu(MainMenu.Props(c, r.page)))
        )
      ),
      // currently active module is shown in this container
      <.div(^.className := "container-fluid")(r.render())
    )
  }

  @JSExport
  def main(): Unit = {
    import scalacss.Defaults._
    scalacss.internal.mutable.GlobalRegistry.onRegistration { s =>
      val style: StyleA = s.styles.head
      //println(style.render[String])
      println(style.className.value)
      //println(new GraphStyles().render[String])
    }

    GlobalStyles.addToDocument()
    scalacss.internal.mutable.GlobalRegistry.register(new GraphStyles)

    val router = Router(BaseUrl.until_#, routerConfig)
    ReactDOM.render(router(), dom.document.getElementById("scene"))
  }
} 

//设置package包名称以及导入依赖的类
package client

import game._
import japgolly.scalajs.react.ReactDOM
import org.scalajs.dom
import scala.scalajs.js.JSApp
import scalacss.Defaults._
import scalacss.ScalaCssReact._

object Client extends JSApp {
  def main(): Unit = {
    val movesOptimal34: Seq[Point19] = Seq(
      (3, 4), (3, 3), (4, 3), (4, 4), (4, 5),
      (2, 4), (5, 4), (3, 2), (2, 5), (1, 4),
      (4, 2), (3, 1), (1, 2), (2, 2), (3, 5),
      (1, 3), (4, 1), (1, 1), (1, 5)
    ).map(Function.tupled(Point19.apply))

    val position = Go.playAll(movesOptimal34.map(Move.apply)).right.get.head

    Style.addToDocument()
    val div = dom.document.body.appendChild(dom.document.createElement("div"))
    ReactDOM.render(Board(Style.board).component(position), div)

    ()
  }
} 

//设置package包名称以及导入依赖的类
package jp.seraphr.fileupload.main

import japgolly.scalajs.react.ReactDOM
import jp.seraphr.fileupload.action.DefaultFileUploadActions
import jp.seraphr.fileupload.dispatch.FluxDispatcher
import jp.seraphr.fileupload.event.FileUploadEvent
import jp.seraphr.fileupload.store.DefaultFileUploadStore
import jp.seraphr.fileupload.view.FileUploadComponentModule
import org.scalajs.dom

import scala.scalajs.js


object FileUploadApp extends js.JSApp {
  @scala.scalajs.js.annotation.JSExport
  override def main(): Unit = {
    dom.console.info("enter main!!")
    val tDispatcher = new FluxDispatcher[FileUploadEvent]
    val tContextPath = "http://localhost:8080/fileupload"
    val tEC = scala.scalajs.concurrent.JSExecutionContext.queue

    val tActions = new DefaultFileUploadActions(upickle.default, tContextPath, tDispatcher, tEC)
    val tStore = new DefaultFileUploadStore(tDispatcher)
    val tComponentModule = new FileUploadComponentModule(tActions, tStore)

    val tNode = dom.document.getElementById("main")
    ReactDOM.render(tComponentModule.Component(), tNode)
  }
} 

//设置package包名称以及导入依赖的类
package scalajs.semanticui

import japgolly.scalajs.react.ReactDOM

import scala.scalajs.js.JSApp
import org.scalajs.dom
import org.scalajs.dom.ext._

import scalajs.semanticui.common.{Footer, MasterHeader, SideBar, SideBarSection}
import scalajs.semanticui.elements.button.ButtonPage
import scalajs.semanticui.elements.divider.DividerPage
import scalajs.semanticui.elements.icon.IconPage

@scala.scalajs.js.annotation.JSExport("ExampleApp")
object ExampleApp extends JSApp {
  override def main(): Unit = {
    //ReactDOM.render(IconPage(), dom.document.getElementById("example-icons-payment"))
    ReactDOM.render(DividerPage(), dom.document.getElementById("divider-example"))
    //ReactDOM.render(MasterHeader(), dom.document.getElementById("master-header"))
    ReactDOM.render(SideBar(SideBar.Props(sticky = false, sidebar = true, Some("toc"))), dom.document.getElementById("menu-toc"))
    dom.document.getElementsByClassName("toc").foreach(ReactDOM.render(SideBar(SideBar.Props(sticky = true, sidebar = false, None)), _))
    ReactDOM.render(Footer(), dom.document.getElementById("footer"))
  }
} 

//设置package包名称以及导入依赖的类
package example

import scala.scalajs.js.annotation.JSExport
import japgolly.scalajs.react.{ReactComponentB, ReactDOM}
import japgolly.scalajs.react.vdom.prefix_<^._
import org.scalajs.dom.document
import components.{Badge, BreadCrumb, MenuItem, Col}
import components.Badge.BadgeProps
import components.Col.ColProps

@JSExport
object ScalaJSExample {
  @JSExport
  def main(): Unit = {
    val app = ReactComponentB[Unit]("app")
      .render(_ => <.div(
        Col.render(ColProps(m = Some(3)),
          <.h1("Hello World 123"),
          Badge.render(Some(BadgeProps(true)), "4"),
          <.div(
            BreadCrumb.render(
              MenuItem.render(
                "first"
              ),
              MenuItem.render(
                "second"
              ),
              MenuItem.render(
                "third"
              )
            )
          )
        )
      ))
      .build

    ReactDOM.render(app(), document.getElementById("root"))
  }
} 

//设置package包名称以及导入依赖的类
package spatutorial.client

import japgolly.scalajs.react.{CallbackB, CallbackTo, ReactComponentB, ReactDOM}
import japgolly.scalajs.react.extra.router._
import japgolly.scalajs.react.vdom.prefix_<^._
import org.scalajs.dom
import scala.scalajs.js
import scala.scalajs.js.annotation.JSExport


@JSExport("SPAMain")
object SPAMain extends js.JSApp {
  sealed trait Pages

  case object Home extends Pages
  case object Hello extends Pages

  val HelloComponent =
    ReactComponentB[String]("Hello")
      .render_P(name => <.div("Hello there ", name))
      .build


  val routerConfig = RouterConfigDsl[Pages].buildConfig { dsl =>
    import dsl._

    def grantPrivateAccess: CallbackB = {
      CallbackTo(false)
    }

    (staticRoute(root, Home) ~> render(<.h1("Welcome!")))
      .notFound(redirectToPage(Home)(Redirect.Replace))

  (staticRoute("#hello", Hello) ~> render(HelloComponent("SerG")))
    .addCondition(grantPrivateAccess)(_ => redirectToPage(Home)(Redirect.Push))
    .notFound(redirectToPage(Home)(Redirect.Replace))
}

  @JSExport
  def main(): Unit = {
    // create the router
    val router = Router(BaseUrl.until_#, routerConfig)
    // tell React to render the router in the document body
    ReactDOM.render(router(), dom.document.getElementById("root"))
  }

}