kamiljozwik

import React from 'react'; 
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

import Amplify from 'aws-amplify'  // dodajemy Amplify do aplikacji
import config from './aws-exports' // importujemy stworzoną automatycznie przez Amplify CLI konfigurację
Amplify.configure(config)  // konfigurujemy Amplify

kamiljozwik

class MyComponent extends Component {
  // ...
  handleChange = debounce((text) => {
    this.setState({ text });
  }, 500);
  componentWillUmount() {
    this.handleChange.cancel(); // Prawidłowe zatrzymanie metody handleChange
  }
  render() {
    // ....

kamiljozwik

// w momencie wywołania 'setState' wartość 'e' będzie będzie wynosiła 'null'
handleChange = debounce((e) => {
  this.setState({ text: e.target.value })
}, 500);

<input onChange={handleChange} />

kamiljozwik

// z dokumentacji Reacta - https://reactjs.org/docs/events.html

function onClick(event) {
  console.log(event); // => nullified object.
  console.log(event.type); // => "click"
  const eventType = event.type; // => "click" (przypisanie eventu do zmiennej w celu odwołania się do niego w kodzie asynchronicznym)

  setTimeout(function() {
    console.log(event.type); // => null () // Poniewaź SyntheticEvent został wyczyszczony po wykonaniu funkcji onClick
    console.log(eventType); // => "click" // odwołanie do zmiennej - ta jest ciągle dostępna asynchronicznie

kamiljozwik

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import React, { Suspense, lazy } from 'react';

const Home = lazy(() => import('./pages/Home'));
const PageWithTabs = lazy(() => import('./pages/PageWithTabs'));
const About = lazy(() => import('./pages/About'));

const App = () => (
  <Router>
    <Suspense fallback={<div>Loading...</div>}>

kamiljozwik

import FormErrorBoundary from './FormErrorBoundary';

const BigTextEditor = React.lazy(() => import('./BigTextEditor'));
const MultistepForm = React.lazy(() => import('./MultistepForm'));

function MyComponent() {
  return (
    <div>
      <FormErrorBoundary>
        <Suspense fallback={<div>Loading...</div>}>

kamiljozwik

const BigTextEditor = React.lazy(() => import('./BigTextEditor'));
const MultistepForm = React.lazy(() => import('./MultistepForm'));

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <section>
          <h2>Fill the form<h2>
          <MultistepForm />

kamiljozwik

const BigTextEditor = React.lazy(() => import('./BigTextEditor'));

function MyComponent() {
  return (
    <div>
      <OtherComponent />
    </div>
  );
}

kamiljozwik

if (newMail === true) {
  import('./BigTextEditor')
    .then(module => module.showEditor())
    .catch(e => throw new Error(e) )
}

// or async/await
let module = await import('./BigTextEditor');

kamiljozwik

class Button extends React.Component {
  handleClick = () => {    // "class field"
    console.log('You clicked me!');
  }

  render() {
    return (
      <button onClick={this.handleClick}/>
    );
  }