187 lines
11 KiB
HTML
187 lines
11 KiB
HTML
<!DOCTYPE html>
|
||
<!-- Generated by pkgdown: do not edit by hand --><html lang="en">
|
||
<head>
|
||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||
<meta charset="utf-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||
<title>Build a simple ReactJS app • ts</title>
|
||
<script src="../deps/jquery-3.6.0/jquery-3.6.0.min.js"></script><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||
<link href="../deps/bootstrap-5.3.1/bootstrap.min.css" rel="stylesheet">
|
||
<script src="../deps/bootstrap-5.3.1/bootstrap.bundle.min.js"></script><link href="../deps/font-awesome-6.5.2/css/all.min.css" rel="stylesheet">
|
||
<link href="../deps/font-awesome-6.5.2/css/v4-shims.min.css" rel="stylesheet">
|
||
<script src="../deps/headroom-0.11.0/headroom.min.js"></script><script src="../deps/headroom-0.11.0/jQuery.headroom.min.js"></script><script src="../deps/bootstrap-toc-1.0.1/bootstrap-toc.min.js"></script><script src="../deps/clipboard.js-2.0.11/clipboard.min.js"></script><script src="../deps/search-1.0.0/autocomplete.jquery.min.js"></script><script src="../deps/search-1.0.0/fuse.min.js"></script><script src="../deps/search-1.0.0/mark.min.js"></script><!-- pkgdown --><script src="../pkgdown.js"></script><meta property="og:title" content="Build a simple ReactJS app">
|
||
</head>
|
||
<body>
|
||
<a href="#main" class="visually-hidden-focusable">Skip to contents</a>
|
||
|
||
|
||
<nav class="navbar navbar-expand-lg fixed-top bg-primary" data-bs-theme="dark" aria-label="Site navigation"><div class="container">
|
||
|
||
<a class="navbar-brand me-2" href="../index.html">ts</a>
|
||
|
||
<small class="nav-text text-muted me-auto" data-bs-toggle="tooltip" data-bs-placement="bottom" title="">0.0.0.9000</small>
|
||
|
||
|
||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
|
||
<span class="navbar-toggler-icon"></span>
|
||
</button>
|
||
|
||
<div id="navbar" class="collapse navbar-collapse ms-3">
|
||
<ul class="navbar-nav me-auto">
|
||
<li class="nav-item"><a class="nav-link" href="../reference/index.html">Reference</a></li>
|
||
<li class="active nav-item dropdown">
|
||
<button class="nav-link dropdown-toggle" type="button" id="dropdown-articles" data-bs-toggle="dropdown" aria-expanded="false" aria-haspopup="true">Articles</button>
|
||
<ul class="dropdown-menu" aria-labelledby="dropdown-articles">
|
||
<li><a class="dropdown-item" href="../articles/simple-react-app.html">Build a simple ReactJS app</a></li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
<ul class="navbar-nav">
|
||
<li class="nav-item"><form class="form-inline" role="search">
|
||
<input class="form-control" type="search" name="search-input" id="search-input" autocomplete="off" aria-label="Search site" placeholder="Search for" data-search-index="../search.json">
|
||
</form></li>
|
||
</ul>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</nav><div class="container template-article">
|
||
|
||
|
||
|
||
|
||
<div class="row">
|
||
<main id="main" class="col-md-9"><div class="page-header">
|
||
|
||
<h1>Build a simple ReactJS app</h1>
|
||
|
||
|
||
|
||
<div class="d-none name"><code>simple-react-app.Rmd</code></div>
|
||
</div>
|
||
|
||
|
||
|
||
<p>We will create a simple <a href="https://reactjs.org/" class="external-link">ReactJS</a>
|
||
application that implements our favourite <em>Old Faithful</em> dataset.
|
||
Of course, this is not a great use-case for Rserve as it would be more
|
||
appropriate to use a REST API, but it is a simple example to demonstrate
|
||
how to use Rserve with a front-end application.</p>
|
||
<div class="section level2">
|
||
<h2 id="install-the-ts-package">Install the ts package<a class="anchor" aria-label="anchor" href="#install-the-ts-package"></a>
|
||
</h2>
|
||
<div class="sourceCode" id="cb1"><pre class="downlit sourceCode r">
|
||
<code class="sourceCode R"><span><span class="fu">devtools</span><span class="fu">::</span><span class="fu">install_github</span><span class="op">(</span><span class="st">'tmelliott/ts'</span><span class="op">)</span></span></code></pre></div>
|
||
</div>
|
||
<div class="section level2">
|
||
<h2 id="write-the-r-code">Write the R code<a class="anchor" aria-label="anchor" href="#write-the-r-code"></a>
|
||
</h2>
|
||
<p>The code is saved in a file called <code>faithful-app.R</code>, and
|
||
we can preview the results by calling the functions:</p>
|
||
<div class="sourceCode" id="cb2"><pre class="downlit sourceCode r">
|
||
<code class="sourceCode R"><span><span class="fu"><a href="https://rdrr.io/r/base/cat.html" class="external-link">cat</a></span><span class="op">(</span><span class="fu"><a href="https://rdrr.io/r/base/readLines.html" class="external-link">readLines</a></span><span class="op">(</span><span class="st">'faithful-app.R'</span><span class="op">)</span>, sep <span class="op">=</span> <span class="st">'\n'</span><span class="op">)</span></span>
|
||
<span><span class="co">#> library(ts)</span></span>
|
||
<span><span class="co">#> </span></span>
|
||
<span><span class="co">#> get_hist <- ts_function(</span></span>
|
||
<span><span class="co">#> function(bins = ts_integer(1)) {</span></span>
|
||
<span><span class="co">#> h <- hist(faithful$waiting, breaks = bins, plot = FALSE)</span></span>
|
||
<span><span class="co">#> data.frame(x = h$mids, y = h$density)</span></span>
|
||
<span><span class="co">#> },</span></span>
|
||
<span><span class="co">#> result = ts_dataframe(eruptions = ts_numeric(), waiting = ts_numeric())</span></span>
|
||
<span><span class="co">#> )</span></span>
|
||
<span><span class="co">#> get_smoother <- ts_function(</span></span>
|
||
<span><span class="co">#> function(bandwidth = ts_numeric(1)) {</span></span>
|
||
<span><span class="co">#> d <- density(faithful$waiting, bw = bandwidth)</span></span>
|
||
<span><span class="co">#> data.frame(x = d$x, y = d$y)</span></span>
|
||
<span><span class="co">#> },</span></span>
|
||
<span><span class="co">#> result = ts_dataframe(x = ts_numeric(), y = ts_numeric())</span></span>
|
||
<span><span class="co">#> )</span></span>
|
||
<span></span>
|
||
<span><span class="kw"><a href="https://rdrr.io/r/base/source.html" class="external-link">source</a></span><span class="op">(</span><span class="st">'faithful-app.R'</span><span class="op">)</span></span>
|
||
<span></span>
|
||
<span><span class="va">get_hist</span><span class="op">$</span><span class="fu">call</span><span class="op">(</span><span class="fl">10</span><span class="op">)</span></span>
|
||
<span><span class="co">#> x y</span></span>
|
||
<span><span class="co">#> 1 42.5 0.0029411765</span></span>
|
||
<span><span class="co">#> 2 47.5 0.0161764706</span></span>
|
||
<span><span class="co">#> 3 52.5 0.0242647059</span></span>
|
||
<span><span class="co">#> 4 57.5 0.0176470588</span></span>
|
||
<span><span class="co">#> 5 62.5 0.0102941176</span></span>
|
||
<span><span class="co">#> 6 67.5 0.0073529412</span></span>
|
||
<span><span class="co">#> 7 72.5 0.0198529412</span></span>
|
||
<span><span class="co">#> 8 77.5 0.0397058824</span></span>
|
||
<span><span class="co">#> 9 82.5 0.0404411765</span></span>
|
||
<span><span class="co">#> 10 87.5 0.0169117647</span></span>
|
||
<span><span class="co">#> 11 92.5 0.0036764706</span></span>
|
||
<span><span class="co">#> 12 97.5 0.0007352941</span></span></code></pre></div>
|
||
<p>That’s it! We’ll use <code><a href="../reference/ts_deploy.html">ts_deploy()</a></code> later to create the
|
||
server code and Typescript schema for the app.</p>
|
||
<p>TODO: call ts_compile() from ts_deploy()?</p>
|
||
</div>
|
||
<div class="section level2">
|
||
<h2 id="create-the-react-app">Create the React app<a class="anchor" aria-label="anchor" href="#create-the-react-app"></a>
|
||
</h2>
|
||
<div class="sourceCode" id="cb3"><pre class="sourceCode bash"><code class="sourceCode bash"><span id="cb3-1"><a href="#cb3-1" tabindex="-1"></a><span class="ex">pnpm</span> create vite faithful-demo <span class="at">--template</span> vanilla-ts</span>
|
||
<span id="cb3-2"><a href="#cb3-2" tabindex="-1"></a><span class="bu">cd</span> faithful-demo</span>
|
||
<span id="cb3-3"><a href="#cb3-3" tabindex="-1"></a><span class="ex">pnpm</span> install</span>
|
||
<span id="cb3-4"><a href="#cb3-4" tabindex="-1"></a><span class="ex">pnpm</span> run dev</span></code></pre></div>
|
||
<p>You should now be able to see the default Vite app running at
|
||
<code>http://localhost:5173</code> (or similar, see the console
|
||
output).</p>
|
||
<p>Now install the <code>rserve-ts</code> and <code>zod</code>
|
||
packages:</p>
|
||
<div class="sourceCode" id="cb4"><pre class="sourceCode bash"><code class="sourceCode bash"><span id="cb4-1"><a href="#cb4-1" tabindex="-1"></a><span class="ex">pnpm</span> install rserve-ts zod</span></code></pre></div>
|
||
<div class="section level3">
|
||
<h3 id="create-the-server-code">Create the server code<a class="anchor" aria-label="anchor" href="#create-the-server-code"></a>
|
||
</h3>
|
||
<p>We now use the <code><a href="../reference/ts_deploy.html">ts_deploy()</a></code> function to create two
|
||
files:</p>
|
||
<ul>
|
||
<li>
|
||
<code>faithful-app.rserve.R</code> is the file that will start the
|
||
Rserve instance with your apps functions available.</li>
|
||
<li>
|
||
<code>faithful-app.rserve.ts</code> contains the TypeScript schema
|
||
(using <a href="https://zod.dev" class="external-link">zod</a>) that will let you use the R
|
||
functions directly in the app like any other typescript function!</li>
|
||
</ul>
|
||
<p>We’ll send these straight to the <code>faithful-demo/src</code>
|
||
directory.</p>
|
||
<div class="sourceCode" id="cb5"><pre class="downlit sourceCode r">
|
||
<code class="sourceCode R"><span><span class="fu"><a href="../reference/ts_compile.html">ts_compile</a></span><span class="op">(</span><span class="st">'faithful-app.R'</span>, file <span class="op">=</span> <span class="st">'faithful-demo/src/faithful-app.rserve.ts'</span><span class="op">)</span></span>
|
||
<span><span class="fu"><a href="../reference/ts_deploy.html">ts_deploy</a></span><span class="op">(</span><span class="st">'faithful-app.R'</span>, file <span class="op">=</span> <span class="st">'faithful-demo/src/faithful-app.rserve.R'</span><span class="op">)</span></span></code></pre></div>
|
||
</div>
|
||
<div class="section level3">
|
||
<h3 id="write-the-app">Write the app<a class="anchor" aria-label="anchor" href="#write-the-app"></a>
|
||
</h3>
|
||
<p>The rest of the process simply requires writing TypeScript code. I
|
||
won’t go into detail since that’s not the focus of this vignette, but
|
||
below you can see the code written with some basic comments. Copy and
|
||
paste these to get the app running.</p>
|
||
<div class="sourceCode" id="cb6"><pre class="sourceCode typescript"><code class="sourceCode typescript"><span id="cb6-1"><a href="#cb6-1" tabindex="-1"></a><span class="co">// main.ts</span></span></code></pre></div>
|
||
</div>
|
||
</div>
|
||
</main><aside class="col-md-3"><nav id="toc" aria-label="Table of contents"><h2>On this page</h2>
|
||
</nav></aside>
|
||
</div>
|
||
|
||
|
||
|
||
<footer><div class="pkgdown-footer-left">
|
||
<p>Developed by Tom Elliott.</p>
|
||
</div>
|
||
|
||
<div class="pkgdown-footer-right">
|
||
<p>Site built with <a href="https://pkgdown.r-lib.org/" class="external-link">pkgdown</a> 2.1.1.</p>
|
||
</div>
|
||
|
||
</footer>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
</body>
|
||
</html>
|