React ??? ??? ????? ??? ?? ??? JavaScript ????????. 2013? Facebook?? ??? ? ??? ?? ?? ?? ????? ??? ?? ???? UI ??? ??? ??????. ??? ? ?? ??? ??? ???? ??? React? ???? ??? ??? ?? UI? ????? ??? ?? ? ????.

? ????? React? ?? ??? ?? ??? ?? ??? ?? ??? ???? ??? ????? ???? ?? ?? ??? ?????.

???? ??????

????? React? ?? ? ??? ??? ?????? ????? ??? JavaScript ????????. MVC(Model-View-Controller) ????? ??? ??????? ? ??? ??? ???. React? ???? ??????? ??? ??? ?? ????? ?????? ?????? ?? ?? ? ????.

React? ???? ??? ??????

1. ??? ??? ?? ??: ??? UI? ????? ??? ??? ?? ??? ??? ?????.
2. ?? DOM: ?? DOM? ?????? ?? ?? ?? DOM? ?? ??? ???? ? ??? ???????.
3. ???: UI?? ?? ?? ??? ???? ???? React? ?????.
4. ??? ???: Redux, React Router, Next.js? ?? ?????? ???? React? ??? ?????.

React? ???? ??

React ??????? React ?? ?? ??? ?? ??? ???? ?????. ?? ??? ??, ?? ? ???? ????? UI? ???? ?????.

??? ????

??? ?? ??? props? ???? ????? React ??? ???? ??? JavaScript ?????. ?? ?? React ???????? ?? ???? ??? ?? ?????.

?: ?? ?? ????

function Welcome(props) {
  return <h1>Hello, {props.name}!</h1>;
}

// Usage
<Welcome name="Alice" />;

??? ????

??? ????? React.Component ???? ???? ES6 ??????. ??? ???? ??? ????? ???????.

?: ?? ??? ?? ??

function Welcome(props) {
  return <h1>Hello, {props.name}!</h1>;
}

// Usage
<Welcome name="Alice" />;

???? ??

?: ??? ?? ??? ?? ??

import React, { Component } from 'react';

class Welcome extends Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

// Usage
<Welcome name="Alice" />;

??:

1. ?? ??: useState ??? ?? ?? ?? ??(??)? ???? ? ?????.
2. Props: Props? ?? ?? ??? ???? ??? ? ????.
3. ???: onClick ??? ???? ??? ??? ? ??? ???????.

Prop vs State

???? ??

State? ?? ??? ????? ?? ???? ???? ? ???? React? ?? ?????. ??? ????? ?? ??? ?? useState ??? ?????.

?: ??? ??? ???

function Welcome(props) {
  return <h1>Hello, {props.name}!</h1>;
}

// Usage
<Welcome name="Alice" />;

????? Prop

Prop? ?? ?? ???? ?? ?? ??? ???? ???, ???? ?? ?? ?? ?? ??? ?? ? ??? ???.

?: ?? ??

import React, { Component } from 'react';

class Welcome extends Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

// Usage
<Welcome name="Alice" />;

???? ??

React? ?? ?? ??? ? ?? ??? ??? ?? ???? ??? UI? ????? ?????.

?: ??? ????

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

??? ????? ?? ?? ???

??? ?? ???? ???, ???? ? ??? ?? ???? ??? ???? ?? ?? ???? ???? ????. ??? ?? ??? ?? useEffect? ?? React ??? ??? ?? ?? ???? ?????.

?: ?? ?? ??

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

// Usage
;

?: useEffect? ??? ?? ??

function Greeting({ name }) {
  return <h1>Welcome, {name}!</h1>;
}

function App() {
  return <Greeting name="John" />;
}

// Renders: Welcome, John!

React? ??? ??

React? ???? ??? ??? ??????. ??? ???? ??? props? ???? ???? ??? ? ?????.

?: ?? ???

function Header() {
  return <header><h1>My Website</h1></header>;
}

function Main() {
  return <main><p>This is the main content.</p></main>;
}

function Footer() {
  return <footer><p>? 2024 My Website</p></footer>;
}

function App() {
  return (
    <div>
      <Header />
      <Main />
      <Footer />
    </div>
  );
}

// Usage
<App />;

?: ?? ??

import React, { Component } from 'react';

class Timer extends Component {
  componentDidMount() {
    console.log('Timer mounted');
  }

  componentWillUnmount() {
    console.log('Timer unmounted');
  }

  render() {
    return <p>Timer running...</p>;
  }
}

// Usage
<Timer />;

??? ???

React? ???? ?????? ??? ?? ???? ?? ??? ??? ???? ? ????.

?: ??? ???

import React, { useEffect } from 'react';

function Timer() {
  useEffect(() => {
    console.log('Timer mounted');
    return () => console.log('Timer unmounted');
  }, []);

  return <p>Timer running...</p>;
}

// Usage
<Timer />;

?? ? ?

React?? ??? ???? ? React? ?? ??? ??? ? ??? ? ??? ??? ?? ???? ?? ?????.

?: ?? ???

function Button() {
  function handleClick() {
    alert('Button clicked!');
  }

  return <button onClick={handleClick}>Click Me</button>;
}

// Usage
<Button />;

??? ??? ????

React? ???? ??? ?? ?????? ???? ???? ? ?? ?? ?? ??? ?????.

?: ??? ??? ?? ????

import React, { useState } from 'react';

function InputExample() {
  const [text, setText] = useState('');

  function handleChange(event) {
    setText(event.target.value);
  }

  return (
    <div>
      <input type="text" value={text} onChange={handleChange} />
      <p>You typed: {text}</p>
    </div>
  );
}

// Usage
<InputExample />;

??

React? ?? ? ??????? ???? ?? ??? ?????. ??, ?? ? ??? ?? ??? ??? ?? ?? ?? ????? ???? ???? ????? ??? ??? UI? ?? ? ????. React? ?? ??? ??? ??? ????? ?????? ???? ???? ?? ?? ??? ?????? ????? ??? ??? ??? ??? ? ????. ??? ??? ????? ? ?? React ?? ???? ????? ??? ??? ???? ??? ?????! ?

? ??? React ?? ? ???? ?? ??? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!