Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

React Faceoff at Philly.NET

67 views

Published on

This was a 40 minute talk covering React as part of a introductory "faceoff" with Vue and Angular

Published in: Technology
  • Be the first to comment

  • Be the first to like this

React Faceoff at Philly.NET

  1. 1. React Chris Gomez @SpaceShot www.chrisgomez.com chris@chrisgomez.com http://mixer.com/SpaceShot-
  2. 2. Chris Gomez •Proud attendee of Philly.NET since 2008 •First software was in BASIC on DOS 2.1 •Wrote a PressYour Luck clone (withWhammies) inTurbo Pascal •Microsoft MVP inVisual StudioTools and Development Technologies •Contributor to the StaticVoid Podcast www.staticvoidpodcast.com
  3. 3. Agenda •React •Start Coding in React •Keep Coding in React •Finish Coding in React
  4. 4. Getting Started •Using codesandbox.io in the browser •This sets up a React environment for you •https://codesandbox.io/s/ykjqropr5z •Create basic index.html •Create basic index.js •Webpack is binding this (hidden magic)
  5. 5. React basics •React, ReactDOM packages •React.createElement creates DOM •ReactDOM.render assigns a DOM element to render components to.
  6. 6. React basics •React, ReactDOM packages •React.createElement creates DOM •ReactDOM.render assigns a DOM element to render components to. •Wow that does not look fun.
  7. 7. Enter JSX •Syntax extension to JavaScript •Browsers won’t understand •Need a transpiler (typically Babel) •Modern toolchains set this up for you.
  8. 8. React Components •“class” based with JavaScript classes • function based •These can hold state, too •Arrow functions as stateless components
  9. 9. Learning Resources Kent Dodds A Beginner’s Guide to ReactJS https://egghead.io/courses/the-beginner-s-guide-to-reactjs

×