Histoire et philosophie de React

1import React from 'react';
2
3// Composant de chronologie pour présenter l'histoire de 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// Composant pour présenter la philosophie de 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// Composant interactif démontrant la déclarativité
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' }}>Declarative React in Action</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 ? 'Masquer' : 'Afficher'} la liste
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          Ajouter un élément
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          Supprimer un élément
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              La liste est vide
166            </li>
167          )}
168        </ul>
169      )}
170
171      <p style={{
172        marginTop: '15px',
173        fontSize: '14px',
174        color: '#666',
175        fontStyle: 'italic'
176      }}>
177        Remarque comme nous décrivons l'UI de façon déclarative : « si isVisible vaut true, affiche la liste »
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' }}>L'histoire de React</h1>
200        <p style={{ margin: 0, fontSize: '1.1rem', opacity: 0.9 }}>
201          Un voyage à travers l'évolution de la bibliothèque JavaScript la plus populaire
202        </p>
203      </header>
204
205      <section style={{ marginBottom: '40px' }}>
206        <h2 style={{ color: '#333', borderBottom: '2px solid #667eea', paddingBottom: '10px' }}>
207          Moments clés de l'histoire de React
208        </h2>
209
210        <TimelineEvent
211          year="2011"
212          title="Naissance de FaxJS"
213          description="Chez Facebook, Jordan Walke crée une première version de React (alors appelée FaxJS), inspirée de XHP - un système de composants PHP."
214        />
215
216        <TimelineEvent
217          year="2013"
218          title="React passe en open source !"
219          description="Facebook publie React en tant que projet open source. Tom Occhino et Jordan Walke le présentent à la JSConf US."
220          isImportant={true}
221        />
222
223        <TimelineEvent
224          year="2015"
225          title="React Native"
226          description="Facebook présente React Native, permettant aux développeurs d'utiliser React pour créer des applications mobiles natives."
227          isImportant={true}
228        />
229
230        <TimelineEvent
231          year="2017"
232          title="React Fiber"
233          description="Réécriture complète du cœur de React (React 16) introduisant une nouvelle architecture de réconciliation appelée Fiber."
234          isImportant={true}
235        />
236
237        <TimelineEvent
238          year="2019"
239          title="React Hooks"
240          description="React 16.8 introduit les Hooks, révolutionnant la façon d'écrire les composants React et de gérer l'état."
241          isImportant={true}
242        />
243
244        <TimelineEvent
245          year="2022"
246          title="React 18"
247          description="Introduction des fonctionnalités concurrentes, du batching automatique, des améliorations de Suspense et de nouveaux hooks."
248        />
249
250        <TimelineEvent
251          year="2024"
252          title="React 19"
253          description="Server Components et Actions stables ; suppression d'API obsolètes comme 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          La philosophie de 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="Déclarativité"
272            description="Tu décris CE À QUOI l'UI doit ressembler dans un état donné, et non QUELLES étapes suivre pour y parvenir."
273          />
274
275          <PhilosophyCard
276            icon="◆"
277            title="Composabilité"
278            description="L'application est constituée de composants indépendants et réutilisables qui peuvent être composés ensemble."
279          />
280
281          <PhilosophyCard
282            icon="▼"
283            title="Flux unidirectionnel"
284            description="Les données circulent de haut en bas, rendant l'application prévisible et facile à déboguer."
285          />
286
287          <PhilosophyCard
288            icon="◆"
289            title="Apprends une fois, écris partout"
290            description="Les mêmes concepts fonctionnent sur le web, le mobile (React Native) et le bureau."
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 aujourd'hui</h3>
305        <p style={{ color: '#6c757d', lineHeight: '1.6' }}>
306          React est utilisé par des millions de développeurs dans le monde, dans des entreprises telles que
307          Facebook, Netflix, Airbnb, Uber, WhatsApp, Instagram and thousands of others.
308          Son écosystème comprend des milliers de bibliothèques et d'outils, ce qui en fait l'une des
309          plateformes les plus puissantes pour construire des applications web modernes.
310        </p>
311      </footer>
312    </div>
313  );
314}