🔧 Шпаргалка по базовым компонентам React — 1 июня 2026 г. в 07:47:37.652
🔧 Шпаргалка по базовым компонентам 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