Full-Stack Engine

Top Udemy courses for Learning React

Udemy is one of my favorite online platform for learning resources. It contains thousands of courses from professionals, experts in a variety of technology topics, from fundamentals to the very specifics of a framework of a development tool. You can use it as the first step on the path to learn something new or specialize in the field of your choice.

As I've been using Udemy as one of my primary resources for learning React and the related projects in its ecosystem, I wanted to give you my personal list of recommended courses for learning front-end development with React.

But let's begin by defining what are the things we need to learn from React and its satellite libraries.

  1. JavaScript (ES6 and beyond): This is the absolute starting point, you definitely need to know how to program in JavaScript before trying to get any project done with React. We'll see some recommendations on JS.
  2. Reactjs: Of course, the next thing to master is the basics of React, like JSX, virtual DOM and the lifecycle hooks of React apps.
  3. Application State: Something to get in the skillset belt if we want to create more complex and scalable applications, the most popular library for managing state in React, as we'll see is Redux.
  4. Web Service consumer: An essential component of every front-end framework, a good popular choice is Axios or Fetch.
  5. Test Driven Development: After we learn the basics and feel ready for the next step, there's a necessity to learn how to make our app robust using TDD. A widely used approach for this is using Jest and Enzyme.
  6. Client-side routing: An essential library for React: react-router, used in Web apps and Native mobile apps as well.
  7. Mobile Development: Done with native components for Android and iOS thanks to the React Native project.

ES6 and Webpack

Vanilla Javascript

As I said before, you need to master JavaScript before any attempt to learn a front-end framework, which nowadays are all written in JavaScript or some of its derived flavors (e.g TypeScript, CoffeeScript). In any case, the start point is learning JavaScript and one of my favorite courses in Udemy is: JavaScript: Understanding the Weird Parts, by Anthony Alicea

JS-The-weird-parts

With this course you'll learn:

  • Execution Contexts and Lexical Environments: Functions, Contexts, variables, scopes, ES6 syntax, and others.
  • Types and Operators: Primitive types and operators.
  • Objects and Functions: Objects literals, Functions as Objects, Functions Statements and Functions Expressions, Closures, Callbacks, IFFEs, Functional Programming and others.
  • Object-Oriented JavaScript and Prototypal Inheritance: Classical vs Prototypal Inheritance, Prototype.
  • Building Objects: Function Constructors and Prototypes.

ES6

The previous course contains many of the fundaments of Javascript, but it was made before the arrival of ES6. And as you might know, React programming uses ES6 a lot. For this reason, you can take this course: ES6 Javascript: The Complete Developer's Guide by Stephen Grider

ES6-grider

The course includes:

  • The 'forEach' Helper
  • The 'map' Helper
  • The 'filter' Helper
  • The 'find' Helper
  • The 'every' and 'some' Helper
  • The 'reduce' Helper
  • Const/Let
  • Template Strings
  • Arrow Functions

React with Redux

Moving to the endeavor of managing app´s state. One of the most used libraries in React is Redux (in usage with React-Redux). Here I recommend another course from Stephen Grider: Modern React with Redux

react-redux

Stephen takes us from the basics of React, starting with the setup of a new project, passing through JSX, the library API, classes and component definitions.
After covering the basics, the course is divided into the following main sections:

  1. Ajax Requests with React: Focused on the use of React Components with Axios for consuming web services.
  2. Managing App State with Redux: This section is dedicated completely to redux, how it works and how to integrate it with React.
  3. Intermediate Redux: Middleware: Middleware is the component of redux which deals with the asynchronous nature of web API requests. React and Redux offers a simple but elegant solution to this common task.
  4. React Router + Redux Form: Finally, the course presents a couple of popular and powerful libraries, the first is for handling user requests using forms. A task that proves to be not trivial in other frameworks, redux-form makes it much more easily make then right. The second is react-router, without any doubt, the best library for implementing a client side router, with all the features and flexibility you might expect.

React - Test Driven Development

I found this course in the spirit of filling a gap in unit testing knowledge when working with React projects. But I was amazed how the author, David, covered all the fundamentals of TDD and how they should be used in React Development using Jest and Enzyme, and he does it in only 4,5 hours. I refer, of course to React - Mastering Test and Behavior Driven Development.

react-tdd

The course is made by showing the process of creating two applications while using TDD from the very first step. Some of the concepts it explains include:

  1. Set up a project to use Jest with Unit Tests.
  2. Behavior Driven Development, simulating user events with Enzyme.
  3. How to test Redux, including Actions and Reducers.
  4. How to test APIs and Middleware using Redux Thunk.

React Native

Last, but not least, we can also do mobile development with React. That's when React Native becomes handy. This library has a different approach to its main competitor (Ionic/Cordova or Phone Gap).
Instead of using a web view where a JS program runs inside an engine, in a similar fashion as any program runs in a browser (i.e Chrome, Firefox), what React Native does is converting JSX markup and translating into a Native implementation in Android or iOS. While the logic in JavaScript still runs in an isolated execution context, the rest of the app is native, boosting this way the performance and allowing you to customize the way UI/UX looks in every platform.

That's, among other things is what Maximilian Schwarzmüller covers in the course React Native - The Practical Guide.

react-native

The contents lists as follows:

  1. Getting started with the basics
  2. Using Redux with React Native
  3. Debugging React Native Apps
  4. Liking and Using Third-Party Libraries
  5. Navigation in React Native Apps
  6. Styling and Animating React Native Apps
  7. Handling User Input
  8. Using Native Device Features: Maps, Camera & Image Gallery
  9. Networking - Sending Http Requests
  10. Authentication in React Native Apps

Keep looking for new Resources

Udemy is one of the most popular e-learning sites where you can find thousands of excellent courses, thought by brilliant professionals and available at a really affordable price. But it's not the only one, you can find many many other resources for learning React and other technologies on the web (to name a few, PluralSight, Lynda, Coursera). We're living in an age where information is more accessible than in any other time in history, it depends only on us to take the maximum advantage of it.

Thank you so much for reading this post. Take care and talk to you again with more Full-Stack development topics. Cheers!.

Author image
Costa Rica
Passionate Software Developer with full-stack development experience.