react.md

Building Modern Web Applications with React

Abstract

In this workshop, you'll learn how to build real-world applications using React. We'll start from the basics of getting your first React application off the ground before quickly moving into component hierarchies, lifecycle methods, state management, testing, and routing. By the end of the morning, you will have created custom components using JSX to build a working application that works with a server-side API and client-side routing and deployed it to production. You'll acquire strategies for debugging and best practices fro structuring your React applications going forward.

Bio

Steve is a senior principal engineer and front-end architect at Twilio SendGrid (https://sendgrid.com). He is the author of Electron in Action (https://bit.ly/electronjs). Steve is the director emeritus and founder of the front-end engineering program at the Turing School for Software and Design—a non-profit developer training program (https://turing,io). He is an organizer of DinosaurJS (https://dinosaurjs.org), a JavaScript conference in Denver, Colorado and an instructor for Frontend Masters (https://frontendmasters.com/teachers/steve-kinney/).

Headshot

https://www.dropbox.com/s/s5i4dns77ke30cs/Portrait%2C%20Steve%20Kinney.jpg?dl=0

Key Takeaways

• Learn how to build components in React using JSX.
• Master the component life cycle and state management in a React application.
• Work with a server-side API to build real world applications.
• Write maintainable unit tests for your component.
• Implement client-side routing using React Router.

Target Audience

Beginner

Method of Instruction

Lecture and hands-on development

Transfer

• Knowledge: 40%
• Skill-Building: 60%

Prerequisites

You should be comfortable with JavaScript.

No React knowledge is required, but the workshop does move at a fast pace, so some experience is helpful.

You'll need a recent version of Node.js installed on your computer with administrative access.

You'll also want the following extensions for Google Chrome.

• React Developer Tools

redux.md

Advanced State Management with Redux

Abstract

Managing application state in a way that is both performant and maintainable is no small task. Redux offers a battle-tested solution for managing state in large, production-scale applications. That said, it can be overwhelming to wrap your head around when you're beginning and even trickier when you're learning it in the context of a React application. It this workshop, we'll look at Redux in its simplest form. We'll explore best practices for structuring your data and binding your application state to a React application. We'll implement advanced patterns such as undo/redo, middleware, and asynchronous actions that work with a server-side API.

Bio

Steve is a senior principal engineer and front-end architect at Twilio SendGrid (https://sendgrid.com). He is the author of Electron in Action (https://bit.ly/electronjs). Steve is the director emeritus and founder of the front-end engineering program at the Turing School for Software and Design—a non-profit developer training program (https://turing,io). He is an organizer of DinosaurJS (https://dinosaurjs.org), a JavaScript conference in Denver, Colorado and an instructor for Frontend Masters (https://frontendmasters.com/teachers/steve-kinney/).

Headshot

https://www.dropbox.com/s/s5i4dns77ke30cs/Portrait%2C%20Steve%20Kinney.jpg?dl=0

Key Takeaways

• Learn how Redux works outside of a React application.
• Understand the inner-workings of the React-Redux bindings.
• Write custom middleware for Redux.
• Work with asynchronous APIs.
• Structure application state for optimal performance and maintainability.
• Implement patterns such as time-travelling.

Target Audience

Inter

Method of Instruction

Lecture and hands-on development

Transfer

• Knowledge: 40%
• Skill-Building: 60%

Prerequisites

You should be comfortable with JavaScript.

Some React knowledge is required, but if you attended the React workshop earlier in the day, you will be able to follow along!

You'll need a recent version of Node.js installed on your computer with administrative access.

You'll also want the following extensions for Google Chrome.

• React Developer Tools
• Redux Developer Tools