Historia i filozofia React

1import React from 'react';
2
3// Timeline component do prezentacji historii React
4function TimelineEvent({ year, title, description, isImportant }) {
5  return (
6    <div style={{
7      display: 'flex',
8      marginBottom: '20px',
9      alignItems: 'flex-start'
10    }}>
11      <div style={{
12        minWidth: '80px',
13        textAlign: 'right',
14        marginRight: '20px'
15      }}>
16        <div style={{
17          backgroundColor: isImportant ? '#ff5722' : '#2196f3',
18          color: 'white',
19          padding: '5px 10px',
20          borderRadius: '15px',
21          fontSize: '14px',
22          fontWeight: 'bold'
23        }}>
24          {year}
25        </div>
26      </div>
27      <div style={{
28        flex: 1,
29        padding: '15px',
30        backgroundColor: isImportant ? '#fff3e0' : '#e3f2fd',
31        borderRadius: '8px',
32        borderLeft: `4px solid ${isImportant ? '#ff5722' : '#2196f3'}`
33      }}>
34        <h3 style={{
35          margin: '0 0 10px 0',
36          color: isImportant ? '#e65100' : '#1565c0'
37        }}>
38          {title}
39        </h3>
40        <p style={{ margin: 0, lineHeight: '1.5' }}>
41          {description}
42        </p>
43      </div>
44    </div>
45  );
46}
47
48// Komponent do prezentacji filozofii React
49function PhilosophyCard({ icon, title, description }) {
50  return (
51    <div style={{
52      backgroundColor: '#f8f9fa',
53      border: '1px solid #dee2e6',
54      borderRadius: '8px',
55      padding: '20px',
56      textAlign: 'center',
57      transition: 'transform 0.2s',
58      cursor: 'pointer'
59    }}
60    onMouseEnter={(e) => e.target.style.transform = 'translateY(-5px)'}
61    onMouseLeave={(e) => e.target.style.transform = 'translateY(0)'}
62    >
63      <div style={{ fontSize: '48px', marginBottom: '15px' }}>{icon}</div>
64      <h3 style={{ color: '#343a40', marginBottom: '10px' }}>{title}</h3>
65      <p style={{ color: '#6c757d', lineHeight: '1.5' }}>{description}</p>
66    </div>
67  );
68}
69
70// Interaktywny komponent demonstrujący deklaratywność
71function DeclarativeExample() {
72  const [isVisible, setIsVisible] = React.useState(true);
73  const [items, setItems] = React.useState(['Element 1', 'Element 2', 'Element 3']);
74
75  const addItem = () => {
76    const newItem = `Element ${items.length + 1}`;
77    setItems([...items, newItem]);
78  };
79
80  const removeItem = () => {
81    setItems(items.slice(0, -1));
82  };
83
84  return (
85    <div style={{
86      backgroundColor: '#e8f5e8',
87      padding: '20px',
88      borderRadius: '8px',
89      margin: '20px 0'
90    }}>
91      <h3 style={{ color: '#2e7d32' }}>Deklaratywny React w Akcji</h3>
92
93      <div style={{ marginBottom: '20px' }}>
94        <button
95          onClick={() => setIsVisible(!isVisible)}
96          style={{
97            padding: '10px 15px',
98            margin: '5px',
99            backgroundColor: '#4caf50',
100            color: 'white',
101            border: 'none',
102            borderRadius: '4px',
103            cursor: 'pointer'
104          }}
105        >
106          {isVisible ? 'Ukryj' : 'Pokaż'} Listę
107        </button>
108
109        <button
110          onClick={addItem}
111          style={{
112            padding: '10px 15px',
113            margin: '5px',
114            backgroundColor: '#2196f3',
115            color: 'white',
116            border: 'none',
117            borderRadius: '4px',
118            cursor: 'pointer'
119          }}
120        >
121          Dodaj Element
122        </button>
123
124        <button
125          onClick={removeItem}
126          disabled={items.length === 0}
127          style={{
128            padding: '10px 15px',
129            margin: '5px',
130            backgroundColor: items.length === 0 ? '#ccc' : '#f44336',
131            color: 'white',
132            border: 'none',
133            borderRadius: '4px',
134            cursor: items.length === 0 ? 'not-allowed' : 'pointer'
135          }}
136        >
137          Usuń Element
138        </button>
139      </div>
140
141      {isVisible && (
142        <ul style={{
143          backgroundColor: 'white',
144          padding: '15px',
145          borderRadius: '4px',
146          listStyle: 'none'
147        }}>
148          {items.map((item, index) => (
149            <li key={index} style={{
150              padding: '8px',
151              margin: '5px 0',
152              backgroundColor: '#f0f0f0',
153              borderRadius: '4px'
154            }}>
155              {item}
156            </li>
157          ))}
158          {items.length === 0 && (
159            <li style={{
160              padding: '20px',
161              textAlign: 'center',
162              color: '#666',
163              fontStyle: 'italic'
164            }}>
165              Lista jest pusta
166            </li>
167          )}
168        </ul>
169      )}
170
171      <p style={{
172        marginTop: '15px',
173        fontSize: '14px',
174        color: '#666',
175        fontStyle: 'italic'
176      }}>
177        Zauważ jak deklaratywnie opisujemy UI: "jeśli isVisible jest true, pokaż listę"
178      </p>
179    </div>
180  );
181}
182
183export default function App() {
184  return (
185    <div style={{
186      fontFamily: 'Arial, sans-serif',
187      maxWidth: '900px',
188      margin: '0 auto',
189      padding: '20px'
190    }}>
191      <header style={{
192        textAlign: 'center',
193        marginBottom: '40px',
194        padding: '30px',
195        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
196        color: 'white',
197        borderRadius: '12px'
198      }}>
199        <h1 style={{ margin: '0 0 10px 0', fontSize: '2.5rem' }}>Historia React</h1>
200        <p style={{ margin: 0, fontSize: '1.1rem', opacity: 0.9 }}>
201          Podróż przez ewolucję najpopularniejszej biblioteki JavaScript
202        </p>
203      </header>
204
205      <section style={{ marginBottom: '40px' }}>
206        <h2 style={{ color: '#333', borderBottom: '2px solid #667eea', paddingBottom: '10px' }}>
207          Kluczowe Momenty w Historii React
208        </h2>
209
210        <TimelineEvent
211          year="2011"
212          title="Narodziny FaxJS"
213          description="Jordan Walke w Facebook tworzy wczesną wersję React (wtedy nazywaną FaxJS) inspirowaną XHP - systemem komponentów PHP."
214        />
215
216        <TimelineEvent
217          year="2013"
218          title="React staje się open source!"
219          description="Facebook udostępnia React jako projekt open source. Tom Occhino i Jordan Walke prezentują go na JSConf US."
220          isImportant={true}
221        />
222
223        <TimelineEvent
224          year="2015"
225          title="React Native"
226          description="Facebook przedstawia React Native, pozwalając deweloperom używać React do tworzenia natywnych aplikacji mobilnych."
227          isImportant={true}
228        />
229
230        <TimelineEvent
231          year="2017"
232          title="React Fiber"
233          description="Całkowite przepisanie jądra Reacta (React 16) wprowadzające nową architekturę reconciliation o nazwie Fiber."
234          isImportant={true}
235        />
236
237        <TimelineEvent
238          year="2019"
239          title="React Hooks"
240          description="React 16.8 wprowadza Hooks, rewolucjonizując sposób pisania komponentów React i zarządzania stanem."
241          isImportant={true}
242        />
243
244        <TimelineEvent
245          year="2022"
246          title="React 18"
247          description="Renderowanie współbieżne, automatyczne grupowanie aktualizacji, ulepszenia Suspense i nowe hooki."
248        />
249
250        <TimelineEvent
251          year="2024"
252          title="React 19"
253          description="Stabilne Server Components i Actions; usunięcie przestarzałych API, m.in. ReactDOM.render."
254          isImportant={true}
255        />
256      </section>
257
258      <section style={{ marginBottom: '40px' }}>
259        <h2 style={{ color: '#333', borderBottom: '2px solid #667eea', paddingBottom: '10px' }}>
260          Filozofia React
261        </h2>
262
263        <div style={{
264          display: 'grid',
265          gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))',
266          gap: '20px',
267          margin: '20px 0'
268        }}>
269          <PhilosophyCard
270            icon=""
271            title="Deklaratywność"
272            description="Opisujesz JAK ma wyglądać UI w danym stanie, a nie JAKIE kroki podjąć, aby go osiągnąć."
273          />
274
275          <PhilosophyCard
276            icon=""
277            title="Komponentowość"
278            description="Aplikacja składa się z niezależnych, wielokrotnego użytku komponentów, które można komponować."
279          />
280
281          <PhilosophyCard
282            icon=""
283            title="Jednokierunkowy Przepływ"
284            description="Dane płyną z góry na dół, co czyni aplikację przewidywalną i łatwą do debugowania."
285          />
286
287          <PhilosophyCard
288            icon=""
289            title="Learn Once, Write Anywhere"
290            description="Te same koncepcje działają na web, mobile (React Native) i desktop."
291          />
292        </div>
293      </section>
294
295      <DeclarativeExample />
296
297      <footer style={{
298        backgroundColor: '#f8f9fa',
299        padding: '20px',
300        borderRadius: '8px',
301        textAlign: 'center',
302        marginTop: '40px'
303      }}>
304        <h3 style={{ color: '#495057' }}>React Dzisiaj</h3>
305        <p style={{ color: '#6c757d', lineHeight: '1.6' }}>
306          React jest używany przez miliony deweloperów na całym świecie w firmach takich jak
307          Facebook, Netflix, Airbnb, Uber, WhatsApp, Instagram i tysiącach innych.
308          Jego ekosystem obejmuje tysiące bibliotek i narzędzi, czyniąc go jedną z
309          najpotężniejszych platform do tworzenia nowoczesnych aplikacji internetowych.
310        </p>
311      </footer>
312    </div>
313  );
314}