React — an introduction

React refers to a JavaScript library that builds user interfaces which:

• focuses on components (and therefore code re-usability)
• manages real-time changes in data (known as state)

When we use React, we usually use it to:

• gather JSON data (via fetch or async/await) into variables
• listen to user input (clicks, changes, keystrokes, mouseovers, etc.)
• manage changes in state (i.e. changes in the data)

Topics

• Setup
  • ⚛️ 🔢 Creating React apps from scratch
    • without create-react-app
• Fundamentals
  • ⚛️ 🛡️ JSX
    • rendering HTML within JavaScript functions
  • ⚛️ 🍱 Components
    • separating concerns within a React app
  • ⚛️ 🤜 Props
    • passing data from a parent to a child component
  • ⚛️ 📝 State
    • keeping track of a component's changing variable values
  • Conditional rendering
  • List rendering
  • Event handling
• Deployment (to the Internet!)
  • ⚛️ 🚀🐙 Deploying react apps to GitHub pages
    • requires Git and GitHub
• Hooks (helpers)
  • useEffect
  • useState
  • useRef
  • useMemo
  • useCallback
• Styling (CSS)
  • with vanilla CSS
  • with CSS modules
  • with CSS-in-JS
  • with Tailwind
• Expansion (multi-page apps)
  • React Router
  • React Query
  • Fetching external data
  • Generic props
  • Props spreading
  • Render props
  • Custom hooks
• Testing
  • with Jest
  • with React Testing Library
  • fireEvent
  • Code coverage reports