React

Chris Gomez

@SpaceShot

www.chrisgomez.com

chris@chrisgomez.com

http://mixer.com/SpaceShot-

Chris Gomez

• Proud attendee of Philly.NET since 2008

• First software was in BASIC on DOS 2.1

•Wrote a Press Your Luck clone (with Whammies) in Turbo Pascal

•Microsoft MVP in Visual Studio Tools and Development Technologies

• Contributor to the Static Void Podcastwww.staticvoidpodcast.com

Agenda

• React

• Start Coding in React

• Keep Coding in React

• Finish Coding in React

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)

React basics

•React, ReactDOM packages

•React.createElement creates DOM

•ReactDOM.render assigns a DOM element to render components to.

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.

Enter JSX

•Syntax extension to JavaScript

•Browsers won’t understand

•Need a transpiler (typically Babel)

•Modern toolchains set this up for you.

React Components

•“class” based with JavaScript classes

• function based

•These can hold state, too

•Arrow functions as stateless components

Learning Resources

Kent Dodds

A Beginner’s Guide to ReactJS

https://egghead.io/courses/the-beginner-s-guide-to-reactjs