Advanced React Recipes

Advanced React Recipes

English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 3h 26m | 849 MB

Get the finest recipes by combining the power of React and Redux to help you create dynamic apps easily.

ReactJS has been getting more and popular in the front-end development scenarios. It enables you to write even the most complicated dynamic interfaces making easy things easier and hard things achievable. Having a React app fully functional and tested is good enough, but that doesn’t mean we can’t make it even faster, smaller and more maintainable. In this course, we are going to review some concepts and tools that can turn a good React app, into a quality one.

Many tutorials make a good job explaining React, but they lack on covering what recipes can be followed to create some quality project. This course gathers all techniques and good practices I’ve learned to not just write a React application but doing in in an elegant and maintainable way. Starting off with how to simply add and configure Redux in our project, we will create a file structure that suits well in almost every React project. To move forward, we are going to see Redux in action in three very common scenarios: simple actions, modals handling and network requests.

Further, we will learn how to implement our own middleware to make network request even easier. In addition, we will also add a time-to-live feature to avoid unnecessary request and save bandwidth. One thing is having your app flawlessly running on your localhost, but a whole different one is running remotely, for example, on a cloud-based server. By the end of this course we will review the basic principles of deploying a React app in production, studying two different use cases.

Each section of this course will be fully explained and coded by the author. No magic pieces of code will appear from one video to another. Special attention will be paid on recipes and good programming practices in each discussed topic, aiming to things not only work as supposed, but writing quality code in the process.

What You Will Learn

  • Add and configure Redux in your project to boost efficiency
  • Resolve network issues with redux middleware
  • Create interactive UI animations.
  • Recompose and operate with higher order components.
  • Build higher order components on your own
  • Explore pros and cons of different styling approaches
  • Deploy a react app on different cloud platforms
Table of Contents

01 The Course Overview
02 How to Easily Configure Redux to Your Project
03 Most Common and Handy Middlewares That You Will (Probably) Always Need
04 State and Data Management in Redux
05 Using Redux to Dispatch Simple Actions
06 Resolve API Calls Through Redux
07 Using Redux State to Handle Modals
08 Redux Middleware Signature and Injection
09 Create Middleware to Resolve Network Calls
10 Adjust Redux to this Solution
11 Add Resource Time-to-Live Feature
12 Different Approaches
13 A CSS Way – Using animate.css
14 A Programmatic Way – Using React Animation Add-Ons
15 Understanding Higher Order Components
16 Recompose – The Good Parts
17 Integrate Recompose to an Existing Project
18 Writing Our Higher Order Component
19 Making a Custom Production Build
20 How to Serve a React App Using Express.js
21 Deploying to Heroku
22 Deploying to Surge