Paths
Building Web Applications with React
React is an open-source JavaScript library for building user interfaces or UI components. It is maintained by Facebook and a community of individual developers and companies.... Read more
What You Will Learn
- React fundamentals
- Design and style components
- Manage state
- Server-rendering
- Testing components
- Optimizing performance
- Redux
Pre-requisites
- HTML
- CSS
- JavaScript
Building Web Applications with React
This path starts off by introducing the fundamentals of React. It then dives into how to design, style and server render components, manage state and test and optimize your application.
React: The Big Picture
1h 10m
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 Overview
- Why React?
- Tradeoffs
- Why Not React?
React: Getting Started
4h 2m
Description
Building efficient web and mobile interfaces is often challenging and requires the use of imperative logic. React enables you to declaratively describe user interfaces in terms of their state, and it will do the heavy lifting of natively building them for you. In this course, React: Getting Started, you will delve into the fundamental concepts about React and use them to build practical web applications. First, you will see how to design class components and stateful function component, how to one-way flow data and behavior in a component tree, and how to read and update state elements. Then, you will delve into modern JavaScript features used with React like arrow functions, destructuring rest and spread operators, classes, async/await, and more. Next, you will learn some core React tasks like taking input from the user, reading data from an API, managing side effects like timers, and sharing stateful logic with custom hooks. Finally, you will explore how to configure and use a local JavaScript development environment on your machine. When you are finished with this course, you will have the skills and knowledge you need to understand React projects, and start simple React applications from scratch.
Table of contents
- Course Overview
- The Basics
- Modern JavaScript Crash Course
- The GitHub Cards App
- The Star Match Game
- Setting up a Development Environment
Designing React Components
2h 43m
Description
Creating UIs in React is all about creating independent components that seamlessly work together to present a consistent view across your web app. In this course, Designing React Components, you will gain the ability to architect and build high quality web apps, that ensures just the right components re-render as the data in your applications changes. First, you will learn how separation of concerns applies to building React components. Next, you will discover how Higher Order Components (HOCs) and Render Props have led the way in achieving code separation. Finally, you will explore how to use Context for establishing shared information, and use custom hooks for advanced state management. When you are finished with this course, you will have the skills and knowledge of React component design needed to leverage re-usability and ensure consistency in your apps and code with less bugs.
Table of contents
- Course Overview
- Designing Better Components with React
- Add Component Styles with Tailwind CSS
- Building a React Web App and Refactoring into Components
- Implementing Higher Order Component (HOC) and Render Props
- Using React Context and the useContext React Hook for Component Data Sharing
- Master Performance Monitoring, Error Reporting, and Debugging of Components
- Component Techniques Including Optimistic UI and Course Takeaways
Managing React State
5h 5m
Description
There are many types of state. In this course, Managing React State, you’ll learn how to effectively declare state to create rich, interactive React apps. First, you’ll discover eight ways to handle state in React apps. Next, you’ll explore how to manage each of these types of states including route state, component state, and refs in both function and class components. Finally, you’ll learn when to consider global state via context and third party state libraries. When you’ve finished this course, you’ll have the skills to build complex, interactive React apps in the real world.
Table of contents
- Course Overview
- Deciding How and When to Declare State
- Managing Local and Remote State
- Implementing Routing
- Managing Shared, Derived, and Immutable State
- Implementing Form Validation
- Managing State via Refs
- Managing Complex State with useReducer
- Sharing State and Functions via Context
- Managing State in Class Components
- Managing State via Third Party Libraries
Styling React Components
1h 8m
Description
When it comes to styling React components, there are many, many options to consider. In this course, Styling React Components, you’ll learn how to choose what options will fit your projects best by learning a little of each. First, you’ll explore the current state of styling in React. Next, you’ll discover many of the most popular and promising styling technologies available through a set of examples. Finally, you’ll learn how to set up potential projects for CSS. When you’re finished with this course, you’ll have the skills and knowledge of styling in React needed to make an informed decision between the options and start styling your next project.
Table of contents
- Course Overview
- What React Has Done for Styling
- A Catalogue of Styling Techniques
- Comparing Styling with Examples
- Potential Project Configurations for CSS in React
Server Rendering React Components
1h 30m
Description
When users access our applications, a fast, seamless experience can be the difference between a big sale and an unsatisfied customer. In this course, Server Rendering React Components, you'll gain the skills you need to create high-performance and professional applications that integrate both client and server. First, you'll learn about the server rendering workflow and create a scaffold with Babel and Webpack. Next, you'll build a client application with React and add interactivity. Finally, you'll use Express to render the application on the server and deliver a seamless user experience. When you're finished with this course, you'll have a broad range of React, Express, and server-rendering skills you can apply to both personal projects and full-scale enterprise applications.
Table of contents
- Course Overview
- Understanding Server Rendering React Components
- Scaffolding an Environment for Server Rendering
- Server Rendering Basic React Components
- Rehydrating Interactive React Components
- Summary
Testing React Components
2h 23m
Description
React introduced a new style of web user interface development, but it is not obvious how to properly test React components in all different scenarios. In this course, Testing React Components, you'll gain the ability to write automated tests for your React user interfaces. First, you'll learn how to write testable components. Next, you'll discover how to write tests for React components. Finally, you'll explore advanced testing topics such as mocking dependencies and testing asynchronous operations. When you're finished with this course, you'll have the skills and knowledge of testing needed to automate the testing of your React user interfaces. Software required: node.js, npm.
Table of contents
- Course Overview
- Getting Started
- Testing Component Rendering
- Testing Component Events
- Testing Components with State and Effects
- Testing Components with State Management
Optimize Performance for React
55m
Description
React app performance can suffer due to components rendering too often. It's also common for React app bundles to end up too large and take too long to download. In this course, Optimize Performance for React, you’ll learn how to identify and address common React performance issues. First, you’ll explore how to analyze and fix wasted renders on both class and functional components. Next, you’ll see how to cache expensive operation results. Finally, you’ll learn how to reduce your app bundle size using production builds and lazy component loading. When you’re finished with this course, you’ll have the skills and knowledge of React performance needed to ensure that your React apps download and execute as fast as possible.
Table of contents
- Course Overview
- Getting Started
- Fixing Wasted Rendering Issues
- Fixing Large Bundles and Expensive Operation Issues
Building Applications with React and Redux
6h 37m
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.
- Learn how to use React Redux, React Router, and modern JavaScript to build powerful and fast React applications from the ground up.
- Use Webpack, Babel, ESLint, npm scripts, Jest, React Testing Library, Enzyme, and more.
- Create a rapid feedback development environment that runs linting and tests, transpiles modern JavaScript, runs a local webserver, opens the application, and reloads changes when you hit save.
- Deploy with a single command.
Table of contents
- Course Overview
- Intro
- Environment Build
- React Component Approaches
- Initial App Structure
- Intro to Redux
- Actions, Stores, and Reducers
- Connecting React to Redux
- Redux Flow
- Async in Redux
- Async Writes in Redux
- Async Status and Error Handling
- Testing React
- Testing Redux
- Production Builds
Using React Hooks
2h 43m
Description
React Hooks reduce the complexity associated with managing state and lifecycle events exclusively in React Functional Components. What previously was complex, and often required middleware to implement, can be easily done and extended using React Hooks. They are called “hooks” because they allow the developer to hook into existing pre-built functionality. In this course, Using React Hooks, you'll gain the ability to consume pre-built React Hooks, as well as author your own custom React Hooks. First, you’ll learn all about the six most commonly used React Hooks that are built into the React core library. Then, you’ll see how they compare to the corresponding state and lifecycle events in more traditional legacy React Class Components. Next, you’ll explore how to both consume and author your own re-usable custom React Hooks. Finally, you’ll be shown how to combine React Context with React Hooks state management to integrate a Redux-like state management solution into your React app. When you are finished with this course, you’ll confidently be able to build fully capable functional components that use React Hooks.
Table of contents
- Course Overview
- Start Using React Hooks with useState, useEffect, and useRef
- Using More Hooks: useContext, useReducer, useCallback, and useMemo
- Migrating Your Existing Apps to React Hooks
- Learn How to Combine Existing React Hooks into New Combined Hooks
- Using useContext and useReducer to Make a Redux-like Global State