This document provides an introduction and overview of React. It begins with biographical information about the author and an agenda. It then discusses what React is, its ecosystem, creating projects with Create React App, components, state, props, lifecycles, events, and resources. Code examples are provided to illustrate key concepts like JSX, components, and events. Useful tools and topics not covered are also listed.
2. • Full-stack web-developer based in NYC
• Professional Languages: JavaScript, Node,
React, D3, TypeScript, Python
• Hobby languages: Haskell, Swift, Objective-
C, Golang
• Mostly self-taught
• Native New Yorker
• Sneakerhead + Hip Hop Head
• True Knicks fan
CODE CREW | DECEMBER 30, 2017
BIO
3. • High-level overview of React (the basics)
• React ecosystem
• Look at the create-react-app project
• Discuss structuring a small React application
• Component life cycle
• Eventing system
• Look at some code
• Resources
TODAY’S AGENDA
CODE CREW | DECEMBER 30, 2017
4. • Comfortable with JavaScript
• Familiar with ES6/ES7/ES8 syntax
• Somewhat familiar with Babel and Webpack
• Know what the DOM is
ASSUMPTIONS
CODE CREW | DECEMBER 30, 2017
6. WHAT IS REACT?
• A JavaScript library for building user interfaces
• Developed by Facebook
• Component based
• Uses a virtual representation of the DOM for efficient updates
• Provides a functional approach to building UIs
• Learn once write everywhere principle
• Can render to the DOM or native devices (React Native)
CODE CREW | DECEMBER 30, 2017
7. WHO IS USING REACT?
CODE CREW | DECEMBER 30, 2017
9. CREATE REACT APP
• Takes the hassle out of setting up a new React project
• Provides react-scripts to run tests, create prod and dev build, etc.
• Sets up Webpack and Babel configurations
• Provides hot reloading and code splitting
• Dev server for free!
• Everything is FREE!!!!
CODE CREW | DECEMBER 30, 2017
10. VIRTUAL DOM
• JavaScript representation of the DOM tree
• Provides better performance for DOM updates
• Uses a very performant internal diff’ing algorithm to
determine which elements are updated
• When the state or props of a component changes the
virtual DOM is re-rendered to reflect the changes
CODE CREW | DECEMBER 30, 2017
11. JSX
• Preprocessor step that adds XML syntax to JavaScript
• Representation of your virtual DOM
• Looks kind of like HTML in your JavaScript but it’s not…
• Actually gets compiled by Babel and Webpack
CODE CREW | DECEMBER 30, 2017
13. COMPONENTS
• Functions that take some input data and returns a UI
element to display
• Implements a render method
• Optionally uses JSX to render the markup
CODE CREW | DECEMBER 30, 2017
15. CONTAINER VS. PRESENTATION COMPONENTS
Container
• Holds the state
• Passes state down to child components
• Passes functions down to child components
Presentational
• Does not have an internal state
• Receives data and actions (functions) via props
• Re-renders when its props change
CODE CREW | DECEMBER 30, 2017
18. COMPONENT LIFECYCLE
• Mounting - component is added to the DOM
• Unmounting - component is removed from the DOM
• componentWillMount - is called right before the component is mounted
• componentDidMount - called right after the component is mounted
• componentWillUnmount - called right before the component is unmounted
• componentWillReceiveProps - called when new props become available to the
component
• shouldComponentUpdate - write logic to control when a re-render should occur
• componentDidUpdate - called after the component has been updated
CODE CREW | DECEMBER 30, 2017
19. EVENTS
• Are synthetic (wrapped by React for performance reasons)
• Can still reference the native DOM event object if we want to
• Are passed a reference to a JavaScript function to call when
triggered (not a string like in the actual DOM)
• Events are camel cased on the React element they are bound to
CODE CREW | DECEMBER 30, 2017