Что такое React?

React: фреймворк для построения пользовательских интерфейсов

React — это JavaScript библиотека (часто называемая фреймворком) для создания пользовательских интерфейсов с помощью компонентов и реактивного программирования. Разработана компанией Facebook в 2013 году и стала стандартом в frontend разработке.

Основная идея

React основан на declarative подходе (описываем ЧТО хотим видеть), а не imperative подходе (описываем КАК это сделать):

// ❌ Imperative подход (старый способ, jQuery style)
const userElement = document.getElementById('user');
const user = { name: 'John', age: 30 };

const htmlString = '<div>';
htmlString += '<h1>' + user.name + '</h1>';
htmlString += '<p>Age: ' + user.age + '</p>';
htmlString += '</div>';

userElement.innerHTML = htmlString;

// ❌ Проблемы:
// - Сложно отследить, когда и что обновилось
// - Легко создать bugs при обновлении DOM
// - Код хрупкий и сложно поддерживать

// ✅ Declarative подход (React way)
function UserCard({ user }) {
  return (
    <div>
      <h1>{user.name}</h1>
      <p>Age: {user.age}</p>
    </div>
  );
}

// React сам разберётся, как обновить DOM
// Мы только описываем, как это должно выглядеть

Ключевые концепции

1. Компоненты (Components)

// Функциональный компонент (современный подход)
function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

// Компонент с состоянием
function Counter() {
  const [count, setCount] = React.useState(0);
  
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
}

// Использование компонентов
export default function App() {
  return (
    <div>
      <Greeting name="Alice" />
      <Counter />
    </div>
  );
}

2. JSX синтаксис

// JSX - это синтаксис, похожий на HTML, внутри JavaScript
// На самом деле это просто синтаксический сахар для функции React.createElement()

// JSX:
const element = <h1 className="greeting">Hello, World!</h1>;

// Компилируется в:
const element = React.createElement(
  'h1',
  { className: 'greeting' },
  'Hello, World!'
);

// JSX позволяет вставлять выражения JavaScript в фигурные скобки
const name = 'Alice';
const element = <h1>Hello, {name}!</h1>;

const user = { firstName: 'John', lastName: 'Doe' };
const greeting = <h1>Hello, {user.firstName} {user.lastName}!</h1>;

3. Props (свойства компонента)

// Props - это способ передать данные от родителя к потомку

function UserProfile({ user, onFollow }) {
  return (
    <div>
      <h2>{user.name}</h2>
      <p>Email: {user.email}</p>
      <button onClick={onFollow}>Follow</button>
    </div>
  );
}

// Использование:
const user = { name: 'Alice', email: 'alice@example.com' };

<UserProfile 
  user={user} 
  onFollow={() => console.log('Followed!')}
/>

4. State (состояние компонента)

// State - это данные, которые могут меняться внутри компонента
// Когда state меняется, компонент автоматически перерисовывается

function TodoList() {
  const [todos, setTodos] = React.useState([]);
  const [input, setInput] = React.useState('');
  
  const addTodo = () => {
    setTodos([...todos, { id: Date.now(), text: input }]);
    setInput('');  // очищаем input
  };
  
  const removeTodo = (id) => {
    setTodos(todos.filter(todo => todo.id !== id));
  };
  
  return (
    <div>
      <input 
        value={input} 
        onChange={(e) => setInput(e.target.value)} 
      />
      <button onClick={addTodo}>Add</button>
      
      <ul>
        {todos.map(todo => (
          <li key={todo.id}>
            {todo.text}
            <button onClick={() => removeTodo(todo.id)}>Remove</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

// Ключевой момент: setTodos не изменяет todos напрямую
// Это создаёт НОВЫЙ массив, и React видит, что данные изменились

5. Hooks (современный способ управления состоянием)

// useState - управление состоянием
const [count, setCount] = React.useState(0);

// useEffect - побочные эффекты (API запросы, подписки и т.д.)
function UserData({ userId }) {
  const [user, setUser] = React.useState(null);
  const [loading, setLoading] = React.useState(true);
  
  React.useEffect(() => {
    // Этот код выполнится после рендеринга
    fetch(`/api/users/${userId}`)
      .then(r => r.json())
      .then(data => {
        setUser(data);
        setLoading(false);
      });
  }, [userId]);  // зависимость: перезапустить если userId изменился
  
  if (loading) return <p>Loading...</p>;
  return <div>{user.name}</div>;
}

// useContext - доступ к global state
const ThemeContext = React.createContext('light');

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Header />
    </ThemeContext.Provider>
  );
}

function Header() {
  const theme = React.useContext(ThemeContext);
  return <header className={theme}>...</header>;
}

// useMemo - оптимизация (мемоизация дорогих вычислений)
const expensiveValue = React.useMemo(
  () => fibonacci(50),
  []  // вычислить один раз при монтировании
);

// useCallback - стабилизировать функции для оптимизации
const handleClick = React.useCallback(() => {
  console.log('Clicked!');
}, []);  // одна и та же функция всегда

Жизненный цикл компонента

function Component() {
  // 1. Инициализация (первый рендер)
  console.log('Component created');
  
  // 2. Рендер (отправка JSX в virtual DOM)
  const [count, setCount] = React.useState(0);
  
  // 3. Побочные эффекты (useEffect)
  React.useEffect(() => {
    // Выполняется после рендера
    console.log('Component mounted or updated');
    
    // Cleanup функция (выполняется перед unmount или перед новым эффектом)
    return () => {
      console.log('Cleanup before unmount or new effect');
    };
  }, [count]);  // зависимости
  
  // 4. Рендер
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
}

// Жизненный цикл:
// Component created (один раз)
// Рендер (JSX в virtual DOM)
// Component mounted or updated (после рендера)
// ... пользователь нажимает кнопку ...
// Cleanup before unmount or new effect (перед новым эффектом)
// Рендер (JSX в virtual DOM с новыми данными)
// Component mounted or updated (после рендера)

Virtual DOM и Reconciliation

// React использует Virtual DOM для оптимизации

// 1. При изменении state, React создаёт новый Virtual DOM
function App() {
  const [name, setName] = React.useState('Alice');
  
  // Virtual DOM (в памяти):
  // <div>
  //   <h1>Hello, Alice</h1>
  //   <button>Change name</button>
  // </div>
  
  return (
    <div>
      <h1>Hello, {name}</h1>
      <button onClick={() => setName('Bob')}>Change name</button>
    </div>
  );
}

// 2. React сравнивает старый Virtual DOM с новым (reconciliation)
// Нашёл различия: 'Alice' -> 'Bob'

// 3. React обновляет только изменившиеся части реального DOM
// Это намного быстрее, чем обновить весь DOM

// 4. Браузер перерисовывает только изменённые элементы

Пример: интеграция с Java Backend

// Frontend React компонент
function UsersList() {
  const [users, setUsers] = React.useState([]);
  const [loading, setLoading] = React.useState(false);
  const [error, setError] = React.useState(null);
  
  React.useEffect(() => {
    setLoading(true);
    
    // Запрос к Java API
    fetch('/api/v1/users')
      .then(response => {
        if (!response.ok) throw new Error('API error');
        return response.json();
      })
      .then(data => {
        setUsers(data);
        setError(null);
      })
      .catch(err => {
        setError(err.message);
        setUsers([]);
      })
      .finally(() => setLoading(false));
  }, []);
  
  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error}</p>;
  
  return (
    <div>
      <h1>Users</h1>
      <ul>
        {users.map(user => (
          <li key={user.id}>
            <strong>{user.name}</strong> - {user.email}
          </li>
        ))}
      </ul>
    </div>
  );
}

Почему Java разработчику важно понимать React

1. Современные веб приложения имеют rich UI
   - Старые JSP/Thymeleaf - это прошлое
   - React/Vue/Angular - современный frontend

2. Full-stack разработка требует понимания обеих сторон
   - Backend (Java) предоставляет REST API
   - Frontend (React) потребляет этот API

3. Коммуникация между frontend и backend
   - JSON формат обмена данных
   - REST архитектура
   - асинхронные запросы

4. Performance и оптимизация
   - Как работает Virtual DOM
   - Когда компонент перерисовывается
   - Как оптимизировать запросы к API

Сравнение с другими фреймворками

// React: очень гибкий, экосистема, популярен
<div>
  <input value={state} onChange={setState} />
</div>

// Vue: проще для обучения, хорошая синтаксис
<div>
  <input v-model="state" />
</div>

// Angular: полнофункциональный фреймворк, enterprise
// Требует TypeScript, RxJS, Dependency Injection и т.д.

Заключение

React — это:

• Declarative — описываем ЧТО, не КАК
• Component-based — переиспользуемые компоненты
• Virtual DOM — оптимизированное обновление UI
• Unidirectional data flow — данные текут в одном направлении
• Popular — самый популярный frontend фреймворк
• Learn once, write anywhere — используется не только для веба

Для Java разработчика это важный skill, потому что:

• Большинство современных веб приложений используют React
• Frontend и backend должны хорошо интегрироваться
• REST API должны быть спроектированы с учётом frontend потребностей