Skip to content

Commit 1df3acd

Browse files
RoyalIcingRoyalIcing
committed
Add start of react page
1 parent 3317eaa commit 1df3acd

File tree

5 files changed

+105
-2
lines changed

5 files changed

+105
-2
lines changed

‎apps/components_guide_web/lib/components_guide_web/controllers/react_typescript_controller.ex

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
defmodule ComponentsGuideWeb.ReactTypescriptController do
2+
use ComponentsGuideWeb, :controller
3+
4+
def index(conn, _params) do
5+
render(conn, "index.html")
6+
end
7+
end

‎apps/components_guide_web/lib/components_guide_web/router.ex

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ defmodule ComponentsGuideWeb.Router do
2020
get "/", PageController, :index
2121

2222
get "/swiftui", SwiftUIController, :index
23+
get "/react+typescript", ReactTypescriptController, :index
2324

2425
resources "/text", TextController
2526
get "/text/:id/text/:format", TextController, :show_text_format

‎apps/components_guide_web/lib/components_guide_web/templates/layout/app.html.eex

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,8 @@
1616
<nav role="navigation" class="flex-grow px-16 text-lg">
1717
<ul class="flex flex-row justify-around">
1818
<li><a href="/swiftui" class="block py-4 font-bold"><%= "SwiftUI + Combine" %></a></li>
19-
<li><a href="/react" class="block py-4 font-bold"><%= "React + TypeScript" %></a></li>
20-
<li><a href="/rxj" class="block py-4 font-bold">RxJS</a></li>
19+
<li><a href="/react+typescript" class="block py-4 font-bold"><%= "React + TypeScript" %></a></li>
20+
<li><a href="/rxjs" class="block py-4 font-bold">RxJS</a></li>
2121
</ul>
2222
</nav>
2323
</section>

‎apps/components_guide_web/lib/components_guide_web/templates/react_typescript/index.html.eex

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
<div class="bg-yellow-500 text-white">
2+
<section class="container px-6 pt-12 pb-12">
3+
<h1 class="mx-auto max-w-4xl text-5xl text-center font-bold leading-tight text-shadow">
4+
<div class="pb-4 flex items-center justify-center">
5+
<img class="inline-block mr-2" src="<%= "https://cdn.jsdelivr.net/gh/gilbarbara/logos@618de63f309bbf56b67364fd6a441cbbf79403cc/logos/react.svg" %>" alt="React logo" width=96 height=96>
6+
<span class="mr-2 text-3xl">♥️</span>
7+
<img class="inline-block mr-2" src="<%= "https://cdn.jsdelivr.net/gh/gilbarbara/logos@02e637e09b55966e802dfe0bc93595594e0214bb/logos/typescript-icon.svg" %>" alt="TypeScript logo" width=96 height=96>
8+
</div>
9+
<%= "Learn React & TypeScript" %>
10+
</h1>
11+
<p class="my-8 mx-auto max-w-3xl text-4xl text-center leading-snug italic text-yellow-100 text-shadow">
12+
<%= "Express clear components more robustly with the live feedback of TypeScript." %>
13+
</p>
14+
<p class="py-2 text-xl text-center">
15+
Topics include:
16+
<%= for text <- ["React", "Hooks", "Reducers", "Data Flow", "Loading APIs", "Composing", "Testing", "Performance", "Clarity", "Documentation", "Device Adapting"] do %>
17+
<a href="#" class="inline-block mx-1 mb-3 px-4 py-2 font-bold bg-white text-blue-600 hover:bg-blue-500 hover:text-white rounded shadow-xl"><%= text %></a>
18+
<% end %>
19+
</p>
20+
</section>
21+
</div>
22+
23+
<div class="bg-white">
24+
<section class="container pt-8 pb-16 text-2xl">
25+
<article class="mb-8">
26+
<h2 class="mb-2 text-4xl leading-normal text-teal-800">Atomic design</h2>
27+
<p>
28+
Learn how to name components. Apply the single responsibility principle. Find the indivisible component units, and compose them together into larger molecules.
29+
</p>
30+
</article>
31+
<article class="mb-8">
32+
<h2 class="mb-2 text-4xl leading-normal text-teal-800">Styling approaches</h2>
33+
<p>
34+
Extract common styles. Define a style guide. How do you keep styles consistent?
35+
</p>
36+
</article>
37+
<article class="mb-8">
38+
<h2 class="mb-2 text-4xl leading-normal text-teal-800">Reusability trade-offs</h2>
39+
<p>
40+
What sort of components should be resuable? How granular should you go?
41+
</p>
42+
</article>
43+
<article class="mb-8">
44+
<h2 class="mb-2 text-4xl leading-normal text-teal-800">Pattern libraries</h2>
45+
<p>
46+
When do you need a pattern library? Who are they for? How should you manage them?
47+
</p>
48+
</article>
49+
<article class="mb-8">
50+
<h2 class="mb-2 text-4xl leading-normal text-teal-800">Testing components</h2>
51+
<p>
52+
Unit test components. Test the behaviours that matter first. Use type-safety to remove impossible states.
53+
</p>
54+
</article>
55+
<article class="mb-8">
56+
<h2 class="mb-2 text-4xl leading-normal text-teal-800">Testing data flow</h2>
57+
<p>
58+
Test your data flow in isolation. Use test-driven design. Mock APIs and other sources.
59+
</p>
60+
</article>
61+
<article class="mb-8">
62+
<h2 class="mb-2 text-4xl leading-normal text-teal-800">Composable component patterns</h2>
63+
<p>
64+
Components are <em>really</em> composable. Can we reduce boilerplate? What useful component utilities can we make?
65+
</p>
66+
</article>
67+
<article class="mb-8">
68+
<h2 class="mb-2 text-4xl leading-normal text-teal-800">Handling errors</h2>
69+
<p>
70+
Handle errors from publishers. What and when should you show users?
71+
</p>
72+
</article>
73+
<article class="mb-8">
74+
<h2 class="mb-2 text-4xl leading-normal text-teal-800">Caching data</h2>
75+
<p>
76+
Learn how to name components. Apply the single responsibility principle. Find the atomic units, and compose them together.
77+
</p>
78+
</article>
79+
<article class="mb-8">
80+
<h2 class="mb-2 text-4xl leading-normal text-teal-800">Improving performance in the right areas</h2>
81+
<p>
82+
Learn when you should focus on performance. Measure to be informed. Apply optimization techniques.
83+
</p>
84+
</article>
85+
<article class="mb-8">
86+
<h2 class="mb-2 text-4xl leading-normal text-teal-800">Automating repetitive tasks</h2>
87+
<p>
88+
Produce screenshots across many devices.
89+
</p>
90+
</article>
91+
</section>
92+
</div>

‎apps/components_guide_web/lib/components_guide_web/views/react_typescript_view.ex

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
defmodule ComponentsGuideWeb.ReactTypescriptView do
2+
use ComponentsGuideWeb, :view
3+
end

0 commit comments

Comments
 (0)