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
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