Skip to content

Commit 9dc5384

Browse files
author
Tom Softreck
committed
Release version 0.3.95
### Changes since v0.3.94
1 parent 60494b1 commit 9dc5384

3 files changed

Lines changed: 123 additions & 10 deletions

File tree

‎CHANGELOG.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@
66

77
## [0.3.96] - 2025-04-02
88

9+
## [0.3.96] - 2025-04-02
10+
911
* Release version 0.3.94
1012

1113

‎css/styles.css‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,3 +60,36 @@
6060
text-decoration-style: dashed;
6161
color: #60A5FA;
6262
}
63+
64+
.syntax-keyword {
65+
color: #c678dd;
66+
}
67+
68+
.syntax-function {
69+
color: #61afef;
70+
}
71+
72+
.syntax-string {
73+
color: #98c379;
74+
}
75+
76+
.syntax-number {
77+
color: #d19a66;
78+
}
79+
80+
.syntax-boolean {
81+
color: #d19a66;
82+
}
83+
84+
.syntax-tag {
85+
color: #e06c75;
86+
}
87+
88+
.syntax-attr {
89+
color: #d19a66;
90+
}
91+
92+
.reactstream-code {
93+
font-family: 'Courier New', monospace;
94+
line-height: 1.5;
95+
}

‎index.html‎

Lines changed: 88 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -86,26 +86,104 @@ <h1 class="text-4xl md:text-6xl font-bold text-white mb-6">
8686
</div>
8787
</section>
8888

89-
<section class="py-20 md:py-32">
89+
90+
<section class="py-20 md:py-32 reactstream-code">
9091
<div class="container mx-auto px-4">
9192

92-
<img src="img/logo-reactstream1.svg" alt="ReactStream Logo" class="w-auto mr-4">
93-
<p></p>
93+
<h2 class="text-2xl font-bold mb-4">React Component Example</h2>
94+
<p class="text-black-300 mb-6">
95+
This example demonstrates a simple React functional component with hooks, state management,
96+
and conditional rendering - the kind of component ReactStream helps you analyze and debug.
97+
</p>
98+
99+
100+
<div class="code-window mt-4">
101+
<div class="code-header">
102+
<div class="flex">
103+
<div class="code-dot bg-red-500"></div>
104+
<div class="code-dot bg-yellow-500"></div>
105+
<div class="code-dot bg-green-500"></div>
106+
</div>
107+
<span class="text-gray-400 text-sm">MyComponent.js</span>
108+
</div>
109+
<div class="code-body reactstream-code">
110+
<span class="syntax-keyword">import</span> React, { useState } <span class="syntax-keyword">from</span>
111+
<span class="syntax-string">'react'</span>;<br><br>
112+
113+
<span class="syntax-keyword">const</span> <span class="syntax-function">MyComponent</span> = () => {<br>
114+
&nbsp;&nbsp;<span class="syntax-keyword">const</span> [count, setCount] = useState(<span
115+
class="syntax-number">0</span>);<br>
116+
&nbsp;&nbsp;<span class="syntax-keyword">const</span> [isVisible, setIsVisible] = useState(<span
117+
class="syntax-boolean">true</span>);<br><br>
118+
119+
&nbsp;&nbsp;<span class="syntax-keyword">const</span> <span
120+
class="syntax-function">handleIncrement</span> = () => {<br>
121+
&nbsp;&nbsp;&nbsp;&nbsp;setCount(prevCount => prevCount + <span class="syntax-number">1</span>);<br>
122+
&nbsp;&nbsp;};<br><br>
123+
124+
&nbsp;&nbsp;<span class="syntax-keyword">const</span> <span
125+
class="syntax-function">toggleVisibility</span> = () => {<br>
126+
&nbsp;&nbsp;&nbsp;&nbsp;setIsVisible(prev => !prev);<br>
127+
&nbsp;&nbsp;};<br><br>
128+
129+
&nbsp;&nbsp;<span class="syntax-keyword">return</span> (<br>
130+
&nbsp;&nbsp;&nbsp;&nbsp;<span class="syntax-tag">&lt;div</span> <span
131+
class="syntax-attr">className</span>=<span class="syntax-string">"my-component"</span><span
132+
class="syntax-tag">&gt;</span><br>
133+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="syntax-tag">&lt;h2&gt;</span>My Example Component<span
134+
class="syntax-tag">&lt;/h2&gt;</span><br><br>
94135

95-
<div class="text-center mb-16">
96-
<h2 class="text-3xl font-bold mb-4">Start in console</h2>
97-
<img src="img/serve-console.png" alt="ReactStream Logo" class="w-auto mr-4">
136+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{isVisible && (<br>
137+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="syntax-tag">&lt;div</span> <span
138+
class="syntax-attr">className</span>=<span class="syntax-string">"counter-section"</span><span
139+
class="syntax-tag">&gt;</span><br>
140+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="syntax-tag">&lt;p&gt;</span>Count:
141+
{count}<span class="syntax-tag">&lt;/p&gt;</span><br>
142+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="syntax-tag">&lt;button</span>
143+
<span class="syntax-attr">onClick</span>={handleIncrement}<span class="syntax-tag">&gt;</span><br>
144+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Increment<br>
145+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
146+
class="syntax-tag">&lt;/button&gt;</span><br>
147+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="syntax-tag">&lt;/div&gt;</span><br>
148+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;)}<br><br>
149+
150+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="syntax-tag">&lt;button</span> <span
151+
class="syntax-attr">onClick</span>={toggleVisibility}<span class="syntax-tag">&gt;</span><br>
152+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{isVisible ? <span class="syntax-string">'Hide'</span> :
153+
<span class="syntax-string">'Show'</span>} Counter<br>
154+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="syntax-tag">&lt;/button&gt;</span><br>
155+
&nbsp;&nbsp;&nbsp;&nbsp;<span class="syntax-tag">&lt;/div&gt;</span><br>
156+
&nbsp;&nbsp;);<br>
157+
};<br><br>
158+
159+
<span class="syntax-keyword">export</span> <span class="syntax-keyword">default</span> MyComponent;
160+
</div>
98161
</div>
99162

100-
<p></p>
101-
<div class="text-center mb-16">
102-
<h2 class="text-3xl font-bold mb-4">and ... go to browser <a class="underline-dash" href="http://localhost:3000/">http://localhost:3000/</a></h2>
103-
<img src="img/serve-browser.png" alt="ReactStream Logo" class="w-auto mr-4">
163+
<div class="code-terminal mt-4">
164+
165+
<div class="text-center">
166+
<h2 class="text-2xl font-bold mb-4">Start in console</h2>
167+
<img src="img/serve-console.png" alt="ReactStream Logo" class="w-auto mr-4">
168+
</div>
169+
</div>
170+
171+
<div class="code-browser mt-4">
172+
<p></p>
173+
<div class="text-center">
174+
<h2 class="text-2xl font-bold mb-4">and ... go to browser <a class="underline-dash"
175+
href="http://localhost:3000/">http://localhost:3000/</a>
176+
</h2>
177+
<img src="img/serve-browser.png" alt="ReactStream Logo" class="w-auto mr-4">
178+
</div>
179+
104180
</div>
105181

106182
</div>
107183
</section>
108184

185+
<img src="img/logo-reactstream1.svg" alt="ReactStream Logo" class="w-auto mr-4">
186+
<p></p>
109187
<!-- Include other sections as separate components -->
110188
<div id="features-container"></div>
111189
<div id="how-it-works-container"></div>

0 commit comments

Comments
 (0)