Introduction to React

Introduction to React

• 1.
  A JAVASCRIPT LIBRARYFOR BUILDING USER INTERFACES
• 2.
  What is theDOM • Document Object Model • When a webpage is loaded, the browser creates a DOM
• 3.
  What is Reactand why should I use it • React allows you to create separate independent components • Each component can be changed and rerendered without effecting other objects on the page • Changes can be made to the page without retendering the entire DOM • Add react to existing JavaScript application without having to rewrite the whole thing • Reuse components
• 4.
  Downsides of React •Difficult error messages due to its stacking nature • Owned by Facebook • If Facebook believes you are competing with them, they can shut you down. • JSX is … odd
• 5.
  JSX • A combinationof JavaScript and XML • The layout of a React component • The combination of JS and XML drives text editors crazy
• 6.
  Components • Each React“piece” you make is a component • Components each hold their own properties • Components can reload individually • Can call other components
• 7.
  Properties • Properties canbe passed to, set, or calculated within a component • Properties will reset for the component each time it is initiated • Can be used to store dynamic data
• 8.
  Getting Started: Largesingle React pages • The page is all one react element • Easy to code • Easy (at least easier) to understand error messages • Easy way to start to understand properties • Whole DOM must reload for changes • Harder to reuse code
• 9.
  Proper React: Componentbased development • Each part of a page is a react component • More dynamic pages • Less DOM heavy • Displays can change as data changes • Hard error messages
• 10.
  Integration with non-Reactnode software • React can work inside existing application • Other software can be wrapped in a component for use in react based websites • Using props as data sources allow dynamic views
• 11.
  Component Lifecycle • Eachcomponent will go through a lifecycle • Allow you to trigger functions on certain events • Allow component to change when new or specific data is passed to it • Can be triggered by parent components
• 12.
  Lifecycle stages • Constructor •Called before the component is mounted • ComponentWillMount • Called directly before render, also run on the server • ComponentDidMount • Called directly after the component is mounted • Render • Fires whenever anything changes • Holds the JSX • Required!
• 13.
  Lifecycle stages continued… •componentWillReceiveProps • Called before handling any properties • Good for initializing data and variables • componentWillUpdate • Called when new properties are received from parent • Will re-render component • componentDidUpdate • New properties were received • Safe to work on DOM
• 14.
  Examples of React •Any Facebook webapps • AirBNB • Codecademy • Cloudflare • eBay • IMDB • Imgur • Intuit