It's one thing to build an app that runs well on your test system, but it's quite another to build an app that still performs well when it's live with thousands of users. What about taking them to the next level and making them cutting-edge? Interested? Let’s learn how!
Packt’s Video Learning Paths are a series of individual video products put together in a logical and stepwise manner such that each video builds on the skills learned in the video before it.
One of the most powerful features of React is that it follows a radically different method of application development. It re-orients developers to create in a fully componentized manner. Redux completes the missing piece of the React framework, and is used at the core of React for most complex React projects. Redux is an implementation of FLUX, which is a pattern for managing application states in React. Redux brings a clean and testable design to the table using a purely functional approach.
This Learning Path is the next step for the React full-stack web developer who wants to gain a full understanding of React development. We begin by covering React components in depth and show you how to build componentized apps and sites with reusable functionality. We will then cover JS, CSS, and React-specific tips and advanced techniques to make sure that you can build highly optimized, scalable, and production-ready applications. Finally, we’ll focus on leveraging the Redux framework to impose better engineering on React applications.
The goal of this course to equip you with skills to move to the next professional level when it comes to building optimized and high-performance websites and apps with React.
This Learning Path is authored by some of the best in their fields.
Ben Fhala is the owner of the online video training school, 02geek.com, and an Adobe ACP. Ben has had the honor of developing applications for members of the US Congress, Prime Ministers, and Presidents around the world. He has built many interactive experiences for companies such as Target, AT&T, Crayola, Marriott, Neutrogena, and Nokia. He has technically directed many award-winning projects and has been part of teams that have won three Agency of the Year awards.
Before we can start building our React components, we need to set up and configure out environment. Let's do just that in this video.
In this video, you will learn the basics of setting up the webpack development server.
For the remainder of our course, we will be developing and exploring ES2016. For us to gain access to it, we will configure Babel 6 into our webpack. Once we set things up, we can develop freely in ES6 as it will automatically be transcribed into ES5. In this video, you will learn a few new ES6 Features as well—default function variables and template strings.
JSX enables us to easily integrate XML style coding into our programming. In this video, we will configure Babel with webpack to enable us to code in JSX directly in our code. We will take a peek into the basics of JSX as well as use React for the first time.
In this video, we will create our first React component class using the new ES6 features.
At the heart of React is the capability to reuse components. To do that, we need to extract common component behaviors into separate classes. In this case, we will be extracting a portfolio item and using it to create items.
Things are getting dynamic but not enough for it to be useful in a really world dynamic component. For us to take advantage of the React dynamic nature, we need to extract data and send it in dynamically into our component. That's exactly what we will do in this video as we explore object deconstructing, importing, and exporting in ES6.
So far, every single component we created would never change once it was created, but that is about to change (pun indented). In this video, you will learn how to create a constructor in ES6, integrate callbacks into our component, and bind their callback functions to our object using the bind method.
In this last video of this section, we will walk through all the things we did to our components throughout this section as we explore the way arrow functions work.
Now that we know how to create components, it's time for us to focus on building our sections in our site.
In this video, we will shift our attention to model data and how we can use it to render our components using React.
Let's take a break from talking about components to introduce const and let, and understand how they work in relation to exporting data from modules.
Although not that many things changed in strings (compared to string templates) in ES6, in this video, we explore them as we create the header component.
Debugging is probably the most important aspect of web development even when it comes to building React applications. In this video, in the process of creating our JSX we will be on the hunt for bugs and show you how to deal with JSX errors.
One of the best ways to plan out your application is to reverse engineer it the way we were doing in the previous few videos. In this video, we continue planning out the data structure of our component as we extract our model from the view.
One of the new cool features available in JSX and ES6 is their spread feature—really great stuff. In this video, you will learn how to work with them in ES6 and JSX to speed up our application development.
To make reusable components it's important for us to give valuable feedback to the users of the component. We will see how to do that in this video.
For a component to be reusable, it can't have content that is baked into it as that would force developers to go into the component and change things around. Instead, we want to separate and make things as dynamic as we can.
There are a few more things we wanted to cover when it comes to reusability and this video is dedicated for that.
It's time to create our navigation, the last major component we need for our site to operate. In this video, we will implement our navigation component as we practice many of the things we learnt throughout this title.
React doesn't like the idea of bubbling events, instead, it prefers that you manually send them around. In this video, we will show you how that is done and implement it on our navigation to update our application that something has changed.
So far, we created a strict separation between our model and our view, but for our application to be completely dynamic we need to, at some point, have our view and model meet. We decided to do that inside our client file enabling us to control which view will go together with which model in a client view.
ES6 introduces maps, and as we are getting close to the end of this title I figured we should use them at least once. Our footer is lost; it's time to bring it back. In this video, we will have a map to the rescue, to reintroduce our footer into our application.
With the help of the new Map API, we will make our menu even more dynamic. By the end of this video, our data will dynamically create a menu.
As a React.js developer, in this first video, we will be building our application setup using NPM.
While browsers are not fully integrated with ES6 we need to transcribe our code down to ES5 to enable the support of these browsers. There are many ways to do so but as we are using webpack to package up our files our best move is to transcribe them as the server is starting up.
In this video, we will continue setting up Webpack to accept our React UI samples files.
Every variable or const you create has an effect on memory usage. Although most of the time these values are negligible when running on a server or on a client with a large usage of memory this can tally up. Generally speaking when you create elements you want to balance between performance and usability. Let's take a look at it in further detail.
When working with variables both from a performance perspective and from a code readability perspective, it is best to cluster all your variables delineations into one big definition. In this video, we will continue setting up our React components as we enhance their performance.
Generally speaking using methods is more taxing on memory then interacting directly with variables. As such, whenever the development time is not hurt by directly typing, companies would prefer that over methods/functions. Strings are the perfect sample for this type of performance enhancements. In this video, we will learn how to use the string template as a great alternative to methods.
One of the biggest bottle necks in programming, mainly inside of loops, is conditions. Generally speaking, if you can remove the condition out of a loop you will enhance you performance of your application. In this video, we will walk you through the different things you should be thinking about when creating loops that have conditions within them.
The biggest time consuming client performance tasks are related to interacting with the DOM. The biggest shift that improved your performance of your application is the fact that you're not interacting direction with the DOM. Let's check that out in this video.
Most often you wouldn't worry much about that level of optimization but in some situations when you need to slice off performance issues, you might want to use ES5. In this video we will talk about how you should focus your energy when improving performance issues of your application.
The biggest feature of arrays is that it can be updated and grown. Let's optimize arrays for this modern web development world, in this video.
The process of creating an array is more taxing then accessing an array that already exists. As such a great place for enhancing performance is to reuse arrays and objects. Let's take a look at just that.
While most of the world is hot and bothered about making things as dynamic as they can, including references to objects when talking about performance anytime we have a variable, we are hitting on performance. Immutable objects have many advantages that we will cover in this video.
Besides optimizing an application to make it perform better, one of the biggest and most dangerous performance hitting elements of any application are its events. In this video we will see how to deal with events within the context of React.
In this video we will learn how to create a Node Server using Express.
For us to inject React into our site on the server we can't use static HTML, instead we need to convert our HTML into a template that we can inject into it the dynamic values. In this video we will set up our Layout system EJS that will be used to render out our dynamic HTML pages.
All of our client side files that we used so far have been using JSX/ES6 and as such would not work on our server. In this video, we will setup our server to handle these files.
Now that we created our server, it's time for us to wrap up our code into a module so we can share it between our production and development servers. In this video, we'll create all the shared assets that will be used both on production and development environments preparing us for our next focus that would be production/development configurations.
Now that we have server-side code on our project, our original webpack can't work without gaining access to this server. In this video, we will set up the capability to perform hot refreshes.
In this video, we continue from the last one and get our server up and running.
At this stage we will have a small conflict between our Webpack development files and our output application. To fix this problem we will fix our priorities when integrating Webpack into our express server.
To get our code to be production ready we really should clean out our CSS from duplicates and condense it down. This in return will increase our application performance and reduces load time of our CSS files. In this video, we will reduce our CSS app file by over 80%.
We are almost done, but we still need to cache and compress the files that are being sent from the server. That is exactly what we will do in this video, as we wrap up the build of our application.
This video will provide an overview of the course.
Understanding the fundamental components of a client application is essential to success in modern frameworks.
As React applications grow, there arises a clear need for a consistent and scalable way to manage your application state. The standard way to achieve this is to follow the FLUX pattern.
Before diving into building applications with Redux, we should get a fundamental understanding of how we implement and organize different concerns.
Take an existing React client and turn it into a Redux application.
A large FLUX application has lots of actions being dispatched from many places in a deep component tree, making bugs difficult to track down. Redux DevTools will help light the way.
As reducers grow, using a switch statement becomes harder to maintain, and immutability becomes harder to enforce.
As a single-page app acquires more pages, managing them all in the same location becomes impractical.
A home-cooked routing implementation might do the trick early on, but it gets hard to manage when things get more complex, and there's no need to reinvent a perfectly good wheel.
We want to retrieve data from the server in a consistent and reliable way. Promises provide a much better abstraction for this than the traditional callback model.
After fetching data, the next step is to display it. Apps will often have multiple list views or grid views with a consistent look and feel across them all. It's therefore helpful to have an easy and reusable way to display lists of records.
Pagination is one of the most common problems to occur in a user interface. We can make it simple and straightforward by leveraging Redux.
Pagination is easy to implement in Redux, but a fully featured library will prevent you from writing the same code in multiple projects.
Asynchronous form submission is another way by which single-page apps can improve on user experience. Leverage Redux and other libraries to elegantly handle both success and failure scenarios.
Forms in Redux are easy, but we don't want to rewrite the code with every new project. ReduxForm is a library that uses a reducer to manage our form state for us.
To improve user experience, we want to prevent submission of invalid data as much as possible. ReduxForm allows you to specify a validate function, which returns information indicating which fields have errors.
All aspects of a react-redux app can and should be tested. React's in-house utilities for testing components leave some things to be desired. Enzyme.js provides a simple and powerful interface to get your components properly covered.
In redux, our actions contain a great deal of our application logic, making them extremely important to test. But asynchronous actions that make API calls can also be somewhat tricky to tackle.
A great deal of the logic in a Redux application is found in the reducers, making them absolutely crucial to test. Fortunately, this is very easy to achieve due to the pure functional nature of Redux.
Packt has been committed to developer learning since 2004. A lot has changed in software since then - but Packt has remained responsive to these changes, continuing to look forward at the trends and tools defining the way we work and live. And how to put them to work.
With an extensive library of content - more than 4000 books and video courses -Packt's mission is to help developers stay relevant in a rapidly changing world. From new web frameworks and programming languages, to cutting edge data analytics, and DevOps, Packt takes software professionals in every field to what's important to them now.
From skills that will help you to develop and future proof your career to immediate solutions to every day tech challenges, Packt is a go-to resource to make you a better, smarter developer.
Packt Udemy courses continue this tradition, bringing you comprehensive yet concise video courses straight from the experts.