2. ABOUT JANICE
• Lead Engineer on Starfish at Hobsons
• Polyglot Developer
• Recently Lost 50 pounds.
• Email: Janice.gluck@hobsons.com
• Twitter @jumpinjanice
3. ABOUT REACT
• Created by Facebook
• View Only – It Renders HTML
• Components (JSX)
• Official Documentation – Good Reference – Meh for learning
• Virtual DOM – Give it State – How to Interprete it and it does the diffing
and rendering for you.
• Builtin Performance Tools
4. HISTORY OF REACT (FACEBOOK)
• XSS injections and PHP (string concatenation)
• XHP - extended PHP that includes XML so no more escaping – secure
• XHP allows custom tags – so build website using composable
components –
• Moved to javascript to move away from server round-trip
• Port XHP to Javascript = React
• Updating the DOM the most difficult thing to do
• http://thenewstack.io/javascripts-history-and-how-it-led-to-reactjs
• Really Good React History Video
5. INSTALL REACT – NEW APPLICATION
• https://facebook.github.io/react/docs/installation.html
9. JSX
• Extension of JavaScript
• Use to Describe what the UI should look like
• Produces React Elements
• JSX expresses the virtual DOM
• babel.io
• https://medium.com/javascript-scene/jsx-looks-like-an-abomination-
1c1ec351a918
10. CODE EXAMPLES
• Simple React Component
• React Component with JSX Events
• Arrow Events - No Rerender
• Working with Other Frameworks/Libraries
11. STATE VS PROPS
• Props are the component’s configuration and are immutable.
• State is a representation of the component at a point in time. State is
private to the component. State can be changed.
• Stateless Components just have props and are used for rendering only
(PureComponent)
• Stateful Components manage communications, data processing, and
respond to user events. Minimize the number of these components
• State vs Props Example
19. HIGHER ORDER COMPONENTS
• Function that transforms components into other components
• Higher Order Component Example
20. REDUX
• Implementation of Flux
• Flux is an architectural pattern used at Facebook for the application
framework that make a full app (React is view only)
• React - Redux - LIving Room Furniture
• Redux Tutorial
Editor's Notes
https://thenewstack.io/javascripts-history-and-how-it-led-to-reactjs/
Costly part of a javascript app is to render your data – react takes care of this by having a virtual dom in memory and doing a very fast diff
In essence, the ReactJS interface is different than other js libraries which are more imperative, meaning you tell them to change the DOM directly. Jquery is like this. ReactJS is more like: here is my state, and here is how you should interpret my state and how it will change. Now, I can sit back and let ReactJS handle the expensive and complicated task of making this visible to the user in the browser.
https://facebook.github.io/react/docs/perf.html
XSS = Cross Site Scripting
Asa - add Virtual DOM diagram
pleasant french accent - speaker
Switch out to react-101 app and show started app and README.md (IN ATOM) and file structure
Webpack – module bundler – dependency graph for every module needed – bundles everything up for you – sort of like maven but much better? – build tool very flexible and powerful
Babel – javascript transpiler – lets you use new javascript features ”now” without having to wait for all browsers to support them by translating to older javascript
Autoprefixer - allows new features of CSS to be introduced into different browsers in different ways and not at the same time
ESLint – static code analysis – like Sonar
Jest – javascript testing tool from face book
ADD gulp or grunt links that do similar things
React Elements are descriptions of what you want to see on the screen.
On babeljs.io – show class instead of className, show dash (used as a minus sign) and show an arrow function
JSX Events – can use arrow functions instead of binding this – arrrow functions don’t have their own this scope – their “this” is the enclosing execution context - easier than “this” and binding BUT each time you click the button a rerender will trigger because arrow function syntax creates a “new anonymous function each time)
Working with other libraries – can also put them in componentDidMount() – (react life cycle method)
Both are JS Objects, trigger a render update and are deterministic - generates the same output each time the same set of state and property values are passed iin
Turducken is a dish consisting of a deboned chicken stuffed into a deboned duck, further stuffed into a deboned turkey
Constructor – initialize state, bind methods
componentWillMount (called just before render – setting state here won’t cause a re-render)
Render (draws the component – batching up set state changes – prevents DOM thrashing
ComponentDidMount - good place to load data
shouldComponentUpdate – performance tweaks – tell React to skip rendering component based on state change if not needed
