It's super easy to get started with using Slinky, whether you're working on a new project or adding Slinky to your existing work.
Creating a New Project
The easiest way to create a new project is to use Create React Scala App. This template creates a starter project with a default Webpack-based build configuration that enables hot reloading and bundling into a production site.
You can use this template from the command line with SBT:
Follow the prompts, and you'll be all set up with a Scala-based React application with Slinky! Check out the repo for more details on what's included with the starter project.
Adding to an Existing Project
Since Slinky is distributed just like any other Scala.js library, it's very easy to integrate into an existing project.
Add the dependencies that match your application as well as required Scala.js compiler options:
Slinky supports loading React via either CommonJS or as a global object. If loading as a global object, make sure React is available
window.React and React DOM as
While Slinky can be in a simple Scala.js app with no bundler, we highly recommend that you use webpack for bundling your application with its dependencies. The SBT plugin scalajs-bundler automates much of the process around configuring webpack, and is very useful for adding webpack to an SBT build setup.
For example, If you're using scalajs-bundler, add the following to your
If you are using
jsDependencies you should add, instead:
Starting with Slinky 0.5.0, the
@react macro annotation is implemented with Macro Paradise to ensure compatibility with future versions of Scala, so a small plugin is required to enable IDE support in IntelliJ (version 2018.3 or higher is required). To install the plugin, head over to the JetBrains Marketplace page or search for "Slinky Library Support" from inside IntelliJ.
Much credit goes to existing Scala.js libraries for React, such as scalajs-react, which provided a lot of inspiration for Slinky's design. Credit also goes to scala-js-preact, which provided the inspiration for the
@react macro annotation.
Slinky logo is based on https://thenounproject.com/dianatomic/uploads/?i=40452