ruby-hyperloop.io/source/tutorials/index.html.erb at old_source · ruby-hyperloop/ruby-hyperloop.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
---
title: Tutorials & Quickstarts
---
<h1> Tutorials and Quickstarts</h1>

<br>
<div class="card">
  <h3 class="card-header"><%=link_to 'Quickstarts', 'https://github.com/ruby-hyperloop/quickstart'%></h3>
  <div class="card-block">
    <p>Clone the repo and you will have everything you need to get up and runnign quickly. Each quickstart branch contains the source of a working application.</p>
    <ul>
      <li>HyperReact and Rails Quickstart</li>
      <li>HyperReact, NPM and Webpack Quickstart</li>
    </ul>
  </div>
</div>
<br>
<div class="card">
  <h3 class="card-header"><%=link_to 'Chat-App Tutorial', '/tutorials/chat_app'%></h3>
  <div class="card-block">
    <p>This tutorial will teach you the basics of building a HyperReact application that runs purely in your browser with no need for any back end system (like Rails, Node or Sinatra).</p>
    <p>This work-along tutorial is an excellent place to start to learn the HyperReact DSL without needing to learn how to install it. If you have not used the HyperReact DSL before, this tutorial will <strong>get you going with minimal setup</strong>.</p>
  </div>
</div>
<br>
<div class="card">
  <h3 class="card-header"><%=link_to 'HyperReact and Rails Tutorial', '/tutorials/hyperreact_with_rails'%></h3>
  <div class="card-block">
    <p>A <strong>short tutorial</strong> which will show you how to add HyperReact to a Rails app and render a basic component. All you need to know to get started with HyperReact and Rails.</p>
    <p>The source of this tutorial is avaiable as a <%=link_to 'Quickstart', 'https://github.com/ruby-hyperloop/quickstart'%> which you can clone.</p>
  </div>
</div>
<br>
<div class="card">
  <h3 class="card-header"><%=link_to 'HyperReact, NPM and Webpack Tutorial', '/tutorials/hyperreact_with_webpack'%></h3>
  <div class="card-block">
    <p>In an Isomorphic Ruby world, we need a good way of including <strong>Ruby and JavaScript components</strong> so they co-exist and play nicely together.</p>
    <p>This tutorial will show you how to setup and use NPM and Webpack with HyperReact.</p>
    <p>The source of this tutorial is avaiable as a <%=link_to 'Quickstart', 'https://github.com/ruby-hyperloop/quickstart'%> which you can clone.</p>
  </div>
</div>
<br>
<div class="card">
  <h3 class="card-header"><%=link_to 'Flux Store Tutorial', '/tutorials/flux_store'%></h3>
  <div class="card-block">
    <p>This short tutorial will show you how to implement a Flux store pattern in Hyperloop. This is extremely useful when you have deeply nested components which need to communicate with each other.</p>
  </div>
</div>
<br>
<div class="card">
  <h3 class="card-header"><%=link_to 'File Uploader Tutorial', '/tutorials/file_uploader'%></h3>
  <div class="card-block">
    <p>A brief tutorial will show you how to combine Ruby and JavaScript code and take you through the steps to build a Image Uploader using HTML5 FileReader and Hyperloop.</p>
  </div>
</div>