This React class has 12 hands-on labs that are outlined at the bottom of this page. The labs allow you to practice the following skills:
Lab 1 – Setting Up the Lab Environment
In this short lab, you will set up your lab environment and learn how to start, use and stop the nginx (pronounced “engine x”) web server (http://nginx.org) that we will be using in this course’s labs.
Lab 2 – Getting Started with React
Lab 3 – DOM Updates in React
In this lab we will work with a React app designed to help you understand the DOM update efficiencies exercised by React. You will remember that React compares (diffs) its own cached “virtual / mock ” DOM structure with the native DOM of the web page and only renders the necessary updates on the page’s DOM.
Lab 4 – JSX Expressions
In this lab, you will familiarize yourself with JSX by working on a React app that uses JSX expressions. JSX is a powerful mechanism to bring in templating support to React and it is positioned as one of the stronger selling points of React.
Lab 5 – Using the On-line Babel REPL
Lab 6 – Using Composite Components
In this lab, you will be working with composite React components which act as re-usable building UI blocks. We will also take a look at how to pass complex parameter objects to components.
Lab 7 – Working with Lists in JSX
In this lab, you will learn how to properly use lists (arrays) in JSX-based React applications.
Lab 8 – A Class-Based React Component
Lab 9 – Using ES6 for Creating React Components
In this lab, you will learn how to create and work with React components written in ES6. You will learn how a React app can maintain its state and how changes to the state cause components to re-render themselves.
Lab 10 – Event Handlers in React
In this lab, you will learn how to attach event handlers to React UI components.
Lab 11 – Installing Babel Command-Line Interface
While the on-line Babel REPL (https://babeljs.io/repl) is a great tool for quick prototyping and learning, in practice, you will probably need to install Babel locally in your Dev environment and plug the Babel compilation step into the build process and continuous integration workflow.
Lab 12 – Using Babel Command-Line Interface
In this lab, we will work through the essential steps required to compile a JSX-enabled React app using Babel CLI, and integrate the transpiled code with a web page.
In this React class, attendees will learn how to:
- Understand the programming model provided by the React framework
- Define React components
- Use the React framework to handle events and stateful data