react-webpack-rails-tutorial/app/views/pages/index.html.erb at 0fc52be46fc8329a8f14b824d2194ee8b501bf9e · shakacode/react-webpack-rails-tutorial · 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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<div class="relative isolate overflow-hidden py-10 sm:py-14">
  <div class="pointer-events-none absolute inset-x-0 top-0 -z-10 h-[32rem] bg-[radial-gradient(circle_at_top_left,_rgba(14,165,233,0.18),_transparent_42%),radial-gradient(circle_at_80%_20%,_rgba(245,158,11,0.14),_transparent_32%)]"></div>

  <section class="mx-auto max-w-6xl">
    <div class="grid gap-8 lg:grid-cols-[minmax(0,1.2fr)_minmax(320px,0.8fr)] lg:items-start">
      <div class="space-y-6">
        <span class="inline-flex items-center rounded-full border border-sky-200 bg-white/80 px-4 py-2 text-xs font-semibold uppercase tracking-[0.28em] text-sky-700 shadow-sm shadow-sky-100 backdrop-blur">
          React on Rails Tutorial
        </span>

        <div class="space-y-4">
          <h1 class="max-w-4xl text-5xl leading-[1.05] text-slate-900 sm:text-6xl">
            Server-rendered React, Rails, and real-time updates in one sharper demo.
          </h1>
          <p class="max-w-3xl text-lg leading-8 text-slate-600 sm:text-xl">
            This open source example shows how the
            <%= link_to "React on Rails gem", "https://github.com/shakacode/react_on_rails" %>
            and
            <%= link_to "Shakapacker gem", "https://github.com/shakacode/shakapacker" %>
            fit into a Rails application without forcing the whole stack into a single-page app mold.
          </p>
        </div>

        <div class="flex flex-wrap gap-3">
          <%= link_to "Browse the Source",
                      "https://github.com/shakacode/react-webpack-rails-tutorial/",
                      class: "inline-flex items-center rounded-full bg-slate-900 px-5 py-3 text-sm font-semibold text-white shadow-lg shadow-slate-200 transition hover:bg-slate-800" %>
          <%= link_to "Read the README",
                      "https://github.com/shakacode/react-webpack-rails-tutorial/blob/master/README.md",
                      class: "inline-flex items-center rounded-full border border-slate-300 bg-white/80 px-5 py-3 text-sm font-semibold text-slate-700 shadow-sm shadow-slate-200 transition hover:border-sky-300 hover:text-sky-700" %>
          <%= link_to "See the React-only Route",
                      no_router_path,
                      class: "inline-flex items-center rounded-full border border-amber-200 bg-amber-50 px-5 py-3 text-sm font-semibold text-amber-900 shadow-sm shadow-amber-100 transition hover:border-amber-300 hover:bg-amber-100" %>
        </div>

        <div class="grid gap-4 pt-2 sm:grid-cols-2 xl:grid-cols-4">
          <div class="rounded-3xl border border-white/80 bg-white/70 p-5 shadow-sm shadow-sky-100 backdrop-blur">
            <p class="text-xs font-semibold uppercase tracking-[0.24em] text-sky-700">Rendering</p>
            <p class="mt-3 text-lg font-semibold text-slate-900">SSR + Hydration</p>
            <p class="mt-2 text-sm leading-6 text-slate-600">React content renders on the server first, then hydrates cleanly on the client.</p>
          </div>
          <div class="rounded-3xl border border-white/80 bg-white/70 p-5 shadow-sm shadow-sky-100 backdrop-blur">
            <p class="text-xs font-semibold uppercase tracking-[0.24em] text-sky-700">Real Time</p>
            <p class="mt-3 text-lg font-semibold text-slate-900">Action Cable</p>
            <p class="mt-2 text-sm leading-6 text-slate-600">New comments stream in live, so the sample feels like an app instead of static documentation.</p>
          </div>
          <div class="rounded-3xl border border-white/80 bg-white/70 p-5 shadow-sm shadow-sky-100 backdrop-blur">
            <p class="text-xs font-semibold uppercase tracking-[0.24em] text-sky-700">Tooling</p>
            <p class="mt-3 text-lg font-semibold text-slate-900">Webpack or Rspack</p>
            <p class="mt-2 text-sm leading-6 text-slate-600">The tutorial shows a modern Shakapacker setup that can switch bundlers without reworking the app.</p>
          </div>
          <div class="rounded-3xl border border-white/80 bg-white/70 p-5 shadow-sm shadow-sky-100 backdrop-blur">
            <p class="text-xs font-semibold uppercase tracking-[0.24em] text-sky-700">Comparison</p>
            <p class="mt-3 text-lg font-semibold text-slate-900">Multiple UI Paths</p>
            <p class="mt-2 text-sm leading-6 text-slate-600">Compare React Router, plain React, Stimulus, classic Rails, and ReScript in the same project.</p>
          </div>
        </div>
      </div>

      <aside class="relative overflow-hidden rounded-[2rem] border border-slate-800/5 bg-slate-900 px-6 py-7 text-slate-100 shadow-2xl shadow-sky-100">
        <div class="pointer-events-none absolute inset-x-0 top-0 h-36 bg-[radial-gradient(circle_at_top,_rgba(125,211,252,0.35),_transparent_60%)]"></div>
        <div class="relative space-y-6">
          <div>
            <p class="text-xs font-semibold uppercase tracking-[0.28em] text-sky-300">Stack at a Glance</p>
            <h2 class="mt-3 text-3xl text-white">One codebase, several integration styles.</h2>
            <p class="mt-3 text-sm leading-7 text-slate-300">
              Use this page as the front door, then jump into the specific route that demonstrates the architecture choice you care about.
            </p>
          </div>

          <div class="grid gap-3">
            <%= link_to simple_path,
                        class: "group rounded-2xl border border-white/10 bg-white/5 p-4 transition hover:border-sky-300/40 hover:bg-white/10 hover:no-underline" do %>
              <p class="text-sm font-semibold text-white">Simple React</p>
              <p class="mt-1 text-sm text-slate-300">Minimal client-side React mount with no server-rendered HTML.</p>
            <% end %>

            <%= link_to stimulus_path,
                        class: "group rounded-2xl border border-white/10 bg-white/5 p-4 transition hover:border-sky-300/40 hover:bg-white/10 hover:no-underline" do %>
              <p class="text-sm font-semibold text-white">Stimulus Demo</p>
              <p class="mt-1 text-sm text-slate-300">See Hotwire-style behavior next to the React examples inside the same Rails app.</p>
            <% end %>

            <%= link_to rescript_path,
                        class: "group rounded-2xl border border-white/10 bg-white/5 p-4 transition hover:border-sky-300/40 hover:bg-white/10 hover:no-underline" do %>
              <p class="text-sm font-semibold text-white">ReScript Variant</p>
              <p class="mt-1 text-sm text-slate-300">Compare a typed front-end implementation that still runs through the same Rails integration story.</p>
            <% end %>
          </div>

          <div class="rounded-2xl border border-white/10 bg-white/5 p-4">
            <p class="text-xs font-semibold uppercase tracking-[0.24em] text-sky-300">Core Stack</p>
            <ul class="mt-3 space-y-2 text-sm leading-6 text-slate-300">
              <li>Ruby on Rails for routing, controllers, persistence, and the demo shell.</li>
              <li>React + Redux for the interactive comment workflow.</li>
              <li>React Router for server rendering and route transitions.</li>
              <li>Tailwind CSS for utility-first styling layered on the Rails app.</li>
            </ul>
          </div>
        </div>
      </aside>
    </div>
  </section>

  <div class="mx-auto mt-12 max-w-6xl">
    <%= render "header" %>
  </div>

  <section class="mx-auto mt-12 max-w-6xl">
    <div class="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
      <div class="max-w-3xl">
        <p class="text-xs font-semibold uppercase tracking-[0.28em] text-sky-700">Live Playground</p>
        <h2 class="mt-3 text-4xl text-slate-900">Try the server-rendered React Router demo directly on the home page.</h2>
        <p class="mt-3 text-base leading-7 text-slate-600">
          The block below is the actual interactive sample. It renders on the server, hydrates on the client, and keeps comment updates flowing through Action Cable.
        </p>
      </div>

      <div class="flex flex-wrap gap-3">
        <%= link_to "Classic Rails",
                    comments_path,
                    class: "inline-flex items-center rounded-full border border-slate-300 bg-white/80 px-4 py-2 text-sm font-semibold text-slate-700 shadow-sm shadow-slate-200 transition hover:border-sky-300 hover:text-sky-700" %>
        <%= link_to "No Router React",
                    no_router_path,
                    class: "inline-flex items-center rounded-full border border-slate-300 bg-white/80 px-4 py-2 text-sm font-semibold text-slate-700 shadow-sm shadow-slate-200 transition hover:border-sky-300 hover:text-sky-700" %>
      </div>
    </div>

    <div class="relative mt-8 overflow-hidden rounded-[2rem] border border-white/80 bg-white/80 p-6 shadow-[0_32px_80px_-48px_rgba(15,23,42,0.5)] backdrop-blur sm:p-8 lg:p-10">
      <div class="pointer-events-none absolute inset-x-0 top-0 h-32 bg-gradient-to-b from-sky-50 via-white/60 to-transparent"></div>
      <div class="relative">
        <%= react_component('RouterApp', id: "RouterApp-react-component-0") %>
      </div>
    </div>
  </section>
</div>