Mastering React JS
3.0 (26 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
303 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Mastering React JS to your Wishlist.

Add to Wishlist

Mastering React JS

Build fast, compact, and dynamic web applications with a high performance UI to deliver a spellbinding user experience
3.0 (26 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
303 students enrolled
Created by Packt Publishing
Last updated 10/2015
Current price: $10 Original price: $95 Discount: 89% off
5 hours left at this price!
30-Day Money-Back Guarantee
  • 1.5 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Build a strong foundation in React Components by slicing and dicing designs into fruition
  • Explore the pitfalls of bad state management and immutable data structures to change the way you program UI’s
  • Ensure predictability of your UI with functional programming concepts
  • Reuse the code on the server to improve performance and optimize the search engine
  • Unit test UIs to find regression errors
  • Save memory and boost execution speed by embracing immutable data structures
  • Apply best practices from the browser to other UI infrastructures
View Curriculum
  • This course is designed for JavaScript developers who are familiar with ReactJS and are looking forward to building their own personal dream project.

Don’t all developers want their website to be simple, attractive, interactive, and dynamic at the same time? Coding the front end while keeping these attributes in mind has been a constant struggle for web developers. Facebook and Instagram, the two most popular social networking sites, have bewitched almost one-third of our population. Well, React has been at the heart of it all, as the JavaScript library precisely developed to build user interfaces specifically for large applications which deal with time-changing data.

Mastering ReactJS will provide you with insights into using JSX with React. It will get you up and running with the React environment, showing you the current best practices as you build an advanced web application.

You’ll start with setting up a development environment with React and gaining an understanding of the component life cycle, how to use virtual DOM and state machines, and how to implement advanced communication between components. We then focus on building an e-commerce admin system and a list of orders for our application Storekeeper.

The course will take root in real-world use cases and challenges on how to unit test complex enterprise-grade ReactJS applications faster. It will teach you how to render screens, explore how the router on the server is utilized and fetch data from the server, as well as e-mail authoring, and building an iOS version of our page.

The course also covers the key optimization points for Storekeeper and explores best practices for debugging. Mastering ReactJS is your go-to guide when building an e-commerce admin application fully equipped with a dashboard, a list of orders, a digest e-mail, and an iOS version.

About The Author

Simon Højberg is a Senior UI Engineer. He is the co-author of Developing a React Edge: The JavaScript Library for User Interfaces published by the Bleeding edge Press, co-organizer of the Providence JS Meetup group, and former JavaScript instructor at Startup Institute Boston. Simon’s big passion is developing streamlined user interfaces, but he also has extensive experience developing servers.

Who is the target audience?
  • This course will get you up and running quickly by reinforcing the fundamentals of ReactJS by pair programming with an expert. It will take you on a journey through creating a fully equipped application, shedding light on some of the most complex processes on its way.
Compare to Other React Courses
Curriculum For This Course
22 Lectures
Introduction to React
4 Lectures 14:58

This video will offer the overview of the course.

Preview 02:56

We will install the environment dependencies of React development, transpile our code, and view a React component in a browser.

Setting Up Your Development Environment for React

We will cover what JSX is, how to use it, and why we should use it. We'll also cover alternate approaches and how we can compose components to build up our application piece by piece.

JSX and Component Composition

We will cover the component life cycle methods, how we can use them, and lastly, how React uses a Virtual DOM to ensure optimal rendering performance.

The Component Life Cycle and the Virtual DOM
First Screen “Orders”
2 Lectures 07:36

We will learn how to choose a solid foundation for our application that is flexible and maintainable as the application grows.

Preview 03:12

We build a list of orders for our e-commerce application with data and a status filter.

Adding Dynamic Content
First Screen “Maintaining React Applications”
3 Lectures 13:43

We will write a unit test for the individual order row component with mocha and TestUtils.

Preview 06:39

We will write a unit test of the orders component and look at how we test component state changes.

Unit Testing Complex React Components

We will add flowJS to our application in order to help find type errors and improve an understanding of the original intent of our program when we come back to it years later.

Type Checking with Flow
Retrieving Data from the Server
3 Lectures 14:50

We will empower our list of orders with real data from our server by looking at the best practices for a simple and maintainable system.

Preview 06:51

We will explore how we can manipulate the state retrieved from the server by adding filters to our list of orders.

Manipulating the State

State management with ImmutableJS

State Management
Debugging and Performance Optimization
2 Lectures 07:42

We will explain the importance of shouldComponentUpdate for performance and use React.addons.Perf to find the place where such optimizations are needed the most.

Preview 04:57

We use the React Chrome extension to find bugs in our code by inspecting the components that live in the browser.

Troubleshooting Bugs with the React Chrome Extension
Adding a Second Screen - The Dashboard
2 Lectures 11:32

We will add a router to our application and the new Dashboard page as the main page.

Preview 03:27

We will load data from the server and present it in a line chart using SVG and D3.

Adding Charts to the Dashboard
React on the Server
2 Lectures 07:37

React is primarily a client-side framework for single-page applications; however, it can be used to render HTML on the server as well.

Preview 03:27

We will load data on the server into our flux stores for server-side rendering.

Server-side Rendering with Data
Email Authoring with React
2 Lectures 07:35

We will add a digest e-mail to the application and explore how we can hide a lot of ugly hacks that are needed in e-mail authoring in order to support a multitude of e-mail clients.

Preview 02:58

We will add SVG charts to our digest and embed them in the e-mail along with styles.

Inlining SVG Charts Digest E-mail
React Native
2 Lectures 07:21

We navigate Xcode and React Native to set up a new app

Preview 03:24

We will rebuild our web orders list for the phone form factor using the same API to illustrate how many of the same techniques we can reuse.

Rendering Orders with Data from the Server in iOS
About the Instructor
Packt Publishing
3.9 Average rating
8,197 Reviews
58,902 Students
687 Courses
Tech Knowledge in Motion

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.