In order to develop a reactR widget, you’ll need to install R and optionally RStudio. If you’re on Windows, you should also install Rtools.
For an excellent general introduction to R package concepts, check out the R packages online book.
To follow along in this vignette, you’ll also need the following R packages:
To create a new widget you can call
to generate the basic structure and build configuration. This function
version elements. For example, the npm package
foo at version
^1.2.0 would be expressed as
list(name = "foo", version = "^1.2.0"). The package, if
provided, will be added to the new widget’s
a build dependency.
The following R code will create an R package named
sparklines, then provide the templating for creating an
htmlwidget powered by the
react-sparklines npm package:
The next step is to navigate to the newly-created
sparklines project and run the following R commands:
yarn install downloads all of the dependencies
package.json and creates a new file,
yarn.lock. You should add this file to revision control. It
will be updated whenever you change dependencies and run
yarn install. Note: you only need to run it after
modifying package.json. For further documentation on
yarn install, see the yarn
inst/htmlwidgets/sparklines.js. The later file is one
Note that, if you add
--mode=development to the end of this
command, it will include a source
debugging much easier, but hopefully you won’t need to do much of any
yarn run webpack is not strictly a
command. In fact,
yarn run simply delegates to the webpack program. Webpack’s
configuration is generated by
scaffoldReactWidget in the
webpack.config.js, but you can always change this
configuration and/or modify the
yarn run webpack command to
suit your needs.
Alternatively, in RStudio, you can use the keyboard shortcuts
Ctrl-Shift-B to document and
build the package. (On macOS, the shortcuts are
app.R to see a demo in action:
Alternatively, in RStudio, you can open
app.R and press
Cmd-Shift-Enter on macOS).
You should see something like the following appear in the Viewer
This tutorial walked you through the steps taken you create an R interface to the react-sparklines library. The full example package is accessible at https://github.com/react-R/sparklines-example. Our intention is keep creating example packages under the https://github.com/react-R organization, so head there if you’d like to see other examples of interfacing with React.