Create components in JavaScript using React. Conceptually, rendering logic and other UI logic are closely coupled; separate concerns by components instead of by HTML/JS/CSS. Composition > inheritance. And top-down data flow (but children can change other children/parent's state by calling shared parent's functions that are passed down to them via immutable props).

Just one of the things I'm learning. https://github.com/hchiam/learning and https://github.com/hchiam/learning-frameworks

Update: You can create a React web app by running one command: npx create-react-app my-app (Update update: maybe use nx instead). Or you can use Yeoman generators like this or this or try out a RealWorld spec app. Or use Next.js.

2020 React cheatsheet (with code examples)

<script src="https://fb.me/react-0.10.0.min.js"></script>

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) => <li>{number}</li>);
ReactDOM.render(
  <ul>{listItems}</ul>, // <ul> an array of <li>#</li>'s
  document.getElementById("root")
);

<!-- parameters will be extraParameter and e (implicit with bind) -->
<button onClick={(e) => this.handleClick(extraParameter, e)}>Do something</button>
<button onClick={this.handleClick.bind(this, extraParameter)}>Do something</button>

function FancyBorder(props) {
  return (
    <div className={"FancyBorder FancyBorder-" + props.color}>
      <p>Something here.</p>
      {props.children} {/* you can insert JSX here! */}
      <p>Something else here.</p>
    </div>
  );
}
function WelcomeDialog() {
  return (
    <FancyBorder color="blue">
      {/* you can insert JSX here! */}
      <h1 className="Dialog-title">Welcome</h1>
      <p className="Dialog-message">Thank you for visiting our spacecraft!</p>
      {/* you can insert JSX here! */}
    </FancyBorder>
  );
}

function SplitPane(props) {
  // custom props let you control where the JSX "holes" are!
  return (
    <div className="SplitPane">
      <div className="SplitPane-left">
        {props.left} {/* you can insert JSX here! */}
      </div>
      <div className="SplitPane-right">
        {props.right} {/* you can insert JSX here! */}
      </div>
    </div>
  );
}
function App() {
  return (
    {/* custom props let you control where the JSX "holes" are! */}
    <SplitPane
      left={<Contacts />}
      right={<Chat />}
      />
  );
}

// higher-order component: takes a component and returns a component (in this case, with modified props)
const hoc = (WrappedComponent) => (props) => {
  return (
    <div>
      <WrappedComponent {...props}>
        {props.children.toUpperCase()}
      </WrappedComponent>
    </div>
  );
};
// component to put into the “hoc”:
const Username = (props) => <div>{props.children}</div>;
// “hoc” being created:
const UpperCaseUsername = hoc(Username);
// “hoc” being used:
const App = () => (
  <div>
    <UpperCaseUsername>Kingsley</UpperCaseUsername>
  </div>
);

componentDidMount() {
  // A
}
componentWillUnmount() {
  // B
}

useEffect(() => {
  // A
  return () => {
    // B
  };
}, []);

<button
  data-custom-attribuet="some-value"
  aria-label="Close dialog"
>

https://github.com/hchiam/learning-react-error-boundaries

SSR (Server Side Rendering) and React Server Components: https://www.joshwcomeau.com/react/server-components/

• React Scan to get render hints etc to dig into performance sinks: https://www.youtube.com/watch?v=ROKRTZ_xCgo
• avoid interacting with the DOM directly, and use React's abstraction to let React handle DOM manipulation, cleanup, and optimization for you
  • (e.g., don't use querySelector)
  • (e.g., replace jQuery way of doing things with React conventions)
• React key like in <div key={valueThatChanges} className={styles.animate}> can be used to make the div element re-render, and hence also re-run any animation on it set by class .animate
  • btw, key is a reserved keyword in React, and looks like a component prop, but is really like an element ID (key won't show up in the component's props)
  • key is better off as = some unique ID, not simply as array index (key = array index can run into some weird bugs)
  • key must be top-level element in list
  • key only has to be unique within a list
• React useEffect is meant for synchronizing React with something outside of React (e.g. API call).
• Motion (previously Framer Motion) has default springy/natural animations
  • code example:

    import { motion } from 'framer-motion';
    function SomeComponent() {
        return <motion.div
            animate={{ y: 10 }}
            initial={false} // set false so it doesn't include enter animation on load
            transition={{ // not required
                type: 'spring', // this is the default, and so i don't really need transition here at all
                damping: 25, // i like the spring default, so i don't need this either
                stiffness: 200, // i like springy default, so i don't need this either
            }}
        />;
    }

  • use as prop to combine Motion with styled-components:

    const RedButton = styled.button`
        color: red;
    `;
    <RedButton as={motion.button}>

    or composition by wrapping the motion.[...] in a styled(...):

    const RedButton = styled(motion.button)`
        color: red;
    `;

• when to use Higher-Order-Components (HOCs) vs when to use Hooks in React: https://www.patterns.dev/react/hoc-pattern/
  • HOCs:
    • repeated UNcustomized when used by each component
    • can work standalone
  • Hooks:
    • behaviour needs to be customized when used by each component
    • not spread throughout the app, only a few components use it
    • it adds many properties to a component
  • watch out for overriding/colliding prop names! consider merging with something like:
    • const style = { margin: '1rem', ...props.style };
• hooks > classes: https://www.patterns.dev/react/hooks-pattern/
• render props pattern: https://www.patterns.dev/react/render-props-pattern/ (see pros and cons section)
  • props.render(data) so you can pass HTML as a callback to a component's props, and have it render with its own data
    • with <ComponentName render={(value) => (<SomethingElse value={value}/>)}/>
  • or props.children(data)
    • with <ComponentName>{(value) => (<SomethingElse value={value}/>)}<ComponentName/>
  • good reusability and able to share data between components without "lifting" state
• note: count && <element> could render 0 if count is 0
  • so it should instead be: count > 0 && <element>