Intro to React
0 likes240 views
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.
Intro to React
- 1. INTRODUCTION TO REACT Jamal O’Garro Software Engineer CODE CREW | DECEMBER 30, 2017
- 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
- 5. REACT 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
- 8. THE REACT ECOSYSTEM 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
- 12. EXAMPLE JSX 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
- 14. EXAMPLE COMPONENT 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
- 16. STATE CODE CREW | DECEMBER 30, 2017
- 17. PROPS 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
- 20. EVENT EXAMPLE CODE CREW | DECEMBER 30, 2017
- 21. LET’S LOOK AT SOME CODE! CODE CREW | DECEMBER 30, 2017
- 22. RESOURCES CODE CREW | DECEMBER 30, 2017
- 23. USEFUL TOOLS AND LIBRARIES • react • react-redux • reselect • react-router • redux-saga • redux-thunk • redux-form CODE CREW | DECEMBER 30, 2017 • axios • Request • isomorphic-fetch • ESLint • Jest • Yarn • material-ui • Semantic UI
- 24. TOPICS WE DIDN’T COVER • References • Higher-order components • Prop types • Context • Controlled vs. uncontrolled components • Server-side rendering/isomorphic (universal) applications • Redux, Flux, MobX, GraphQL • React Native CODE CREW | DECEMBER 30, 2017
- 25. CODE CREW | DECEMBER 30, 2017
- 26. THANK YOU!!! Jamal O’Garro Software Engineer + Instructor CODE CREW | DECEMBER 30, 2017