Talk Abstract

I'm going to cover some of the fundamental concepts of React and explain how it works. My main goal will be to pull back the curtain for those with little-to-no React experience, but more seasoned React developers will likely learn a thing or two as well. I'll live code the entire talk with good old-fashioned HTML files and script tags - no fancy build system to distract from learning the fundamentals. I'll assume some basic knowledge of HTML and JavaScript. Knowing a little bit about browsers and the DOM will be helpful, but not necessary.

Repository Structure

• Numbered folders for each concept covered in the talk
  • index.html - The code that I started with when beginning a new section
  • end.html - Roughly equivalent to what my file looked like when I finished a section
• /javascript
  • Local versions of the external JavaScript I used in case internet/CDN crapped out on me

Further Reading (or Watching)

• https://reactjs.org/docs/hello-world.html
  • Official documentation - always a good resource
  • Some particularly interesting pages:
    • Lifting State Up
    • Thinking In React
    • React Without JSX
    • Reconciliation
• https://egghead.io/courses/the-beginner-s-guide-to-reactjs
  • My talk was heavily based on this Egghead course
• https://blog.jfo.click/how-react-do/
  • Basically one guy documenting all the mistakes he made and stuff he learned while trying to learn React from scratch. Some parts may be slightly outdated, but it's a good read.
• https://jlongster.com/Removing-User-Interface-Complexity,-or-Why-React-is-Awesome
  • One of the earliest articles on React but it holds up well, despite using some older syntax. Goes into more detail about what React is doing under the hood and explains why it's awesome.
• https://www.youtube.com/watch?v=vyO5wKHlWZg
  • Gets a little advanced towards the end, but I really like this talk. Talks about what it means when people say React is "declarative" and why that's powerful.

Other Stuff I Think Is Cool

• CodeSandbox
  • Let's you build React applications right in the browser. Great for exploring new concepts and prototyping.
• create-react-app
  • Build production-ready React applications with no configuration. Just know that this hides A LOT of configuration from you. Don't use as a crutch to avoid having to understand things like Babel and Webpack.