Table of Contents

React.js

• What is React?
  • Frontend framework for building UIs
• Advantages
  • JSX makes it easier to render data on the UI.
  • Components are reusable
  • Virtual DOM makes updating webpage more efficient.
• JSX
  • Syntax for React’s render() function that mimics HTML.
  • Let’s you write “HTML” inside React’s render() function.
  • Gets compiled into regular JavaScript later.
  • To use React:
    1. Create a ‘React app’
       • Can be multiple webpages, a single page, box, or element.
    2. Create a component.
       • Components can be duplicated and reused infinitely.

Components

• Two types of components in React
• Class components (created as classes)
• Function components (created as JS functions)
• Every component has
• Props - Immutable (final) object fields.
  • Passed into constructor to create the component. Can’t be changed after that.
• States - Changeable object fields. - The field values determine the state of the component, which affects how the component will be rendered on the UI.
• Render function - Checks value of state fields (conditionals) - Returns JSX code that visualizes the data on the UI.
• After you create a component, you can reuse it infinitely.

Virtual DOM

• React keeps a virtual representation of a webpage’s DOM in your RAM.
• Virtual DOM is synced to real DOM. Can diff the two to quickly find recent changes.
• When rendering, React finds recent changes and renders only those to save time.

Hooks