ReactJS Workshop

Fundamentals of React & Redux Workshop
This one day workshop is led by Object Partners Consultants that have been building JavaScript applications for a number of years and love working with the latest and greatest front-end frameworks like React, Redux, ES6, and Webpack to deliver solutions for clients across many industries here in the midwest and beyond. Together, through a series of short lessons and code-heavy labs, we will build a running application with React and Redux. You will leave with a working understanding of how to use React in your own applications, as well as working code to leverage as a helpful future resource.

Workshop Objectives

• React Vocabulary and Concepts
• Redux Usage
• Familiarity with Modern JS Tools

React Basics
In the first part of this workshop, we’ll start by covering core React concepts like virtual DOM. Once we clear the core concepts, we’ll cover React classes and the API’s that are provided. We’ll go into detail about render, states, props, as well as lifecycle of a React component. After that, the discussion will go to JSX and important distinctions between regular HTML. We’ll cover how you can test your very first React component with Jest and Enzyme. And of course, an overview of the React tooling landscape: including the latest in JS build tools, JS dependency management, and the amazing Create-React-App bootstrapping framework.

React Router
Now that we know how to create React components, we’ll cover how we can make all of them work together to build a lightning fast single page application using the React router. In this lecture, we’ll cover all you need to know about configuring the React states as well as the API’s and components you can use to transition between them.

Redux
Now that our application footprint is starting to grow, we’ll need a good pattern to orchestrate the state of all our components. This is where the Redux architecture comes in: to be the single source of truth to back our single page application. In this lecture we’ll cover the major parts of Redux (actions, reducers, and stores) and how they interact. In the lab, we’ll add the Redux library to our application and use it to supply data to our React components.

React Forms and Validation
In the final lecture and lab, we’ll put some forms over our data. We’ll cover React form components and why they differ from other native React components. Then we’ll discuss how we can add validation to our form components in React Bootstrap. In the lab, you’ll use what you’ve learned to create forms that we’ll use to persist data to a REST service.