/react-events

Handling events with React elements is very similar to handling events on DOM elements. There are some syntax differences: React events are named using camelCase, rather than lowercase. With JSX you pass a function as the event handler, rather than a string.

Primary LanguageJavaScript

Getting Started with React Event Handling

  1. bind in render
  2. arrow function in render
  3. bind in class constructors => REACR DOC SUGGESTIONS
  4. bind with class function => REACR DOC SUGGESTIONS

15 Methods as props

16 Conditional Rendering

  1. if/ else
  2. Element varialbles
  3. Ternary conditional operator
  4. Short circuit Operator

17 - List Rendering

18 - Lists and Keys

  • A "key" is a special string attribute you need to include when creating lists of elements.
  • keys give the elements a stable identity
  • keys help React identity which items have changed, are added, or are removed
  • Help in efficient update of the user interface

19 - Index as Key Anti-pattern

When to use index as a key

  1. The items in to your list do not have a unique id.
  2. The list is a static list and will not change
  3. The list will never be reordered or filtered.

20 - Styling and CSS Basics

options for react styling

  1. CSS stylesheets
  2. Inline styling
  3. CSS modules
  4. CSS in JS Libraries (Styled Components)