JavaScript and React course · Module 1: React Basics
History and philosophy of React
In this lesson2
Our journey with React began in the offices of Facebook (now Meta) in 2011. Jordan Walke, an engineer working for the company, created an early version of React, inspired by functional aspects of programming and the problems developers faced when building complex user interfaces.
Facebook initially used React internally for its News Feed, but the real breakthrough came in 2013 when they decided to release the library as an open-source project. That was the moment when React began its journey to the stars, becoming one of the most popular libraries for building user interfaces in the world.
React's Philosophy
React's philosophy is based on several revolutionary concepts:
Declarativeness - React allows you to describe how the interface should look in a given state, rather than imperatively specifying how to change it. It's like the difference between saying "draw me a star with five arms" (declaratively) and "draw a line at 72 degrees, then at 144 degrees..." (imperatively).
Component-based architecture - An application is built from independent, reusable components, similar to how a spaceship is composed of modules that can be manufactured, tested, and improved independently. Every button, panel, and form can be a separate component that connects with others to create a cohesive whole.
Unidirectional data flow - Data flows from top to bottom (from parent to child), making it easier to understand how data moves through the application. Imagine a cascade - water always flows from top to bottom, never in reverse. This predictability makes applications more stable and easier to debug.
"Think about the user" - React encourages creating interfaces that are intuitive and user-friendly. This is a fundamental change compared to earlier approaches where technology often dictated the user experience.
History of React's development
React has undergone a fascinating evolution since its first public release:
2013: First release
- Introduction of the component architecture concept
- Implementation of Virtual DOM
- Initial support for JSX
2015: React Native
- Extending React's philosophy to mobile applications
- The same syntax and similar concepts for building native mobile apps
2016: React 15
- Significant performance improvements
- Better error and warning messages
2017: React 16 (Fiber)
- Complete rebuild of the reconciliation algorithm
- Introduction of fragments, portals, and error handling
- Better support for asynchronous rendering
2019: React 16.8 (Hooks)
- Revolutionary change in state and side effect management
- Enabling the use of state and other React features without writing classes
- Significant simplification of code and logic
2020-2022: React 17 and 18
- New JSX transform (React 17) - importing React in JSX files is no longer needed
- Concurrent rendering and createRoot (React 18)
- Automatic update batching
- Suspense in server-side rendering too
2024: React 19
- Stable Server Components and Actions
- Removal of deprecated APIs, including ReactDOM.render
This evolution shows how React has consistently developed to meet the challenges of modern web application development, always focusing on improving the experience for both developers and end users.
Code for this lesson: App.jsx
1import React from 'react';
2
3// Timeline component for presenting React history
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// Component for presenting React philosophy
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// Interactive component demonstrating declarativeness
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 ? 'Hide' : 'Show'} 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 Add Item
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 Remove Item
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 The list is empty
166 </li>
167 )}
168 </ul>
169 )}
170
171 <p style={{
172 marginTop: '15px',
173 fontSize: '14px',
174 color: '#666',
175 fontStyle: 'italic'
176 }}>
177 Notice how declaratively we describe the UI: "if isVisible is true, show the 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' }}>History of React</h1>
200 <p style={{ margin: 0, fontSize: '1.1rem', opacity: 0.9 }}>
201 A journey through the evolution of the most popular JavaScript library
202 </p>
203 </header>
204
205 <section style={{ marginBottom: '40px' }}>
206 <h2 style={{ color: '#333', borderBottom: '2px solid #667eea', paddingBottom: '10px' }}>
207 Key Moments in React History
208 </h2>
209
210 <TimelineEvent
211 year="2011"
212 title="Birth of FaxJS"
213 description="Jordan Walke at Facebook creates an early version of React (then called FaxJS) inspired by XHP - a PHP component system."
214 />
215
216 <TimelineEvent
217 year="2013"
218 title="React Goes Open Source!"
219 description="Facebook releases React as an open source project. Tom Occhino and Jordan Walke present it at JSConf US."
220 isImportant={true}
221 />
222
223 <TimelineEvent
224 year="2015"
225 title="React Native"
226 description="Facebook introduces React Native, allowing developers to use React to build native mobile applications."
227 isImportant={true}
228 />
229
230 <TimelineEvent
231 year="2017"
232 title="React Fiber"
233 description="Complete rewrite of the React core (React 16) introducing a new reconciliation architecture called Fiber."
234 isImportant={true}
235 />
236
237 <TimelineEvent
238 year="2019"
239 title="React Hooks"
240 description="React 16.8 introduces Hooks, revolutionizing the way React components are written and state is managed."
241 isImportant={true}
242 />
243
244 <TimelineEvent
245 year="2022"
246 title="React 18"
247 description="Introduction of Concurrent Features, Automatic Batching, Suspense improvements and new hooks."
248 />
249
250 <TimelineEvent
251 year="2024"
252 title="React 19"
253 description="Stable Server Components and Actions; removal of deprecated APIs such as 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 React Philosophy
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="Declarativeness"
272 description="You describe WHAT the UI should look like in a given state, not WHAT steps to take to achieve it."
273 />
274
275 <PhilosophyCard
276 icon=""
277 title="Composability"
278 description="The application consists of independent, reusable components that can be composed together."
279 />
280
281 <PhilosophyCard
282 icon=""
283 title="Unidirectional Flow"
284 description="Data flows from top to bottom, making the application predictable and easy to debug."
285 />
286
287 <PhilosophyCard
288 icon=""
289 title="Learn Once, Write Anywhere"
290 description="The same concepts work on web, mobile (React Native) and 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 Today</h3>
305 <p style={{ color: '#6c757d', lineHeight: '1.6' }}>
306 React is used by millions of developers worldwide in companies such as
307 Facebook, Netflix, Airbnb, Uber, WhatsApp, Instagram and thousands of others.
308 Its ecosystem includes thousands of libraries and tools, making it one of the
309 most powerful platforms for building modern web applications.
310 </p>
311 </footer>
312 </div>
313 );
314}