C
React list
Previous1 / 22Next
React/Getting Started/Lesson 01

Introduction to React

30 min·theory
This chapter
1/2
JavaScript

Introduction to React

💡 Why Learn React?

🎯 80% of front-end job postings require React — the #1 framework in Korea
💼 Component reuse makes development 3–5x faster than plain HTML
⚡ Naver, Kakao, Toss, and Karrot Market all use React
🔗 Once you learn React, you can also build mobile apps with React Native
🏢 실무에서는
The remittance screen in the Toss app and the chat UI on Karrot Market are both built with React

What Is React? — The LEGO Brick Analogy

React is a JavaScript library for building UI out of components (building blocks).

With plain HTML, you do it like this:

html
<!-- To use a button in 100 places, copy-paste it 100 times -->
<button class="btn">Like 👍</button>
<button class="btn">Like 👍</button>
...

With React, you do it like this:

jsx
// Define a button component once
function LikeButton() {
  return <button>Like 👍</button>;
}

// Reuse it anywhere
<LikeButton />
<LikeButton />
<LikeButton />

> 💡 Think of it like assembling LEGO bricks — build once, snap together anywhere.

Getting Started with React — 5-Minute Setup with Vite

① Install Node.js (if you haven't already): nodejs.org → download the LTS version

② Create a project (in your terminal):

code
npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run dev

③ Open http://localhost:5173 in your browser

> 💡 If you see the spinning React logo, you're all set!

💻 Your First React Component 
// Component = Function (Starts with a capital letter!)
function Greeting() {
  return (
    <div>
      <h1>Hello! 👋</h1>
      <p>It's my first React component.</p>
    </div>
  );
}

// Used in the App component
export default function App() {
  return (
    <div>
      <Greeting />
      <Greeting />
      <Greeting />
    </div>
  );
}

⚛️ React Pattern — Introduction to React

Learn step by step, with code examples, how React Introduction works in React.
1 🧩 1. When You Need React Introduction
A scenario where this feature is needed.
↓
2 💻 2. Writing the Code
Basic usage of React Introduction.
↓
3 🎨 3. Rendered Output
What the user sees on screen.
↓
4 💡 4. Practical Tips
Common pitfalls and best practices.

🎮 Introduction to React — Step-by-Step

Click each step to read the content and track your progress with the ✓ Got it button.
🖥️ Result — rendered React component
✏️ React 코드 수정하기 (클릭해서 열기)
⚛️ React 18 + Babel Standalone — see the result first, then edit the code yourself.

Check Your Understanding

In React, what character should a component name start with?
💡 React components must start with an uppercase letter. If a component name starts with a lowercase letter, React treats it as an HTML tag and the component will not work correctly.
Read this first: Advanced Error Handling — Result<T, E> Pattern
Up next: JSX Syntax
PreviousListNext
Introduction to React - React