Chapter 00: Good Knowledge for Front-End Developers
_0.1 How the Web Works
__0.1.1 Client and Server
__0.1.2 Request and response flow
Check the result with the __0.1.3 status code
_0.2 Basic roles of HTML, CSS, and JavaScript
__0.2.1 HTML: Responsible for the structure of content
__0.2.2 CSS: Responsible for styling content
__0.2.3 JavaScript: Responsible for the operation of web pages
_0.3 Web Standards and Accessibility
__0.3.1 What are web standards?
__0.3.2 What is Web Accessibility?
_0.4 Browser rendering and performance optimizations
__0.4.1 Understanding the Browser Rendering Process
__0.4.2 Difference between reflow and repaint
__0.4.3 Factors affecting performance
_0.5 Development Environment and Workflow
__0.5.1 Essential Development Tools
__0.5.2 Automation System for Highest Quality
__0.5.3 Build tools, transpiling, and bundling
_0.6 Modern front-end trends and sensibilities
__0.6.1 Responsive Design
__0.6.2 UI/UX Design Principles
__0.6.3 Latest front-end keywords
_Learning completion
_Practice problems

[LEVEL 1] First Encounter with React

Chapter 1: Preparing the React Development Environment
_1.1 Setting up React on Windows
__1.1.1 Installing Node.js
__1.1.2 Installing VSCode
_1.2 Setting up React on macOS
__1.2.1 Installing Node.js
__1.2.2 Installing VSCode and setting up the project folder
_1.3 Setting up VSCode
__1.3.1 Setting up a workspace in VSCode
__1.3.2 Installing the extension
__1.3.3 Changing the default terminal: Windows
__1.3.4 Change tab size from 4 to 2 when entering code
__1.3.5 Turn on auto-save

Chapter 2: Creating a React Project
_2.1 Creating a project with Bit
_2.2 Organizing the Project
_2.3 Installing Chrome Extensions for React Development
_Learning completion
_Practice problems

[LEVEL 2] Learning the Basics of React

Chapter 3 React Components
_3.1 Understanding React Components
_3.2 Examining the component structure
_3.3 What is JSX?
_3.4 How should components be displayed?
_3.5 Creating a project and configuring basic screens with HTML
_3.6 Replacing with React components
_3.7 Writing a Component
_Learning completion
_Practice problems

Chapter 4 Props
_4.1 Understanding Props
_4.2 Trying out props
__4.2.1 Adding a non-duplicate key prop to repeated elements
_4.3 Trying out multiple props
__4.3.1 Using multiple props with destructuring assignment
_Learning completion
_Practice problems

Chapter 5 React Event Handling
_5.1 Understanding React Event Handling
_5.2 Passing a function to the onClick event handler
_5.3 What was different between FrontComp and BackComp?
__5.3.1 The preventDefault( ) function that blocks the default behavior when processing an event of a tag
_Learning completion
_Practice problems

Chapter 6 Component Modularization
_6.1 The Need for Component Modularization
_6.2 Exporting components with export default
_6.3 Importing components with import
_Learning completion
_Practice problems

Chapter 7 Status
_7.1 Checking the status
_7.2 Try using the status
_Learning completion
_Practice problems

Chapter 8 Style and Image
_8.1 How to apply styles in React
_8.2 How to insert an image
_8.3 Writing a CSS File
_8.4 Applying CSS and Images
_Learning completion
_Practice problems

Chapter 9: Transmitting Form Values
_9.1 Sending form values
_Learning completion
_Practice problems

Chapter 10 Shallow Comparison
_10.1 Understanding shallow and deep comparisons
_10.2 Practice shallow comparison
_Learning completion
_Practice problems

Chapter 11 Routers
_11.1 Getting to know your router
_11.2 Creating a Project and Installing React Router DOM
_11.3 Trying out routing
_11.4 Understanding the Outlet Component
_11.5 Creating a component to use in a common layout with the Outlet component
_11.6 Understanding Router Hooks
_11.7 Trying out router hooks
_Learning completion
_Practice problems

Chapter 12 Life Cycle
_12.1 Understanding the Life Cycle
_12.2 Lifecycle in class components
_12.3 Functional Components and the useEffect Hook
_12.4 Communicating with a Local JSON File
_12.5 Communicating with External APIs
__12.5.1 Take a look at randomuser.me
_Learning completion
_Practice problems

[LEVEL 3] React Hooks

Chapter 13 Hooks for Performance Optimization
_13.1 Creating a Project
_13.2 Understanding the useRef Hook
_13.3 Understanding the useMemo Hook
_13.4 Understanding the useCallback Hook
_13.5 Understanding the useId Hook
_Learning completion
_Practice problems

Chapter 14 Hooks for Global State Management
_14.1 Creating a Project
_14.2 Understanding the useReducer Hook
_14.3 Understanding the useContext Hook
_Learning completion
_Practice problems

Chapter 15: Extension Hooks for Advanced Features
_15.1 Creating a Project
_15.2 Understanding the useOptimistic Hook
_15.3 Understanding the useActionState Hook
_15.4 Understanding the useFormStatus Hook
_Learning completion
_Practice problems

[LEVEL 4] React Ecosystem

Chapter 16: Redux Toolkit
_16.1 Getting to Know the Redux Toolkit
_16.2 Architecture of the Redux Toolkit
_16.3 Creating a Project
_16.4 Learning the Basics of the Redux Toolkit
_16.5 Creating a Simple To-Do Management App
_Learning completion
_Practice problems

Chapter 17 Main Stand
_17.1 Getting to know the main stand
_17.2 Learning the basics of using the main stand
_17.3 Creating a Simple Attendance Management App
__17.3.1 logger middleware
_Learning completion
_Practice problems

Chapter 18 Firebase
_18.1 Getting to Know Firebase
_18.2 Getting Started with Firebase
_18.3 Trying the Firestore Database
__18.3.1 Creating a Firestore Database
__18.3.2 Project Creation and Basic Settings
__18.3.3 Connection and Input Test
__18.3.4 Member Information Management Bulletin Board
_18.4 Trying a Real-Time Database
__18.4.1 Creating a Real-Time Database
__18.4.2 Creating a Project and Setting Up Basic Settings
__18.4.3 Creating CRUD Functions
__18.4.4 Creating a Listener
__18.4.5 Creating a Real-Time Chat
_18.5 Trying out storage
__18.5.1 Creating Storage
__18.5.2 Creating a Project and Setting Up Basic Settings
__18.5.3 Implementing the file upload function
__18.5.4 Implementing file list and delete functions
_Learning completion
_Practice problems

[LEVEL 5] React Project

Chapter 19: Creating a Bulletin Board 1 (Using Object Arrays)
_19.1 Creating the bulletin board default screen after creating a project
__19.1.1 Creating a bulletin board default screen in HTML
__19.1.2 Creating a bulletin board basic screen component
__19.1.3 Reflecting the created component in the App component
_19.2 Displaying a list of posts
__19.2.1 Modifying the App component
__19.2.2 Modifying the ArticleList component
_19.3 Switching screens
__19.3.1 Examining and modifying the App component structure
__19.3.2 Modifying NavList and NavView components
_19.4 Adding a writing function
_19.5 Adding a viewing function
_19.6 Adding a delete function
_19.7 Adding a fix feature
__19.7.1 Modification Step 1: Loading Content into the Modification Form
__19.7.2 Step 2 of the revision: Processing the revision
_Learning completion
_Practice problems

Chapter 20 Bulletin Board Creation 2 (Using REST API)
_20.1 Creating a Project
__20.1.1 Creating the Application Skeleton
_20.2 Issuing an API Key
_20.3 Implementing the list function
_20.4 Implementing the Write Function
_20.5 Implementing the viewing function
_20.6 Implementing the Modification Function
_20.7 Implementing the delete function
_Learning completion
_Practice problems

Chapter 21: Implementing Comments Using a Modal Window with Local Storage
_21.1 Creating a Project
_21.2 Creating a basic UI and implementing functions
_Learning completion
_Practice problems

Chapter 22: Creating a Scoreboard with Justand
_22.1 Creating a Project
_22.2 Creating a basic UI and implementing its functions
_Learning completion
_Practice problems

Chapter 23: Creating KakaoTalk with Firebase
_23.1 Creating a Project
_23.2 Creating a basic UI and implementing functions
_Learning completion
_Practice problems

Chapter 24: Deploying to GitHub Pages
_24.1 Creating a React Application Distribution
_24.2 Resolving routing errors when deploying to a web server
_24.3 Deploying to GitHub Pages
_Learning completion
_Practice problems

※ PDF bonus appendix "Learning Core JavaScript Grammar for React" provided

★ Rich illustrations and diagrams + 125 practice problems + 117 key summaries!
★ Systematic, level-based learning courses, and projects that can be applied directly to practical work!
★ The entire process from creating the front-end, attaching the database, and deploying to GitHub is included!

In the era of vibe coding, React is the last oasis of front-end.
You don't have to do everything yourself, but you should be able to analyze and modify AI-generated code.
The ability to understand structure is also required.
So you need to learn React properly.
Modern frontend requires React.
So how can you learn React properly? It requires a perfect balance of theory, examples, and real-world projects.
This book will help you grow as a React front-end developer with three key features:

_First, a solid theory that covers everything from the basics of web development to the latest trends.
This book goes beyond just covering React syntax, and broadly explains everything from the basic operating principles of the web (client/server, HTTP) to the latest front-end trends (SPA, CSR/SSR/SSG, etc.).
This background knowledge will help you more quickly identify and resolve the root causes of problems in practice, and it will help you develop a practical sense by explaining complex concepts with easy-to-understand analogies.
As a result, you can understand React within the overall flow of web development and build a solid foundation centered on principles.

Second, hands-on learning that allows you to experience the concept of components and their reusability.
Beyond simply following the code, we guide you through the process of first composing a screen with HTML and then converting it into a React component, allowing you to experience the benefits and reusability of components firsthand.
You'll develop your ability to apply the core concepts you learn in each chapter to practical mini-projects like bulletin boards, scoreboards, and chat apps.
This systematic, hands-on learning roadmap helps you naturally master the component-based thinking that is at the core of React.

Third, expansion to practical ecosystems such as Redux, Justand, and Firebase.
Beyond just React itself, we delve into Redux Toolkit and Zustand, global state management libraries essential for practical use.
Additionally, you will learn how to integrate with Firebase, which allows you to implement database (Firestore, Realtime Database) and storage features that can be used without a separate backend server.
This allows you to go beyond simple UI development and build high-quality applications that are close to real-world service, broadening your understanding of the React ecosystem as a whole.

★ Web background knowledge for React beginners
★ 40 essential exercises to know to use React well
★ We will teach you React development with 4 core technologies.〈/B〉

To achieve this growth, this book systematically presents theories from the fundamentals of the web to the core of React, and provides an in-depth learning experience through over 40 rich, hands-on examples, including diverse real-world projects such as bulletin boards, scoreboards, and real-time chat apps similar to KakaoTalk.
We also help you grow into a competent React developer by combining theory and practice through the following four key skills:

_[Chapter 1] React Components and Hooks
Learn React, a library for efficiently building web UIs, and reusable components.
By leveraging various hooks like useState and useEffect, you can develop core capabilities of modern React development, such as state management, lifecycle control, and performance optimization.

_[2nd Captain] Routing
Learn how to manage routes and transition between screens as if you had multiple pages in a SPASingle Page Application by leveraging the react-router-dom library.
This allows us to provide essential user experiences for real-world web applications, such as URL management and browser history functionality.

_[3rd Captain] Global Status Management Library
It is an essential technology for efficiently managing data shared by multiple components in complex applications.
Redux Toolkit and Zustand will teach you how to manage state centrally and systematically.

_[4th Captain] Firebase
Firebase is a serverless backend service platform provided by Google. It allows you to integrate powerful backend features such as databases, real-time communication, and file storage into your React app without having to build your own servers.

★ We provide Q&A through Discord and KakaoTalk rooms.
★ Provides the code required for practice
★ We also provide a bonus PDF, "Learning Core JavaScript Grammar for React"
★ If you have any questions about the practice and code, please leave a comment in the GitHub issue.

We will make sure that you learn React well.
When you study, there are times when you want to talk with someone rather than worry alone.
If you encounter any difficulties while progressing or would like to research more in-depth content, feel free to share your opinions on Discord, the open KakaoTalk chatroom, or the GitHub issues section.

When you use multiple languages ​​in your work, sometimes grammar can get confusing.
That's why we're offering "Learning Core JavaScript Grammar for React" as a free PDF.
It truly provides almost everything you need for React.
We support your level up!

★ Experience the amazing benefits of reading this book!〈/B〉

By diligently studying this book, you will acquire the following seven core competencies:

_1.
Web fundamentals and ability to build modern front-end environments: Understand the fundamentals of the web and be able to perfectly build a modern front-end development environment such as Node.js, VSCode, and ESLint.

_2.
Ability to implement dynamic UI using React core syntax: You can construct a dynamically changing React UI using components, JSX syntax, props, and useState hooks.

_3.
Interaction and data handling capabilities between components: modularize components, implement event handlers and form submission functionality, and handle flexible parent-child interactions.

_4.
Understanding browser rendering and performance optimization skills: Understand the browser rendering process and use useMemo and useCallback to avoid unnecessary calculations and function re-creation and optimize performance.

_5.
Ability to design routing and advanced state management structures: Implement URL routing with react-router-dom, and design complex state logic and global state sharing structures using useReducer and useContext.

_6.
Ability to manage professional global state and implement advanced UX features: Manage professional global state with Redux Toolkit or ZooStand, and implement advanced features to enhance user experience with extension hooks such as useOptimistic.

_7.
Ability to build and deploy real-world projects (full-stack experience): You can build object-based array bulletin boards, REST API-integrated bulletin boards, and real-time apps using Firebase, and ultimately deploy them to GitHub Pages.

★ The ultimate recipe that connects theory and practice
★ Introducing the 40 exercises covered in this book〈/B〉
Here is a list of examples covered in this book:
Each example will teach you practical React development skills.

[PART 1] First Encounter with React

01.
hello-react-project: A basic example of creating and running a React project using Vite, including a number counter function (Chapter 2).

[PART 2] Learning the Basics of React

02.
react01-basic (basic screen configuration with HTML): This is an example of configuring the basic UI of a bulletin board (list of front-end/back-end technologies and input form) using only pure HTML before using React (Chapter 3).

03.
react01-basic (replace with React components): This is an example showing how to convert a bulletin board UI made with HTML into a component (App.jsx), the basic unit of React (Chapter 3).

04.
react01-basic (Creating and Reusing Components): This is an example that teaches you how to separate the bulletin board UI into several small components, such as FrontComp, BackComp, and FormComp, and combine and reuse them (Chapter 3).

05.
react01-basic (Passing data using props): This is an example of dynamically creating a list by passing array data from a parent component (App) to a child component (FrontComp, BackComp) using props (Chapter 4).

06.
react01-basic (event handling): This is an example that handles the onClick event when a link (〈a〉 tag) within a component is clicked, and covers how to pass data from a child component to a parent component (Chapter 5).

07.
react01-basic (Screen transition using state): This is an example of creating a mode state using the useState hook and conditionally rendering the 'frontend', 'backend', or 'entire' component based on the state value (Chapter 7).

08.
react01-basic (Applying Styles and Images): Learn how to style components using inline styles, CSS files (className), and various image insertion methods (import, public folder, URL) (Chapter 8).

09.
react01-basic (Form value transmission and processing): This is an example of receiving form data through the onSubmit event listener, passing it to the parent component, validating the input value, and updating the state (Chapter 9).

10.
react01-basic (shallow comparison practice): Compare the difference between directly modifying object state and creating a copy and modifying it, and learn React's shallow comparison principle and re-rendering optimization methods (Chapter 10).

[PART 3] React Hooks

11.
react02-router (basic routing example): This is an example of installing react-router-dom and using Routes and Route to set up basic page routing such as Home and incorrect URL (NotFound) (Chapter 11).

12.
react02-router (nested routing using Outlet): This is an example of placing an Outlet inside a common layout (CommonLayout) so that different child components (LayoutIndex) are rendered depending on the sub-route (Chapter 11).

13.
react02-router (using router hooks): This is an example that covers how to read and modify the current URL information with the useLocation hook and the query string (?mode=list&pageNum=1) with the useSearchParams hook (Chapter 11).

14.
react03-lifecycle (useEffect lifecycle management): This is an example that learns how to execute code when a component is mounted, updated, or unmounted by changing the dependency array of the useEffect hook (Chapter 12).

15.
react03-lifecycle (local JSON file communication): Asynchronously retrieves data from a local JSON file within the project using the fetch function and useEffect and displays a list and details on the screen (Chapter 12).

16.
react03-lifecycle (External API communication): This is an example of requesting data from an external API (randomuser.me) to obtain a list of random users and displaying detailed information in an alert window when clicked (Chapter 12).

17.
react04-hook-optimization (Storing values ​​and accessing the DOM with useRef): Learn how to use useRef to retain values ​​regardless of re-rendering and how to control focus by directly accessing specific DOM elements (inputs) (Chapter 13).

18.
react04-hook-optimization (Optimizing operations with useMemo): This is an example of memoizing the results of a computationally expensive function (primality determination) with useMemo to prevent unnecessary recomputation and improve performance (Chapter 13).

19.
react04-hook-optimization (Optimize functions with useCallback): Memoizes functions passed to child components with useCallback to prevent unnecessary function re-creation and re-rendering of child components (Chapter 13).

20.
react04-hook-optimization (Generating Unique IDs with useId): Covers how to automatically generate unique and consistent IDs for form elements (〈label〉, 〈input〉) for accessibility purposes using the useId hook (Chapter 13).

21.
react05-hook-global-state (State Management with useReducer): Shows how to manage complex state change rules, such as deposit/withdrawal logic, outside the component using useReducer instead of useState (Chapter 14).

22.
react05-hook-global-state (Sharing global state with useContext): An example of using useContext to directly share dark/light mode theme state across multiple child components without passing props (Chapter 14).

23.
react06-hook-enhanced (optimistic update with useOptimistic): An example of improving user experience by immediately reflecting the message in the UI through useOptimistic without waiting for the server response when sending a message (Chapter 15).

24.
react06-hook-enhanced (managing form state with useActionState): This is an example of using useActionState to manage the asynchronous processing result (success/failure) of form submission (login) as a state and provide feedback to the UI (Chapter 15).

25.
react06-hook-enhanced (Tracking form submission status with useFormStatus): An example of dynamically controlling the UI, such as disabling buttons or displaying loading text while a form is being submitted, using useFormStatus (Chapter 15).

[PART 4] The React Ecosystem

26.
react07-redux-toolkit (Basic usage of Redux Toolkit): Use Redux Toolkit's createSlice and configureStore to create a numeric counter as global state, and control the state with useSelector and useDispatch (Chapter 16).

27.
react07-redux-toolkit (To-do management app): Implement functions to add, complete, and delete to-do lists using Redux Toolkit, and learn practical global state management methods (Chapter 16).

28.
react08-zustand (Zustand Basics): Shows how to use Zustand to create a global state for a number counter with minimal setup and use it in a component (Chapter 17).

29.
react08-zustand (Attendance Management App): This section covers how to use Zustand to manage the student list (add, delete, and toggle attendance) and apply middleware (persist, devtools, and logger) (Chapter 17).

30.
react09-firestore (Firebase Firestore CRUD Bulletin Board): This is an example bulletin board that connects to Firebase's Firestore database to input (Create), retrieve (Read), modify (Update), and delete (Delete) member information (Chapter 18).

31.
react10-realtime (Firebase Realtime Database CRUD): Implements basic CRUD functions to input, retrieve, modify, and delete data in real time using Firebase's realtime database (Chapter 18).

32.
react10-realtime (Realtime Database listener): This is an example that uses the onValue listener function to detect data changes in the realtime database in real time and automatically reflect them on the screen (Chapter 18).

33.
react10-realtime (real-time chat app): Build a basic chat application that allows multiple users to chat simultaneously, leveraging the real-time synchronization capabilities of the real-time database (Chapter 18).

34.
react11-storage (Firebase Storage File Upload/List): Implements the ability to upload image files to a specific folder using Firebase Storage and retrieve and delete the list of saved files (Chapter 18).

[PART 5] React Project

35.
project01-board-array (Bulletin board using object array): This is a comprehensive practical example that implements all CRUD (create, read, edit, delete) functions of a bulletin board using only pure React useState and object arrays, without an external server (Chapter 19).

36.
project02-board-api (Bulletin board using REST API): This is a practical example that implements CRUD functions of a bulletin board by exchanging data with an actual server using an external REST API and fetch function (Chapter 20).

37.
project03-live-comments (Comment feature using local storage): Implements comment creation, editing, and deletion, as well as 'like' functionality, using the Bootstrap modal window UI and the browser's local storage (Chapter 21).

38.
project04-scoreboard (Scoreboard using JuStand): Create a scoreboard that manages player scores and information across multiple components using the global state management library JuStand (Chapter 22).

39.
project05-kakaotalk (KakaoTalk using Firebase): Create a real-time chat application with a profile photo upload feature by linking Firebase's real-time database and storage (Chapter 23).

40.
project05-kakaotalk (Deploying to GitHub Pages): Covers the process of building the project with npm run build, resolving routing issues (HashRouter), and deploying the completed KakaoTalk app to GitHub Pages (Chapter 24).

[Author's Note]〈/B〉

welcome.
If you want to get good at React but don't know how, you've come to the right place.
This book systematically guides you through everything from the fundamental principles of the web necessary before learning React to the latest React hooks, providing a solid foundational knowledge.
With over 40 diverse, hands-on projects and a wealth of practical examples, you can apply theory directly to practice and develop problem-solving skills.
We also help you learn essential technologies for modern web development, such as Redux Toolkit, ZooStand, and Firebase, to help you grow into a high-quality React application developer.

This book faithfully explains the fundamental principles and core concepts of the web that front-end developers must know before writing React code.
By first learning how clients and servers work, the role of HTML/CSS/JS, the browser rendering process, and core concepts such as SPA, CSR, SSR, and SSG, you can build a solid foundation centered on principles.
This background knowledge will help you identify the root cause of problems more quickly and create more efficient and stable websites.

In React, grammar is important, but concepts are also important.
The key concepts are ‘state’ and ‘state management’.
So, we'll cover both Redux Toolkit and ZooStand, which are used for global state management, and even learn about Firebase integration, which allows you to implement databases and storage without a separate backend.
This allows you to go beyond simple UI development and build high-quality applications that are close to real-world services, broadening your understanding of the React ecosystem as a whole.

Ultimately, we designed it to cover the entire process from development to actual service release, including the process of deploying the app you created yourself to a GitHub page.


To help our readers with their questions, we've created an online Q&A channel.
We also provide “Learning Core JavaScript Grammar for React” as a free PDF.
I hope this book will serve as a stepping stone for you to grow into a skilled front-end developer.