• Basics
    • Component
    • Attaching CSS classes
    • Variables in JSX
    • Props
    • Children prop
    • Component as a prop
    • Conditional render
    • Conditional class name
    • Fragment
    • Binding handlers to elements
    • Parameters in handlers
    • Data defined in and outside of a component
    • Reactivity
    • memo()
  • Lists
    • Rendering a list/array
    • List with keys
    • List with objects
    • Binding methods in lists
  • Routing & History
    • Routing setup
    • Access route parameters
    • Exact route
    • Highlight active link
    • Programmatic navigation
    • Redirect
    • Fallback to Not Found page
    • Access routing anywhere / useHistory()
    • Use query params in a route
  • State
    • State management
    • Working with previous state
    • Creating a classic toggle
  • Memoized callback / useCallback
    • useCallback introduction
    • Memoized function as a prop
    • useCallback with parameters
  • Lifecycle & variable watching
    • Mount & Unmount with useEffect
    • Watch for variable change
    • Fetch data on mount
    • Memoize function used in useEffect
    • useEffect & useCallback with parameters
  • Computed/Memoized variables
    • useMemo example
    • useMemo and form filtering
  • Context
    • useContext & createContext
  • Refs
    • Focus an input programatically
  • User events
    • Form elements events
    • Form submitting
    • Stopping a click from propagating
    • Window event listener
  • Form handling
    • Input reactivity
    • Whole form example
    • Form validation
    • Custom multiselect
    • Input synchronized with localStorage
  • Tables
    • Table with data
    • Table with data & filter
  • Custom hooks
    • Hooks basics
    • Counter hook
    • Reusable Modal window
  • Navigation components
    • Opening menu
    • Tabs
​x
20
 
1
function App () {
2
  const isPrimary = true // rewrite to false
3
  
4
  let combinedClass = 'other-class'
5
  if (isPrimary) combinedClass += ' primary'
6
  
7
  return (
8
    <React.Fragment>
9
      {/* use short if-else */}
10
      <button className={isPrimary ? 'primary' : ''}>
11
        Click me
12
      </button>
13
      {/* combined with other classes */}
14
      <button className={combinedClass}>
15
        Click me
16
      </button>
17
    </React.Fragment>
18
  )
19
}
20
​