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
3h 55m
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 the various primitive methods for sharing data and methods between components. 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
- Managing React State in a Component Hierarchy
- Asynchronously Updating React State Using Custom React Hooks
- Using React Context and the useContext React Hook for Component Data Sharing
- Use React Context to Share a Speaker Data and CRUD Functions
- Master Performance Monitoring, Error Reporting, and Debugging of Components
- Use Higher Order Components and Render Props with 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
Implementing Forms in React
1h 48m
Description
Forms are the primary mode of collecting user input on web apps. In this course, Implementing Forms in React, you will learn to create forms for your web app that are not only performant, user friendly, and consistent but are built using components that are reusable and have rock solid data validation.
First, you will explore how a basic form works with Vanilla React and how to manage its state and handle user input. You will also see how to create a form using a library called Formik to avoid writing a whole lot of boilerplate code that is needed when using Vanilla React.
Next, you will explore adding sync and async data validation to your forms using the various mechanisms provided by Formik and how to create custom self-sufficient form elements that can be reused across screens in your app to provide that consistent look and experience to the end user.
Finally, you will learn how to implement uncontrolled forms and alternative ways of implementing forms that rely solely on uncontrolled components like the React Hook Form library and what advantages that brings.
When you are finished with this course, you will be very comfortable creating forms in React that can not only support a wide variety of user inputs but are smooth, consistent, and air tight when collecting data from the user.
Table of contents
- Course Overview
- Creating Forms Using Vanilla React
- Creating Forms Using Formik
- Implementing Data Validation
- Creating Reusable Custom Form Elements
- Implementing Uncontrolled Forms Using Vanilla React
- Using React Hook Form to Create Uncontrolled Forms
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
3h 20m
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
Choosing a React Framework
1h 6m
Description
There are many different React frameworks to choose from, and it can be a struggle to choose the optimal one for your use case. In this course, Choosing a React Framework, you’ll learn to compare and select React frameworks for web projects. First, you’ll explore the different kinds of available React frameworks. Next, you’ll discover which kinds of criteria frameworks can be compared by, and how each one stacks up. Finally, you’ll see how the most popular frameworks compare to one another. When you’re finished with this course, you’ll have the skills and knowledge of React frameworks needed to choose the best one for your web project.
Table of contents
- Course Overview
- Factors to Consider When Choosing a Framework
- Framework Basics and “create-react-app”
- Third Party Framework Options
- Comparing Frameworks
Calling APIs with React
2h 14m
Description
Single-page applications commonly use APIs to retrieve data from the server. In this course, Calling APIs with React, you’ll learn to use React to communicate with APIs. First, you’ll explore how to send HTTP requests and use the results from React. Next, you’ll discover more advanced mechanisms to call APIs, such as React Query and SWR. Finally, you’ll see how to test your APIs and use proper error handling. When you’re finished with this course, you’ll have the skills and knowledge of React needed to work with APIs.
Table of contents
- Course Overview
- Making HTTP Requests
- More HTTP Request Options
- Advanced Data Retrieval
- Testing and Error Handling
Managing Large Datasets in React
51m
Description
As websites scale, they’re required to handle more data. In this course, Managing Large Datasets in React, you’ll learn how to engineer your website to handle large datasets while remaining fast and performant. First, you’ll explore how to measure the performance of your application, and how it’s affected by rendering large datasets. Next, you’ll discover how to render components efficiently using pagination. Finally, you’ll learn about more efficient and dynamic implementations like infinite scroll and windowing. When you’re finished with this course, you’ll have the skills and knowledge needed to build lightning fast applications capable of handling millions of rows of data at a time.
Table of contents
- Course Overview
- Analyzing Performance with React Developer Tools
- Improving Performance through Pagination
- Optimizing Renders with Infinite Scroll and Windowing
- Eliminating Needless Renders
Building React Apps with TypeScript
57m
Description
Building complex modern web applications with React can be prone to errors. In this course, Building React Apps with TypeScript, you’ll learn to leverage TypeScript to develop React applications that provide type-checking at compile-time to help avoid run-time errors. First, you’ll explore how to get TypeScript working in an existing React application (and see how to start one from scratch). Next, you’ll discover how to declare both function and class components with help from TypeScript. Finally, you’ll learn how to use TypeScript types with React hooks. When you’re finished with this course, you’ll have the skills and knowledge of how to use TypeScript and React together to build modern React web applications in a type-safe way.
Table of contents
- Course Overview
- Configuring TypeScript in a React Application
- Declaring Components and Props using TypeScript
- Using Hooks with TypeScript
React Security: Best Practices
1h 5m
Description
Users expect Web applications to be secure and React apps are no different. In this course, React Security: Best Practices, you’ll learn to improve the security of your React applications. First, you’ll explore how to use React features to prevent cross-site scripting attacks. Next, you’ll discover how to safely render dynamic HTML in your React components. Finally, you’ll learn how to prevent code injection vulnerabilities when using server-side rendering. When you’re finished with this course, you’ll have the skills and knowledge of React security best practices needed to better protect your users.
Table of contents
- Course Overview
- Preventing Cross-site Scripting Attacks
- Safe Dynamic Content Rendering
- Defending against Code Injection through JSON Data