Building Your First React App

By Steven Hicks

Elevator Pitch

In this workshop, you’ll learn how to build a single-page app with React. We’ll discuss the fundamentals of React development and tips for writing maintainable React code. You’ll get hands-on experience with JSX, React Router, state management, hooks, and modern React testing tools.

Description

In this full-day workshop, you’ll learn how to build a single-page app with React. We’ll discuss the fundamentals of React development, the “React” way of building apps, and suggestions for writing maintainable React code. You’ll get hands-on experience building components, managing routes and state, styling a React app, and writing tests.

We’ll be creating an app to manage all the adorable kittens in our lives. The React landscape is extensive, and we can’t cover it all - but you’ll leave this workshop feeling confident to build your next app with React.

This session includes a healthy balance of instruction and hands-on activities. We’ll cover a broad variety of topics required to build a React app:

  • React fundamentals
  • Modern features of JavaScript that ease React development
  • The ‘Component’ mindset
  • JSX, a strange-looking hybrid between JavaScript and HTML
  • Styling React components
  • Routing
  • State management
  • A brand-new feature called hooks
  • Automated testing
  • Best practices

Experience with HTML, CSS, and JavaScript is required. You’ll need recent versions of Git (v2.23.0 or higher), NodeJS (v12.14.1 or higher), and NPM (v6.13.4 or higher). You’ll also need a text editor of your choosing.

Specific setup instructions can be found at https://github.com/pepopowitz/your-first-react-app-exercises/blob/master/SETUP.md.

Notes

This is a full-day workshop (8 hours).

I’ve led this workshop in October, 2018 at DevUp Conference in St. Louis, and in January, 2019 at CodeMash in Ohio.

At both conferences, I received an average rating of 5/5.

Some responses:

“Very well organized and thought out. Great exercises with sufficient instructions. Lots of additional related reading links for follow up after the conference. I learned quite a bit!”

“Big thanks to [speaker name] for the awesome React presentation today! Learned so much and really looking forward to taking a deeper dive.”

“[speaker name]’s excellent “Building Your First React App” workshop has every seat filled and most of the floor space taken too!”