JavaScript and React course · Module 1: React Basics
Environment setup
In this lesson6
Preparing for a journey through the React universe, we need a suitable spaceship to take us on this fascinating adventure. That ship will be our development environment, which we must properly configure so our journey goes smoothly.
Let's start with the problem. The browser does not understand the JSX syntax you saw in components. It also doesn't know how to combine dozens of files into one fast application. Someone has to translate and bundle our code before it reaches the user. That someone is the development tooling, and preparing it is what this lesson is about. JSX is translated by a compiler such as Babel: it first parses the code into a syntax tree (AST, Abstract Syntax Tree), then transforms that tree with plugins and presets, and finally generates plain JavaScript that browsers understand.
Why is environment setup important?
A well-configured development environment is the foundation for effective work with React. It allows you to:
- Quickly create and test components
- Automatically refresh the page after making changes (Hot Reloading)
- Detect errors at an early stage
- Optimize code before production deployment
About the second point: in Vite this mechanism is called HMR (Hot Module Replacement), and in React projects it works as Fast Refresh. When you save a file, only the edited component changes, and the state of the rest of the application is preserved.
Imagine trying to build an advanced spaceship without the right tools - it would be extremely difficult and time-consuming. The same goes for creating React applications without a proper environment.
Prerequisites
Before we start configuring our React environment, let's make sure we have all the necessary tools installed:
- Code editor - We recommend Visual Studio Code, which offers excellent React support through many extensions
- Web browser - Preferably Chrome or Firefox with React Developer Tools installed
- Terminal - The built-in terminal in your operating system or one integrated with the code editor
Once we have these basic tools, we can proceed to configure the React environment.
Node.js - the engine in the engine room
There is a fourth and most important element: Node.js, an environment that runs JavaScript outside the browser. React itself runs in the user's browser, so Node.js is not part of the finished application. We need it on our computer to run the development tools: the preview server, the JSX compiler and the production build process. Node.js comes with the npm package manager, which we will use to download React and Vite.
After installation (we will go through it step by step in the next lesson) you can check in the terminal that the engine is running:
1node -v
2npm -vEach command should print a version number. If the terminal says it doesn't know the command, Node.js is not installed yet or the terminal needs to be restarted. Nothing in your project changes here, it is just a pre-launch check.
Choosing a configuration approach
There are two main approaches to React environment configuration:
- Build tools from scratch - Manually configuring Webpack, Babel, and other tools
- Ready-made solutions - Using tools like Vite, Next.js, or Remix
For beginners, we definitely recommend the second approach, as it allows you to focus on learning React rather than configuration details.
It is worth knowing exactly what the react.dev documentation says today. For new applications it recommends starting with a framework, such as Next.js, React Router (version 7, into which Remix development was moved) or Expo for mobile apps. If you build an app without a framework, the documentation points to the build tools Vite, Parcel and Rsbuild.
In our course, we'll be using Vite - a modern, fast build tool that the React documentation lists among the recommended ways to create a project without a framework. I choose it on purpose: it doesn't add its own rules for routing or data fetching, so you see plain React. Create React App (CRA) has been deprecated and is no longer maintained - the React team announced this in February 2025, so if you come across a tutorial using create-react-app, treat it as archival.
What you get in a Vite project
A project created by Vite has ready-made scripts in its package.json file. They are what runs the tools powered by Node.js:
1{
2 "scripts": {
3 "dev": "vite",
4 "build": "vite build",
5 "preview": "vite preview"
6 }
7}The npm run dev command starts the preview server with Fast Refresh, npm run build creates an optimized production version in the dist folder, and npm run preview lets you view it locally. Your component code stays the same in all three cases, only the way the tools prepare it changes.
A first look through React Developer Tools
The React Developer Tools extension shows you the component tree of a running application. In it you will see an important React principle: one-way data flow. Data flows from a parent component to a child through props, never the other way round:
1function Bridge() {
2 return <FuelGauge fuel={80} />;
3}Here Bridge passes the fuel value down to FuelGauge. The child can display it but cannot change it in the parent - in DevTools you will see it as a prop of the FuelGauge component. You will learn more about this flow when we start building our own components.
My recommendation: install VS Code, the current LTS version of Node.js and React Developer Tools right away, and create projects with Vite. This set is enough for the whole course. In the next lesson we will go step by step through installing Node.js and npm.
In the sandbox below you can expand the cards of different tools and compare their pros and cons.
Remember: Node.js is the engine in the engine room that powers the development tools, and Vite is the ship on which you comfortably launch with React.
Code for this lesson: App.jsx
1import React from 'react';
2
3// Component demonstrating various tools
4function DevelopmentTool({ name, logo, type, description, pros, cons, difficulty }) {
5 const [isExpanded, setIsExpanded] = React.useState(false);
6
7 const getDifficultyColor = (level) => {
8 switch(level) {
9 case 'Easy': return '#4caf50';
10 case 'Medium': return '#ff9800';
11 case 'Hard': return '#f44336';
12 default: return '#666';
13 }
14 };
15
16 const getTypeColor = (toolType) => {
17 switch(toolType) {
18 case 'CLI Tool': return '#2196f3';
19 case 'Build Tool': return '#9c27b0';
20 case 'Framework': return '#ff5722';
21 default: return '#666';
22 }
23 };
24
25 return (
26 <div style={{
27 border: '2px solid #e0e0e0',
28 borderRadius: '12px',
29 margin: '15px 0',
30 overflow: 'hidden',
31 transition: 'all 0.3s ease',
32 boxShadow: isExpanded ? '0 8px 25px rgba(0,0,0,0.15)' : '0 2px 8px rgba(0,0,0,0.1)'
33 }}>
34 <div
35 style={{
36 padding: '20px',
37 backgroundColor: 'white',
38 cursor: 'pointer',
39 display: 'flex',
40 alignItems: 'center',
41 justifyContent: 'space-between'
42 }}
43 onClick={() => setIsExpanded(!isExpanded)}
44 >
45 <div style={{ display: 'flex', alignItems: 'center', gap: '15px' }}>
46 <div style={{ fontSize: '48px' }}>{logo}</div>
47 <div>
48 <h3 style={{ margin: '0 0 5px 0', color: '#333' }}>{name}</h3>
49 <div style={{ display: 'flex', gap: '10px' }}>
50 <span style={{
51 padding: '4px 12px',
52 backgroundColor: getTypeColor(type),
53 color: 'white',
54 borderRadius: '15px',
55 fontSize: '12px',
56 fontWeight: 'bold'
57 }}>
58 {type}
59 </span>
60 <span style={{
61 padding: '4px 12px',
62 backgroundColor: getDifficultyColor(difficulty),
63 color: 'white',
64 borderRadius: '15px',
65 fontSize: '12px',
66 fontWeight: 'bold'
67 }}>
68 {difficulty}
69 </span>
70 </div>
71 </div>
72 </div>
73 <div style={{
74 fontSize: '20px',
75 color: '#666',
76 transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)',
77 transition: 'transform 0.3s ease'
78 }}>
79 ▼
80 </div>
81 </div>
82
83 {isExpanded && (
84 <div style={{
85 padding: '20px',
86 backgroundColor: '#f8f9fa',
87 borderTop: '1px solid #e0e0e0'
88 }}>
89 <p style={{
90 marginBottom: '20px',
91 color: '#666',
92 lineHeight: '1.6',
93 fontSize: '16px'
94 }}>
95 {description}
96 </p>
97
98 <div style={{
99 display: 'grid',
100 gridTemplateColumns: '1fr 1fr',
101 gap: '20px'
102 }}>
103 <div>
104 <h4 style={{ color: '#4caf50', marginBottom: '10px' }}>Pros</h4>
105 <ul style={{ margin: 0, paddingLeft: '20px', color: '#333' }}>
106 {pros.map((pro, index) => (
107 <li key={index} style={{ marginBottom: '5px' }}>{pro}</li>
108 ))}
109 </ul>
110 </div>
111
112 <div>
113 <h4 style={{ color: '#f44336', marginBottom: '10px' }}>Cons</h4>
114 <ul style={{ margin: 0, paddingLeft: '20px', color: '#333' }}>
115 {cons.map((con, index) => (
116 <li key={index} style={{ marginBottom: '5px' }}>{con}</li>
117 ))}
118 </ul>
119 </div>
120 </div>
121 </div>
122 )}
123 </div>
124 );
125}
126
127// Component demonstrating the setup process
128function SetupProcess() {
129 const [currentStep, setCurrentStep] = React.useState(0);
130 const [selectedTool, setSelectedTool] = React.useState('Vite');
131
132 const steps = {
133 CRA: [
134 {
135 title: "Check Node.js",
136 command: "node --version",
137 expected: "v20.19.0 or newer",
138 description: "Make sure you have Node.js installed"
139 },
140 {
141 title: "Create a new project",
142 command: "npx create-react-app my-app",
143 expected: "The project will be created",
144 description: "Create React App will automatically configure everything"
145 },
146 {
147 title: "Navigate to the project",
148 command: "cd my-app",
149 expected: "Directory changed",
150 description: "Enter the folder with the new project"
151 },
152 {
153 title: "Start server",
154 command: "npm start",
155 expected: "The app opens at localhost:3000",
156 description: "Start the development server with hot reloading"
157 }
158 ],
159 Vite: [
160 {
161 title: "Check Node.js",
162 command: "node --version",
163 expected: "v20.19.0 or newer",
164 description: "Vite requires Node.js 20.19+ or 22.12+"
165 },
166 {
167 title: "Create a project with Vite",
168 command: "npm create vite@latest my-app -- --template react",
169 expected: "The Vite project will be created",
170 description: "Vite is faster and more modern"
171 },
172 {
173 title: "Install dependencies",
174 command: "cd my-app && npm install",
175 expected: "Dependencies installed",
176 description: "Install all required packages"
177 },
178 {
179 title: "Start server",
180 command: "npm run dev",
181 expected: "The app opens at localhost:5173",
182 description: "Vite uses a different port than CRA"
183 }
184 ]
185 };
186
187 const currentSteps = steps[selectedTool];
188 const currentStepData = currentSteps[currentStep];
189
190 const nextStep = () => {
191 if (currentStep < currentSteps.length - 1) {
192 setCurrentStep(currentStep + 1);
193 }
194 };
195
196 const prevStep = () => {
197 if (currentStep > 0) {
198 setCurrentStep(currentStep - 1);
199 }
200 };
201
202 const resetSteps = () => {
203 setCurrentStep(0);
204 };
205
206 const changeTool = (tool) => {
207 setSelectedTool(tool);
208 setCurrentStep(0);
209 };
210
211 return (
212 <div style={{
213 backgroundColor: '#f3e5f5',
214 padding: '25px',
215 borderRadius: '12px',
216 margin: '20px 0'
217 }}>
218 <h3 style={{ color: '#7b1fa2', marginBottom: '20px', textAlign: 'center' }}>
219 Interactive Setup Guide
220 </h3>
221
222 <div style={{
223 display: 'flex',
224 justifyContent: 'center',
225 gap: '10px',
226 marginBottom: '25px'
227 }}>
228 <button
229 onClick={() => changeTool('CRA')}
230 style={{
231 padding: '10px 20px',
232 backgroundColor: selectedTool === 'CRA' ? '#9c27b0' : 'white',
233 color: selectedTool === 'CRA' ? 'white' : '#333',
234 border: '2px solid #9c27b0',
235 borderRadius: '8px',
236 cursor: 'pointer',
237 fontWeight: 'bold'
238 }}
239 >
240 Create React App
241 </button>
242
243 <button
244 onClick={() => changeTool('Vite')}
245 style={{
246 padding: '10px 20px',
247 backgroundColor: selectedTool === 'Vite' ? '#9c27b0' : 'white',
248 color: selectedTool === 'Vite' ? 'white' : '#333',
249 border: '2px solid #9c27b0',
250 borderRadius: '8px',
251 cursor: 'pointer',
252 fontWeight: 'bold'
253 }}
254 >
255 Vite
256 </button>
257 </div>
258
259 <div style={{
260 backgroundColor: 'white',
261 padding: '25px',
262 borderRadius: '8px',
263 minHeight: '200px'
264 }}>
265 <div style={{
266 display: 'flex',
267 alignItems: 'center',
268 marginBottom: '20px'
269 }}>
270 <div style={{
271 width: '50px',
272 height: '50px',
273 backgroundColor: '#9c27b0',
274 color: 'white',
275 borderRadius: '50%',
276 display: 'flex',
277 alignItems: 'center',
278 justifyContent: 'center',
279 fontWeight: 'bold',
280 fontSize: '18px',
281 marginRight: '15px'
282 }}>
283 {currentStep + 1}
284 </div>
285 <h4 style={{ margin: 0, color: '#333', fontSize: '1.3rem' }}>
286 {currentStepData.title}
287 </h4>
288 </div>
289
290 <p style={{
291 color: '#666',
292 marginBottom: '20px',
293 fontSize: '16px',
294 lineHeight: '1.5'
295 }}>
296 {currentStepData.description}
297 </p>
298
299 <div style={{
300 backgroundColor: '#1e1e1e',
301 color: '#00ff00',
302 padding: '15px',
303 borderRadius: '6px',
304 fontFamily: 'Monaco, monospace',
305 marginBottom: '15px',
306 fontSize: '14px',
307 overflow: 'auto'
308 }}>
309 <div style={{ marginBottom: '5px', color: '#888' }}>$ {currentStepData.command}</div>
310 <div style={{ color: '#00ff00' }}>{currentStepData.expected}</div>
311 </div>
312
313 <div style={{
314 display: 'flex',
315 justifyContent: 'space-between',
316 alignItems: 'center'
317 }}>
318 <div style={{
319 display: 'flex',
320 gap: '10px'
321 }}>
322 <button
323 onClick={prevStep}
324 disabled={currentStep === 0}
325 style={{
326 padding: '8px 16px',
327 backgroundColor: currentStep === 0 ? '#ccc' : '#666',
328 color: 'white',
329 border: 'none',
330 borderRadius: '4px',
331 cursor: currentStep === 0 ? 'not-allowed' : 'pointer'
332 }}
333 >
334 ← Previous
335 </button>
336
337 <button
338 onClick={nextStep}
339 disabled={currentStep === currentSteps.length - 1}
340 style={{
341 padding: '8px 16px',
342 backgroundColor: currentStep === currentSteps.length - 1 ? '#ccc' : '#9c27b0',
343 color: 'white',
344 border: 'none',
345 borderRadius: '4px',
346 cursor: currentStep === currentSteps.length - 1 ? 'not-allowed' : 'pointer'
347 }}
348 >
349 Next →
350 </button>
351
352 <button
353 onClick={resetSteps}
354 style={{
355 padding: '8px 16px',
356 backgroundColor: '#f44336',
357 color: 'white',
358 border: 'none',
359 borderRadius: '4px',
360 cursor: 'pointer'
361 }}
362 >
363 Reset
364 </button>
365 </div>
366
367 <div style={{ display: 'flex', gap: '5px', alignItems: 'center' }}>
368 {currentSteps.map((_, index) => (
369 <div
370 key={index}
371 style={{
372 width: '12px',
373 height: '12px',
374 borderRadius: '50%',
375 backgroundColor: index <= currentStep ? '#9c27b0' : '#ddd',
376 transition: 'background-color 0.3s'
377 }}
378 />
379 ))}
380 <span style={{ marginLeft: '10px', color: '#666', fontSize: '14px' }}>
381 {currentStep + 1} / {currentSteps.length}
382 </span>
383 </div>
384 </div>
385 </div>
386 </div>
387 );
388}
389
390// Component for comparing tools
391function ToolComparison() {
392 const tools = [
393 {
394 name: 'Create React App',
395 speed: 70,
396 ease: 95,
397 flexibility: 40,
398 popularity: 90
399 },
400 {
401 name: 'Vite',
402 speed: 95,
403 ease: 85,
404 flexibility: 80,
405 popularity: 75
406 },
407 {
408 name: 'Next.js',
409 speed: 85,
410 ease: 60,
411 flexibility: 90,
412 popularity: 85
413 },
414 {
415 name: 'Manual Setup',
416 speed: 30,
417 ease: 20,
418 flexibility: 100,
419 popularity: 30
420 }
421 ];
422
423 return (
424 <div style={{
425 backgroundColor: '#e3f2fd',
426 padding: '25px',
427 borderRadius: '12px',
428 margin: '20px 0'
429 }}>
430 <h3 style={{ color: '#1976d2', textAlign: 'center', marginBottom: '25px' }}>
431 React Setup Tools Comparison
432 </h3>
433
434 <div style={{
435 display: 'grid',
436 gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))',
437 gap: '20px'
438 }}>
439 {tools.map((tool, index) => (
440 <div key={index} style={{
441 backgroundColor: 'white',
442 padding: '20px',
443 borderRadius: '8px',
444 boxShadow: '0 2px 8px rgba(0,0,0,0.1)'
445 }}>
446 <h4 style={{ color: '#1976d2', marginBottom: '15px', textAlign: 'center' }}>
447 {tool.name}
448 </h4>
449
450 <div style={{ marginBottom: '12px' }}>
451 <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '4px' }}>
452 <span style={{ fontSize: '14px' }}>Speed</span>
453 <span style={{ fontSize: '14px' }}>{tool.speed}%</span>
454 </div>
455 <div style={{
456 height: '8px',
457 backgroundColor: '#e0e0e0',
458 borderRadius: '4px',
459 overflow: 'hidden'
460 }}>
461 <div style={{
462 height: '100%',
463 backgroundColor: '#4caf50',
464 width: `${tool.speed}%`,
465 transition: 'width 1s ease'
466 }}></div>
467 </div>
468 </div>
469
470 <div style={{ marginBottom: '12px' }}>
471 <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '4px' }}>
472 <span style={{ fontSize: '14px' }}>Ease of use</span>
473 <span style={{ fontSize: '14px' }}>{tool.ease}%</span>
474 </div>
475 <div style={{
476 height: '8px',
477 backgroundColor: '#e0e0e0',
478 borderRadius: '4px',
479 overflow: 'hidden'
480 }}>
481 <div style={{
482 height: '100%',
483 backgroundColor: '#2196f3',
484 width: `${tool.ease}%`,
485 transition: 'width 1s ease'
486 }}></div>
487 </div>
488 </div>
489
490 <div style={{ marginBottom: '12px' }}>
491 <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '4px' }}>
492 <span style={{ fontSize: '14px' }}>Flexibility</span>
493 <span style={{ fontSize: '14px' }}>{tool.flexibility}%</span>
494 </div>
495 <div style={{
496 height: '8px',
497 backgroundColor: '#e0e0e0',
498 borderRadius: '4px',
499 overflow: 'hidden'
500 }}>
501 <div style={{
502 height: '100%',
503 backgroundColor: '#ff9800',
504 width: `${tool.flexibility}%`,
505 transition: 'width 1s ease'
506 }}></div>
507 </div>
508 </div>
509
510 <div style={{ marginBottom: '12px' }}>
511 <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '4px' }}>
512 <span style={{ fontSize: '14px' }}>Popularity</span>
513 <span style={{ fontSize: '14px' }}>{tool.popularity}%</span>
514 </div>
515 <div style={{
516 height: '8px',
517 backgroundColor: '#e0e0e0',
518 borderRadius: '4px',
519 overflow: 'hidden'
520 }}>
521 <div style={{
522 height: '100%',
523 backgroundColor: '#9c27b0',
524 width: `${tool.popularity}%`,
525 transition: 'width 1s ease'
526 }}></div>
527 </div>
528 </div>
529 </div>
530 ))}
531 </div>
532 </div>
533 );
534}
535
536export default function App() {
537 return (
538 <div style={{
539 fontFamily: 'Arial, sans-serif',
540 maxWidth: '1000px',
541 margin: '0 auto',
542 padding: '20px'
543 }}>
544 <header style={{
545 textAlign: 'center',
546 marginBottom: '30px',
547 padding: '25px',
548 background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
549 color: 'white',
550 borderRadius: '12px'
551 }}>
552 <h1 style={{ margin: '0 0 10px 0', fontSize: '2.2rem' }}>
553 React Environment Setup
554 </h1>
555 <p style={{ margin: 0, fontSize: '1rem', opacity: 0.9 }}>
556 Everything you need to know about preparing a development environment for React
557 </p>
558 </header>
559
560 <section style={{ marginBottom: '30px' }}>
561 <h2 style={{
562 color: '#333',
563 borderBottom: '2px solid #667eea',
564 paddingBottom: '10px',
565 marginBottom: '20px'
566 }}>
567 Available Tools
568 </h2>
569
570 <DevelopmentTool
571 name="Create React App"
572 logo="◆"
573 type="CLI Tool"
574 difficulty="Easy"
575 description="The former official React tool, deprecated in February 2025 and no longer maintained. You will meet it in older tutorials."
576 pros={[
577 "Zero configuration to start",
578 "Official React support",
579 "Built-in hot reloading",
580 "Production optimization",
581 "Testing support"
582 ]}
583 cons={[
584 "Less flexibility",
585 "Larger bundle size",
586 "Hard to customize",
587 "Can be overkill for simple projects"
588 ]}
589 />
590
591 <DevelopmentTool
592 name="Vite"
593 logo="↯"
594 type="Build Tool"
595 difficulty="Medium"
596 description="Modern build tool with native ES modules support. Lightning fast."
597 pros={[
598 "Very fast development server",
599 "Native ES modules",
600 "Smaller bundle size",
601 "Better hot reloading",
602 "TypeScript support out-of-the-box"
603 ]}
604 cons={[
605 "Younger technology",
606 "Smaller plugin ecosystem",
607 "May require additional configuration",
608 "Fewer ready-made templates"
609 ]}
610 />
611
612 <DevelopmentTool
613 name="Next.js"
614 logo="▲"
615 type="Framework"
616 difficulty="Medium"
617 description="Full-stack React framework with server-side rendering, routing and many other features."
618 pros={[
619 "Server-side rendering",
620 "Automatic routing",
621 "Built-in API routes",
622 "Image optimization",
623 "Great performance"
624 ]}
625 cons={[
626 "Can be overkill for simple SPAs",
627 "Steeper learning curve",
628 "Opinionated structure",
629 "Greater complexity"
630 ]}
631 />
632
633 <DevelopmentTool
634 name="Manual Setup"
635 logo="◆"
636 type="Build Tool"
637 difficulty="Hard"
638 description="Manual configuration of Webpack, Babel and other tools. Maximum control, but requires knowledge."
639 pros={[
640 "Full control over configuration",
641 "Ability to customize for specific needs",
642 "Deeper understanding of tools",
643 "Optimal performance"
644 ]}
645 cons={[
646 "Very time-consuming",
647 "Requires advanced knowledge",
648 "Complicated to maintain",
649 "Easy to make mistakes"
650 ]}
651 />
652 </section>
653
654 <SetupProcess />
655 <ToolComparison />
656
657 <div style={{
658 backgroundColor: '#e8f5e8',
659 padding: '25px',
660 borderRadius: '12px',
661 marginTop: '30px'
662 }}>
663 <h3 style={{ color: '#2e7d32', textAlign: 'center', marginBottom: '20px' }}>
664 Which Tool to Choose?
665 </h3>
666
667 <div style={{
668 display: 'grid',
669 gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
670 gap: '20px'
671 }}>
672 <div style={{
673 backgroundColor: 'white',
674 padding: '20px',
675 borderRadius: '8px',
676 textAlign: 'center'
677 }}>
678 <h4 style={{ color: '#2196f3', marginBottom: '10px' }}>Beginners</h4>
679 <p style={{ margin: 0, color: '#666' }}>
680 <strong>Vite</strong><br/>
681 Quick start, recommended in this course
682 </p>
683 </div>
684
685 <div style={{
686 backgroundColor: 'white',
687 padding: '20px',
688 borderRadius: '8px',
689 textAlign: 'center'
690 }}>
691 <h4 style={{ color: '#2196f3', marginBottom: '10px' }}>Performance</h4>
692 <p style={{ margin: 0, color: '#666' }}>
693 <strong>Vite</strong><br/>
694 Development speed
695 </p>
696 </div>
697
698 <div style={{
699 backgroundColor: 'white',
700 padding: '20px',
701 borderRadius: '8px',
702 textAlign: 'center'
703 }}>
704 <h4 style={{ color: '#2196f3', marginBottom: '10px' }}>Full-Stack</h4>
705 <p style={{ margin: 0, color: '#666' }}>
706 <strong>Next.js</strong><br/>
707 SSR, routing, API
708 </p>
709 </div>
710
711 <div style={{
712 backgroundColor: 'white',
713 padding: '20px',
714 borderRadius: '8px',
715 textAlign: 'center'
716 }}>
717 <h4 style={{ color: '#2196f3', marginBottom: '10px' }}>Experts</h4>
718 <p style={{ margin: 0, color: '#666' }}>
719 <strong>Manual Setup</strong><br/>
720 Full control
721 </p>
722 </div>
723 </div>
724 </div>
725 </div>
726 );
727}Spotted a mistake in this lesson?
Check yourself
Answer the questions from this lesson. Pick an answer to see right away whether it is correct.
1. Why is Node.js needed for React development?
2. How does one-way data flow work in React?