Advanced React.js

Take a deep dive into full-stack JavaScript with React.js and learn advanced concepts like the context API, HOCs, external state, performance optimization, asynchronous APIs, testing, deployment, and more.
Course info
Rating
(150)
Level
Advanced
Updated
Jul 21, 2017
Duration
3h 54m
Table of contents
Course Overview
Introduction
Full-stack JavaScript with React.js
Working with an Asynchronous API
The Context API and Higher Order Components
Subscribing to State
Performance Optimization
Production Deployment Best Practices
Description
Course info
Rating
(150)
Level
Advanced
Updated
Jul 21, 2017
Duration
3h 54m
Description

Have you ever wanted to create full-stack Javascript applications with React.js? This course, Advanced React.js, covers many advanced topics and best practices about React.js. First, you'll learn how to configure and customize full-stack JavaScript environments. Next, you'll explore how to work with async data and manage an application state both internally and externally. Additionally, you'll dive into components context API, and learn how to use it with higher order components, pure components, presentational and container components, and all components lifecycle methods. Finally, you'll discover performance analysis and optimization, how to use immutable data structures, and how to create production builds for both React.js and Node.js. By the end of this course, you'll be able to efficiently use presentational and stateful React components in production.

About the author
About the author

Samer Buna is a polyglot coder with years of practical experience in designing, implementing, and testing software, including web and mobile applications development, API design, functional programming, optimization, system administration, databases, and scalability. Samer worked in several industries including real estate, government, education, and publications

More from the author
Node.js: Getting Started
Beginner
3h 29m
11 Sep 2018
Advanced Node.js
Advanced
3h 45m
17 Feb 2017
Building Scalable APIs with GraphQL
Intermediate
2h 10m
19 Aug 2016
More courses by Samer Buna
Section Introduction Transcripts
Section Introduction Transcripts

Course Overview
Hello everyone, my name is Samer Buna, I am a software engineer at jsComplete. com and I am excited to present to you this advanced course about React. js. This course is about creating full-stack JavaScript applications with React. js and Node. js. I cover many advanced topics and best practices that I've learned over the years about using React. js and Node. js. Some of the topics that I will cover include: Configuring and customizing a full-stack JavaScript Environment, Working with Async API data, Managing Components State Internally and Externally, Components PropTypes validation, the Context API, Presentational and container components, Pure components, Higher Order Components, Searching data, Working with Timers, Components Lifecycle methods, Performance Optimization with the Chrome timeline and the React Perf addons, the practical value of Immutable Data Structures, and Production builds for both React. js and Node. js. By the end of this course, you should be comfortable with many advanced topics about creating and using presentational and stateful React components in production. I hope you'll join me on this journey to learn React. js beyond the basics with the Advanced React. js course at Pluralsight.

Full-stack JavaScript with React.js
Hello, in this module, we'll get things started and hash out all the setup and configurations needed to work with a Full-stack React environment. And we'll do so with a simple example React application that we'll start from scratch and have it work on both the client-side and the server-side. Other than the setup and configuration, which you can skip if you're comfortable with that, we'll talk about working with data and how the structure and shape of the data influence the way to create React components. We'll cover a little bit of testing in this module, including snapshot testing, and we'll also see an example of separating components responsibilities into what makes more sense in terms of data ownership. We'll conclude this module by rendering the React application on the server and shipping an initial HTML string to the browser, and talk about the benefits of doing so.

Working with an Asynchronous API
Hello, in the last module, I've used a simple React example application to explain important introductory concepts about building and testing a full-stack React application that works with data. But we so far only worked with initial data coming from memory, which you'd probably never do in an actual production React application. So let's get real. In this module, we'll drop our in-memory data and replace it with an official API, and see what needs to be done on both the client and the server to deal with that. If you've skipped sections in the last module or if you want to simply sync with the current state of the code we wrote so far, you can checkout tag module-3-start, and run the following commands: yarn, to install all the dependencies. This will take a few moments on a fresh install. Then, in one terminal, start the pm2 watcher process with yarn dev. Then, yarn pm2 logs to watch the logs. In another terminal, start the webpack watcher process with yarn webpack, and then in your browser, you should see the initial data displayed in a React application. This is so far server-side ready as well. The application will render initial HTML without the need to execute any JavaScript in the browser, and initially, ReactDOM in the browser will do nothing.

Subscribing to State
In the previous module, we talked about the Context API and Higher order components, but so far we have not changed anything we put on the state. We've just initialized state with some data. So in this module, we'll start working with the state, and we have a few options to do so. We'll first talk about the React's built-in setState method and then we'll talk about how to manage the state externally. If you need to sync your code with the current code of the repo, the last commit is tagged as module-5-start. Before we dive into working with the state, let's do a quick upgrade of the application dependencies. It's been awhile since I first started this repo, because you know, putting together a Pluralsight course takes some time. We'll probably find a few packages that can be upgraded, and most importantly React itself released 15. 6 recently, so I thought now is a good point to upgrade and make sure everything still works as expected. We can use the yarn upgrade-interactive command, which will give us a list of all the packages that can be upgraded. So it looks like we have a few here, including React and ReactDOM. So we can partially select the packages that we need to upgrade or hit a, to select all of them. We'll just upgrade all packages. And once all the packages are updated, we'll restart our system, make sure everything still works. Restart Webpack. Let's also make sure the tests are running. It looks like tests are fine. Webpack is done. Let's test. Everything looks good. Let's also make sure that we're still server rendering, by disabling JavaScript here. Looks like we're still server rendering.

Production Deployment Best Practices
The one optimization in your project that you should definitely do is to use minified production builds for all dependencies and for your own application as well. Right now, we have a single bundle. js file that is about 3 MB, which is a big number. Even half a megabyte would be a big number when working with just text files. But it's not really just about the size and its related network cost, it's also about the performance of code after it's been downloaded, and that is especially true for React. In fact, this is so important, the React team made so many signals to make sure that you don't run a development build in production. React will give out warnings about that, and recently the dev tools introduced an icon with colors about that. This red background here means that you are using a development build for React. And if you go to a site that uses React in production, that icon should turn blue on black. So why is this so important for React? Well, because React has many helper tools in development that we can do without in production, including things like prop-types validations and the useful detailed warnings. These tools that are designed for development make the development build larger and slower. Building React for production basically strips these development tools out to make the build smaller and faster. Of course, developing a React application using a production build would be a bad idea as well, because, for example, instead of getting a helpful warning when something is used in wrong way, you would just get a number or something that's not helpful at all. Unfortunately, the process of deploying things to production in general is not an easy one. There are many configurations needed for various reasons, and it's important that we understand these configurations and their reasons. If you want to sync the code as of now, it's tagged in the repo as module-7-start.