Paths
React
React is a Javascript library, developed in 2013 by Jordan Walke of Facebook. You’ll find React is both very popular (it’s the 5th most starred JS library on GitHub) and used on... Read more
Beginner
The courses in this section will teach you the fundamentals for React including component states, the special Props object, and JSX. These topics are the perfect foundation for you to move to the intermediate level.
React: The Big Picture
Beginner • 1h 11m
Description
You've heard of React, but is it right for you? In this course, React: The Big Picture, you will first learn why React has become so popular. Next, you will learn the tradeoffs inherent in React's design. Finally, you will explore some drawbacks to consider. After watching this course, you'll have a clear understanding of React's core use cases, advantages, and drawbacks so you can make an educated decision on whether React is right for you.
Table of contents
- Course Overview1m 26s
- Why React?25m 55s
- Tradeoffs23m 32s
- Why Not React?20m 36s
React.js: Getting Started
Beginner • 1h 43m
Description
This course covers the basics of React.js and prepares the student to start developing web applications with the library. React.js is a an open-source JavaScript library for creating user interfaces with a focus on the UI that's abstracted from the DOM, and a one-way reactive data flow. The course will explain using an example web application how to use React.js. The application will be a simple in-browser, math skills kids' game.
Table of contents
- Course Overview1m 38s
- Introduction29m 44s
- Working with Data22m 8s
- Building the Game Interface13m 38s
- Numbers Selection14m 9s
- Game State22m 28s
React Fundamentals
Intermediate • 2h 44m
Description
This course covers the features offered by React and explains their advantages and disadvantages relative to the other popular options available. Important topics include: React's one-way reactive data flow, the virtual DOM, and JSX syntax for describing markup.
Table of contents
- Introducing React17m 15s
- Components45m 51s
- JSX44m 19s
- Events20m
- Forms36m 42s
Intermediate
These intermediate courses will take you through some of the more intricate elements within React, including working with Flux and Redux. Once you fully comprehend the topics in this area, you'll be ready to move to the advanced section.
Building Applications with React and Flux
Intermediate • 5h 8m
Description
Get started with React, React Router, and Flux by building a real-world style data-driven application that manages Pluralsight author data. This course uses a modern client-side development stack including Node, Browserify, Gulp, and Bootstrap.
Table of contents
- Intro21m 15s
- Environment Setup37m 20s
- React Core Concepts21m 14s
- React: Creating Components Introduction24m 13s
- React Lifecycle18m 45s
- React Composition15m 35s
- React Router38m 43s
- React Forms53m 6s
- Flux23m 28s
- Flux Demos54m 24s
Building Applications with React and Redux in ES6
Intermediate • 6h 13m
Description
React is a library with so much power, but so few strong opinions. So building something significant requires a large number of decisions and work to build the foundation. In Building Applications with React and Redux in ES6, you will learn how to use Redux, React Router, and ES6 to build powerful and fast React applications from the ground up, as well as use Webpack, Babel, ESLint, npm scripts, Mocha, Enzyme. Finally, you will create a rapid feedback development environment that runs linting and tests, transpiles ES6 to ES5, starts up Express as a webserver, opens the application, and hot reloads changes every time you hit save and deploys with a single command. When you're finished with this course, you will have a foundational knowledge of React and Redux in ES6 that will help you as you move forward building robust, scalable React applications using a custom, rapid feedback development environment.
Table of contents
- Course Overview1m 36s
- Intro10m 13s
- Environment Setup46m 53s
- React Component Approaches16m 7s
- Initial App Structure18m 41s
- Intro to Redux12m 41s
- Actions, Stores, and Reducers19m 18s
- Connecting React to Redux17m 38s
- Redux Flow51m 4s
- Async in Redux26m 37s
- Async Writes in Redux43m 41s
- Async Status and Error Handling25m 28s
- Testing React26m 25s
- Testing Redux37m 33s
- Production Builds19m 48s
Building Scalable React Apps
Intermediate • 3h 48m
Description
In this course, Building Scalable React Apps, you will remove the guesswork with the React-Boilerplate stack so that you can keep on delivering features, without needing to evolve your stack with every new addition. First, you'll learn how to use redux-saga to elegantly attach side effects to your app. Next, you'll focus on learning how to use reselect to compute values on top of your redux store. Finally, you'll learn how to design your components to keep them as simple, portable, and testable as possible. After watching this course, you'll be able to tackle large React applications alone, or with a team.
Table of contents
- Course Overview1m 25s
- Getting Started23m 44s
- An Introduction to Building Components with react-boilerplate12m 43s
- Loading Data from the Server with Redux-saga19m 31s
- Handling Events with Redux-saga22m 17s
- Styling Your Components with CSS32m 4s
- Adding Routes to your Application25m 43s
- Building Forms to Gather User Input36m 10s
- Achieving Component Reuse19m 30s
- Tackling a Realistically Complex Feature with Your New Skills35m 44s
Styling React Components
Intermediate • 1h 29m
Description
React has changed the way that people think about writing UIs. It has encouraged a community where ideas about how to style UIs have changed as well. There are now several compelling options for how to style your React components. Some are more traditional, some are more progressive. You'll be excited at the options available to you. Try a few out, and it could change the way you approach your next project.
Table of contents
- Course Overview1m 29s
- UIs in React7m 37s
- Inline Styles24m 38s
- Radium13m 13s
- A Webpack Intro for CSS8m 29s
- CSS Stylesheet13m 37s
- CSS Modules20m 26s
Advanced
In this section, you'll explore more advanced topics like the context API, HOCs, external state, performance optimization, production deployment, testing and building a full-stack app using React.
Advanced React.js
Advanced • 3h 54m
Description
Have you ever wanted to create full-stack Javascript applications with React.js? This course, Advanced React.js, covers many advanced topics and best practices about React.js. First, you'll learn how to configure and customize full-stack JavaScript environments. Next, you'll explore how to work with async data and manage an application state both internally and externally. Additionally, you'll dive into components context API, and learn how to use it with higher order components, pure components, presentational and container components, and all components lifecycle methods. Finally, you'll discover performance analysis and optimization, how to use immutable data structures, and how to create production builds for both React.js and Node.js. By the end of this course, you'll be able to efficiently use presentational and stateful React components in production.
Table of contents
- Course Overview1m 25s
- Introduction5m 9s
- Full-stack JavaScript with React.js59m 48s
- Working with an Asynchronous API33m 49s
- The Context API and Higher Order Components27m 30s
- Subscribing to State42m 32s
- Performance Optimization40m 46s
- Production Deployment Best Practices23m 55s
Testing React Applications with Jest
Intermediate • 3h 36m
Description
At the heart of building durable and reliable React applications is a solid understanding of testing, starting with Jest. In this course, Testing React Applications with Jest, you will learn everything you need to do to create solid tests for your React components and applications. First, you’ll learn how to install Jest on any machine, run tests with it via the command line, and integrate it with any Node project. Next, you’ll dive into the various testing techniques, including globals, mocking, and snapshot testing that you can use to make your tests more readable and efficient. Finally, you'll explore how to use all these techniques to test React components and the applications they belong to. When you’re finished with this course, you’ll be able to immediately start writing tests for your React applications, discuss testing strategies and techniques in the workplace, and facilitate development by setting up and configuring Jest.
Table of contents
- Course Overview1m 43s
- Course Introduction14m 40s
- Understanding Testing22m 24s
- Introduction to Jest24m 31s
- Test Running with Jest37m 29s
- Mocking Functions and Modules24m 53s
- Snapshot Testing23m 56s
- Testing Components43m 58s
- Advanced Jest Matchers17m 31s
- Conclusion5m 9s
Building a Full-Stack App with React and Express
Advanced • 3h 24m
Description
In this course, we'll build a full-featured web application which emphasizes lighting-fast load times and live updates. We'll learn how to use React.js to build a front-end web application, and use Browserify and Gulp to load the app isomorphically in Node.js. We'll also learn how to implement Express for handling HTTP requests, and how to integrate Mongoose with Express for fast and expressive long-term data storage.
Table of contents
- Introduction30m 40s
- Scaffolding the App43m 19s
- Creating a React Front-End43m 47s
- Completing the Front End19m 19s
- Implementing an Express Back End21m 58s
- Adding MongoDB28m 3s
- Making the App Isomorphic17m 45s
What you will learn:
- Component state
- Props object
- JSX
- Component lifecycle
- Events and event binding
- React forms
- Performance enhancements
- Styling
Pre-requisites
This path is intended for a novice learner with no prior experience in React. Prior knowledge and understanding of JavaScript is required. Prerequisite path: JavaScript Skill Path
Register for FREE. Get your Pluralsight IQ.
You’ll get unlimited access to adaptive skill assessments that help you validate your skills in as little as 5 minutes, and you'll get to see the Pluralsight platform first-hand.