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

1. React
Chris Gomez
@SpaceShot
www.chrisgomez.com
chris@chrisgomez.com
http://mixer.com/SpaceShot-

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. Agenda
•React
•Start Coding in React
•Keep Coding in React
•Finish Coding in React

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. React basics
•React, ReactDOM packages
•React.createElement creates DOM
•ReactDOM.render assigns a DOM element
to render components to.

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. Enter JSX
•Syntax extension to JavaScript
•Browsers won’t understand
•Need a transpiler (typically Babel)
•Modern toolchains set this up for you.

8. React Components
•“class” based with JavaScript classes
• function based
•These can hold state, too
•Arrow functions as stateless components

9. Learning Resources
Kent Dodds
A Beginner’s Guide to ReactJS
https://egghead.io/courses/the-beginner-s-guide-to-reactjs