import React from 'react';

const MyComponent = ({ isLoggedIn }) => {
    return (
        <div>
            {isLoggedIn ? <p>Welcome back!</p> : <p>Please log in.</p>}
        </div>
    );
};

export default MyComponent;

import React from 'react';
const MyComponent = ({ showDetails }) => {
    return (
        <div>
            <h1>Item</h1>
            {showDetails && <p>Here are the details...</p>}
        </div>
    );
};
export default MyComponent;

import React from 'react';
const MyComponent = ({ status }) => {
    if (status === 'loading') {
        return <p>Loading...</p>;
    } else if (status === 'error') {
        return <p>Error occurred!</p>;
    } else if (status === 'success') {
        return <p>Data loaded successfully!</p>;
    } else {
        return null; // Возвращаем null, чтобы не отрисовывать ничего
    }
};
export default MyComponent;

import React from 'react';
const renderContent = (status) => {
    switch (status) {
        case 'loading':
            return <p>Loading...</p>;
        case 'error':
            return <p>Error occurred!</p>;
        case 'success':
            return <p>Data loaded successfully!</p>;
        default:
            return null;
    }
};
const MyComponent = ({ status }) => {
    return (
        <div>
            {renderContent(status)}
        </div>
    );
};
export default MyComponent;

import React from 'react';
const MyComponent = ({ isLoggedIn, userName }) => {
    return (
        <div>
            {(() => {
                if (isLoggedIn) {
                    return <p>Welcome back, {userName}!</p>;
                } else {
                    return <p>Please log in.</p>;
                }
            })()}
        </div>
    );
};
export default MyComponent;

   class Counter extends React.Component {
     constructor(props) {
       super(props);
       this.state = { count: 0 };
     }

     increment = () => {
       this.setState({ count: this.state.count + 1 });
     };

     render() {
       return (
         <div>
           <p>Count: {this.state.count}</p>
           <button onClick={this.increment}>Increment</button>
         </div>
       );
     }
   }
   

   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>
     );
   }
   

   class DataFetcher extends React.Component {
     constructor(props) {
       super(props);
       this.state = { data: null };
     }

     componentDidMount() {
       fetchData().then(data => {
         this.setState({ data });
       });
     }

     render() {
       return <div>Data: {this.state.data}</div>;
     }
   }
   

   import React, { useState, useEffect } from 'react';

   function DataFetcher() {
     const [data, setData] = useState(null);

     useEffect(() => {
       fetchData().then(data => {
         setData(data);
       });
     }, []); // Пустой массив означает, что эффект выполняется только при монтировании

     return <div>Data: {data}</div>;
   }
   

   const MyContext = React.createContext();

   class MyComponent extends React.Component {
     render() {
       return (
         <MyContext.Consumer>
           {value => <div>{value}</div>}
         </MyContext.Consumer>
       );
     }
   }
   

   import React, { useContext } from 'react';

   const MyContext = React.createContext();

   function MyComponent() {
     const value = useContext(MyContext);
     return <div>{value}</div>;
   }
   

class MyComponent extends React.Component {
  render() {
    // Не делайте запросы в render
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => {
        this.setState({ data });
      });

    return <div>Rendering...</div>;
  }
}

class MyComponent extends React.Component {
  componentDidMount() {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => {
        this.setState({ data });
      });
  }

  render() {
    return <div>Rendering...</div>;
  }
}

class MyComponent extends React.Component {
  render() {
    // Не вызывайте setState в render
    this.setState({ someState: 'newValue' });

    return <div>Rendering...</div>;
  }
}

class MyComponent extends React.Component {
  someMethod() {
    this.setState({ someState: 'newValue' });
  }

  render() {
    return <div onClick={() => this.someMethod()}>Rendering...</div>;
  }
}

class MyComponent extends React.Component {
  render() {
    // Избегайте долгих вычислений в render
    let result = 0;
    for (let i = 0; i < 1000000000; i++) {
      result += i;
    }

    return <div>Result: {result}</div>;
  }
}

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { result: this.expensiveCalculation() };
  }

  expensiveCalculation() {
    let result = 0;
    for (let i = 0; i < 1000000000; i++) {
      result += i;
    }
    return result;
  }

  render() {
    return <div>Result: {this.state.result}</div>;
  }
}

class MyComponent extends React.Component {
  render() {
    // Не манипулируйте DOM напрямую в render
    document.getElementById('some-id').textContent = 'New Text';

    return <div>Rendering...</div>;
  }
}

class MyComponent extends React.Component {
  render() {
    return <div id="some-id">New Text</div>;
  }
}

import React from 'react';

// Создание контекста с дефолтным значением
const ThemeContext = React.createContext('light');

import React from 'react';
import ReactDOM from 'react-dom';

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

function Toolbar() {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

function ThemedButton() {
  return (
    <ThemeContext.Consumer>
      {theme => <button className={theme}>Themed Button</button>}
    </ThemeContext.Consumer>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

import React from 'react';

const UserContext = React.createContext(null);

import React, { useContext } from 'react';

function App() {
  const user = { name: 'Alice', loggedIn: true };

  return (
    <UserContext.Provider value={user}>
      <UserProfile />
    </UserContext.Provider>
  );
}

function UserProfile() {
  const user = useContext(UserContext);

  return (
    <div>
      {user ? (
        <p>Welcome, {user.name}!</p>
      ) : (
        <p>Please log in.</p>
      )}
    </div>
  );
}

import React, { useRef, useEffect } from 'react';

function TextInputWithFocusButton() {
  const inputEl = useRef(null);

  const onButtonClick = () => {
    // Установить фокус на текстовое поле
    inputEl.current.focus();
  };

  return (
    <div>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Установить фокус</button>
    </div>
  );
}

export default TextInputWithFocusButton;

import React, { useRef, useEffect, useState } from 'react';

function MeasureDiv() {
  const divRef = useRef(null);
  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });

  useEffect(() => {
    if (divRef.current) {
      const { width, height } = divRef.current.getBoundingClientRect();
      setDimensions({ width, height });
    }
  }, []);

  return (
    <div>
      <div ref={divRef} style={{ width: '100px', height: '100px', backgroundColor: 'lightblue' }}>
        Измеряемый элемент
      </div>
      <p>Ширина: {dimensions.width}px, Высота: {dimensions.height}px</p>
    </div>
  );
}

export default MeasureDiv;

import React, { Component } from 'react';

class CustomComponent extends Component {
  customMethod() {
    console.log('Метод компонента вызван');
  }

  render() {
    return <div>Custom Component</div>;
  }
}

class ParentComponent extends Component {
  constructor(props) {
    super(props);
    this.customComponentRef = React.createRef();
  }

  handleClick = () => {
    this.customComponentRef.current.customMethod();
  };

  render() {
    return (
      <div>
        <CustomComponent ref={this.customComponentRef} />
        <button onClick={this.handleClick}>Вызвать метод компонента</button>
      </div>
    );
  }
}

export default ParentComponent;

import React, { useState, useEffect } from 'react';

function DataFetchingComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('https://api.example.com/data');
        const result = await response.json();
        setData(result);
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    };

    fetchData();
  }, []); // Пустой массив означает, что эффект выполнится только при монтировании компонента

  return (
    <div>
      {data ? (
        <pre>{JSON.stringify(data, null, 2)}</pre>
      ) : (
        <p>Loading data...</p>
      )}
    </div>
  );
}

export default DataFetchingComponent;

import React, { Component } from 'react';

class DataFetchingComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: null,
    };
  }

  componentDidMount() {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => {
        this.setState({ data });
      })
      .catch(error => {
        console.error('Error fetching data:', error);
      });
  }

  render() {
    const { data } = this.state;
    return (
      <div>
        {data ? (
          <pre>{JSON.stringify(data, null, 2)}</pre>
        ) : (
          <p>Loading data...</p>
        )}
      </div>
    );
  }
}

export default DataFetchingComponent;

export async function fetchData() {
  const response = await fetch('https://api.example.com/data');
  if (!response.ok) {
    throw new Error('Network response was not ok');
  }
  return response.json();
}

import React, { useState, useEffect } from 'react';
import { fetchData } from './service';

function DataFetchingComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetchData()
      .then(data => setData(data))
      .catch(error => console.error('Error fetching data:', error));
  }, []);

  return (
    <div>
      {data ? (
        <pre>{JSON.stringify(data, null, 2)}</pre>
      ) : (
        <p>Loading data...</p>
      )}
    </div>
  );
}

export default DataFetchingComponent;