Mastering React JS

Build fast, compact, and dynamic web applications with a high performance UI to deliver a spellbinding user experience
3.3 (20 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.
260 students enrolled
$19
$95
80% off
Take This Course
  • Lectures 22
  • Length 1.5 hours
  • Skill Level Expert Level
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 10/2015 English

Course Description

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.

What are the requirements?

  • This course is designed for JavaScript developers who are familiar with ReactJS and are looking forward to building their own personal dream project.

What am I going to get from this course?

  • 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

What 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.

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Introduction to React
02:56

This video will offer the overview of the course.

04:12

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

03:00

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.

04:50

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.

Section 2: First Screen “Orders”
03:12

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

04:24

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

Section 3: First Screen “Maintaining React Applications”
06:39

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

04:16

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

02:48

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.

Section 4: Retrieving Data from the Server
06:51

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.

02:57

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

05:02

State management with ImmutableJS

Section 5: Debugging and Performance Optimization
04:57

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.

02:45

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

Section 6: Adding a Second Screen - The Dashboard
03:27

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

08:05

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

Section 7: React on the Server
03:27

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

04:10

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

Section 8: Email Authoring with React
02:58

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.

04:37

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

Section 9: React Native
03:24

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

03:57

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.

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Packt Publishing, Tech Knowledge in Motion

Over the past ten years Packt Publishing has developed an extensive catalogue of over 2000 books, e-books and video courses aimed at keeping IT professionals ahead of the technology curve. From new takes on established technologies through to the latest guides on emerging platforms, topics and trends – Packt's focus has always been on giving our customers the working knowledge they need to get the job done. Our Udemy courses continue this tradition, bringing you comprehensive yet concise video courses straight from the experts.

Ready to start learning?
Take This Course