React

🔧 Шпаргалка по базовым компонентам React

// Импорт React и роутера
import React, { useState, useEffect, createContext, useContext } from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';

// 1. Создание контекста
const MyContext = createContext();

// 2. Компонент с Context и useEffect
function Welcome() {
  const contextValue = useContext(MyContext);

  useEffect(() => {
    console.log("Welcome component mounted or updated");
    return () => console.log("Welcome component unmounted");
  }, []);

  return <h1>{contextValue}</h1>;
}

// 3. Управляемая форма
function FormComponent() {
  const [inputValue, setInputValue] = useState('');
  const handleChange = (e) => setInputValue(e.target.value);

  return (
    <div>
      <h2>Controlled Form</h2>
      <input type="text" value={inputValue} onChange={handleChange} />
      <p>Input Value: {inputValue}</p>
    </div>
  );
}

// 4. Счётчик с состоянием и обработчиком
function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h2>Counter</h2>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

// 5. Рендер списка
function FruitList() {
  const fruits = ['Apple', 'Banana', 'Orange'];
  return (
    <div>
      <h2>Fruit List</h2>
      <ul>
        {fruits.map((fruit, index) => (
          <li key={index}>{fruit}</li>
        ))}
      </ul>
    </div>
  );
}

// 6. Условный рендеринг
function ConditionalRender({ isLoggedIn }) {
  return (
    <div>
      <h2>Conditional Rendering</h2>
      {isLoggedIn ? <p>Welcome back!</p> : <p>Please log in.</p>}
    </div>
  );
}

// 7. Навигация
function Navigation() {
  return (
    <nav>
      <Link to="/">Home</Link> | <Link to="/form">Form</Link> | <Link to="/counter">Counter</Link> | <Link to="/fruits">Fruits</Link>
    </nav>
  );
}

// 8. Основной App с Router и Context
function App() {
  return (
    <MyContext.Provider value="Hello, Context!">
      <Router>
        <div style={{ padding: '20px', fontFamily: 'Arial' }}>
          <Navigation />
          <Switch>
            <Route path="/" exact>
              <Welcome />
              <ConditionalRender isLoggedIn={true} />
            </Route>
            <Route path="/form" component={FormComponent} />
            <Route path="/counter" component={Counter} />
            <Route path="/fruits" component={FruitList} />
          </Switch>
        </div>
      </Router>
    </MyContext.Provider>
  );
}

export default App;

✍️ @React_lib

👍6

www.tgoop.com/React_lib/694

978 viewsJun 26 at 08:12

🔧 Шпаргалка по базовым компонентам React

// Импорт React и роутера
import React, { useState, useEffect, createContext, useContext } from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';

// 1. Создание контекста
const MyContext = createContext();

// 2. Компонент с Context и useEffect
function Welcome() {
  const contextValue = useContext(MyContext);

  useEffect(() => {
    console.log("Welcome component mounted or updated");
    return () => console.log("Welcome component unmounted");
  }, []);

  return <h1>{contextValue}</h1>;
}

// 3. Управляемая форма
function FormComponent() {
  const [inputValue, setInputValue] = useState('');
  const handleChange = (e) => setInputValue(e.target.value);

  return (
    <div>
      <h2>Controlled Form</h2>
      <input type="text" value={inputValue} onChange={handleChange} />
      <p>Input Value: {inputValue}</p>
    </div>
  );
}

// 4. Счётчик с состоянием и обработчиком
function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h2>Counter</h2>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

// 5. Рендер списка
function FruitList() {
  const fruits = ['Apple', 'Banana', 'Orange'];
  return (
    <div>
      <h2>Fruit List</h2>
      <ul>
        {fruits.map((fruit, index) => (
          <li key={index}>{fruit}</li>
        ))}
      </ul>
    </div>
  );
}

// 6. Условный рендеринг
function ConditionalRender({ isLoggedIn }) {
  return (
    <div>
      <h2>Conditional Rendering</h2>
      {isLoggedIn ? <p>Welcome back!</p> : <p>Please log in.</p>}
    </div>
  );
}

// 7. Навигация
function Navigation() {
  return (
    <nav>
      <Link to="/">Home</Link> | <Link to="/form">Form</Link> | <Link to="/counter">Counter</Link> | <Link to="/fruits">Fruits</Link>
    </nav>
  );
}

// 8. Основной App с Router и Context
function App() {
  return (
    <MyContext.Provider value="Hello, Context!">
      <Router>
        <div style={{ padding: '20px', fontFamily: 'Arial' }}>
          <Navigation />
          <Switch>
            <Route path="/" exact>
              <Welcome />
              <ConditionalRender isLoggedIn={true} />
            </Route>
            <Route path="/form" component={FormComponent} />
            <Route path="/counter" component={Counter} />
            <Route path="/fruits" component={FruitList} />
          </Switch>
        </div>
      </Router>
    </MyContext.Provider>
  );
}

export default App;

BY React