React Faceoff at Philly.NET
Download as PPTX, PDF1 like322 views
This document contains information about a React presentation by Chris Gomez. It includes Chris Gomez's background and contact information. The agenda covers getting started with React, basic React concepts like JSX, components, and state. It also provides a link to an online code sandbox for a basic React project and recommends a beginner's guide to React by Kent Dodds on Egghead.io for additional learning resources.
React Faceoff at Philly.NET
- 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