1.1 Introduction

Hello and welcome to the Tuts+ course on React Deep Dive. My name is Pavan Podila, and in this course, we'll take a practitioner's approach to creating React apps. The app we will be building will be called the Har Viewer. It's a small subset of the network panel from Chrome Dell tools, but the Har format is just a JSON file that captures the network traffic happening within the browser. We'll be reading that file, showing your table of all the URLs that were requested, the timings, and also distributional of the file types within the URLs. Before we jump into the project, we'll take a pit stop and look at the text stack we're dealing with. We'll look at Virtual DOM and some of the core mechanics that powers it. We'll do a quick pass over the algorithm that it uses, and then jump onto Webpack, the de facto build tool that's used by the React community. Here we'll look at its core building blocks, and then eventually build a simple configuration file that we'll use for rest of the project. We'll also do a brief tour of ES6, the language of choice for our project. Throughout this course, we'll be building several React components. Some of them are fairly big, and we'll learn practices and techniques that can be used to break them down into smaller components. Refactoring is only something we'll be doing frequently throughout this project. We'll incrementally build several of these components, starting with the filter table, and then adding the filter body at the top, and also refactoring it along the way. We'll also look at some strategies for handling communication between components. We'll created something called as the high order component which is basically a composition of smaller components. By the end of this course, you will learn several techniques to create, organize, and build React apps. Scaling from the really small to the big, and do it in a way that keeps the code pretty readable. So let's get started with React Deep Dive.