Quick presentation used to introduce React JS to students and faculty

1. A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES

2. What is the DOM
• Document Object Model
• When a webpage is loaded, the browser creates a DOM

3. What is React and 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 combination of 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 can be 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: Large single 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: Component based 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-React node 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
• Each component 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