React/Redux

Watch User Created Playlist (18)

This playlist is user created.

pro-course-rss-logo

PRO RSS Feed

Introduction to The Beginner's Guide to ReactJS

Course Overview: Testing React Components with Enzyme and Jest

Course Overview: Manage React Form State with redux-form

Bootstrap a create-react-app project with React, Redux, and redux-form

Why use TypeScript with React

Bootstrap a React Application with Yarn & Create React App

Error Handling using Error Boundaries in React 16

Install and Configure the Entry Point of react-intl

Setup React Native for iOS and Android

React Testing: Setting up dependencies

Use create-react-app to Setup a Simple React App

Introducing Advanced React Component Patterns

Course Overview: Advanced React Component Patterns

Add Babel Integration with Jest

P

Start Building a React Native Application

Redux: The Single Immutable State Tree

Handle Side Effects with Redux Saga Generator Functions

Redux: The Middleware Chain

react tutorial about Introduction to The Beginner's Guide to ReactJS

Introduction to The Beginner's Guide to ReactJS

2:07 react

Here's an intro to the course material. Enjoy the course!

react tutorial about Course Overview: Testing React Components with Enzyme and Jest

Course Overview: Testing React Components with Enzyme and Jest

1:14 react

This course is designed to give you the power to not only create composable elements but to create predictable React components. We will review most of the concepts required to make intuitive tests based on how our users will interact with the components.

The course begins with basic concepts of setup and installing configurations to work with any release of React. Throughout the course we break down selectors, rendering methods, snapshot testing, and how to replicate user activity. We finish the course with more advanced lessons, the 'putting it all together' tutorials. We test a basic React form and a Redux connected component.

react tutorial about Course Overview: Manage React Form State with redux-form

Course Overview: Manage React Form State with redux-form

1:29 react

In this course, we are going to use the redux-form package to create a form whose state is easy and enjoyable to manage.

Using redux-form, we have a resource which provides not only the benefit of integrating form state with an existing Redux application, but also being able to track the state of our form with precision in Redux Dev Tools without writing lots of boilerplate code.

Specifically, we are going to find out how redux-form ties into a React/Redux application, how to use validation both synchronous and asynchronous, applying real-world examples, effective ways of presenting important information to the user, and creating neat and reusable form components.

Working with forms can be laborious, but redux-form takes out the tedium and replaces it with an enjoyable experience creating beautifully crafted forms.

react tutorial about Bootstrap a create-react-app project with React, Redux, and redux-form

Bootstrap a create-react-app project with React, Redux, and redux-form

3:01 react

We are going to use create-react-app to set up a React app. Then, we are going to install redux and redux-form as dependencies and add Redux Devtools.

react tutorial about Why use TypeScript with React

Why use TypeScript with React

2:53 react

You get excellent developer experience when using TypeScript with React. This is better when compared to many other frameworks that work off of simple template strings because JSX is embedded within TypeScript.

In this lesson we give a demonstration of the some of the powerful refactorings and type checks enabled by using TypeScript with React.

react tutorial about Bootstrap a React Application with Yarn & Create React App

Bootstrap a React Application with Yarn & Create React App

2:18 react

In this lesson we’ll bootstrap and React application using Yarn and Create React App through the yarn create command.

react tutorial about Error Handling using Error Boundaries in React 16

Error Handling using Error Boundaries in React 16

6:01 react

A JavaScript error in the UI shouldn’t break the whole application. To solve this problem React 16 introduced the new concept of an error boundary.

Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the crashed component tree.

In this lesson we'll create an error boundary. We can use the new lifecycle hook componentDidCatch to handle any errors that the components we wrap throw at us, without unmounting our entire app!

react tutorial about Install and Configure the Entry Point of react-intl

Install and Configure the Entry Point of react-intl

4:21 react

We’ll install react-intl, then add it to the mounting point of our React app.

Then, we’ll use react-intl helpers to load locales in our app, including English, Spanish and French and choose which locale data to load based on the user's browser language.

We’ll also set up and include messages files for each language, which hold all of the translated strings for our app.

react tutorial about Setup React Native for iOS and Android

Setup React Native for iOS and Android

4:48 react

In this lesson we'll walk through the process of installing the react-native-cli through setting up a basic react-native project on iOS. We'll get the basic project running in a simulator via XCode. We'll also setup Android, Android Studio and get the project running on an emulator with the react-native run-android command.

react tutorial about React Testing: Setting up dependencies

React Testing: Setting up dependencies

0:46 react

To write tests for our React code, we need to first install some libraries for running tests and writing assertions. In this lesson we walk through setting up Mocha as our test runner and expect as our assertion library. We will also set up some React and JSX specific test tools (React Test Utils) to make writing our tests easier.

NOTE: There are many alternatives to Mocha, expect, and the other test tools we use in this course. Although we use these specific tools and libraries, the testing principles apply to all other tools.

react tutorial about Use create-react-app to Setup a Simple React App

Use create-react-app to Setup a Simple React App

3:14 react

React requires some initial setup before we can get going with the app. In this lesson, we will use create-react-app to do this initial setup for us.

react tutorial about Introducing Advanced React Component Patterns

Introducing Advanced React Component Patterns

1:44 react

Here's a little intro to the course material. I hope you enjoy the course!

The goal of this course is to give you the concepts and ideas you need to make components as simple and flexible as possible so you and your team will have an easier time building an amazing UI.

You will learn several patterns in this course (Comound and HoC components, render props, and the Provider pattern etc.) that are used broadly in the JavaScript (and specifically React) ecosystem. Some patterns are meant to be used in place of others while many compliment when used in tandem with each other.

None of these patterns have caused performance issues of note so give each pattern a try and see how you like it.

Links:
- React, Inline Functions, and Performance

react tutorial about Course Overview: Advanced React Component Patterns

Course Overview: Advanced React Component Patterns

2:05 react

Here's a little intro to the course material. I hope you enjoy the course!

The goal of this course is to give you the concepts and ideas you need to make components as simple and flexible as possible so you and your team will have an easier time building an amazing UI.

You will learn several patterns in this course (Compound components, render props, Higher Order Components, control props, state reducers, and the Provider pattern etc.) that are used broadly in the JavaScript (and specifically React) ecosystem. Some patterns are two ways of doing the same thing, but you can combine them to create as flexible APIs as your use cases require.

jest tutorial about Add Babel Integration with Jest

Add Babel Integration with Jest

1:42 jest PRO

Jest will default to utilize babel when your node_modules contains babel-jest. Depending on your environment this may already be the case! In this quick lesson, find out why that is and how to ensure that continues to work.

react tutorial about Start Building a React Native Application

Start Building a React Native Application

9:58 react

We'll download the requirements for getting started with React Native, refactor our app to ES6, walk through debugging, and talk about the philosophy behind React and React Native.

react tutorial about Redux: The Single Immutable State Tree

Redux: The Single Immutable State Tree

2:11 react

How is Redux different from Backbone or Flux? Learn the first principle of Redux—the single immutable state tree.

We are presenting a “complete” example in the code window below. Feel free to click around and explore! We will be explaining what everything does during this course.

react tutorial about Handle Side Effects with Redux Saga Generator Functions

Handle Side Effects with Redux Saga Generator Functions

3:17 react

In this lesson we’ll fetch the star wars api and display the response to our UI. Saga effects and generators allow us to synchronously run asynchronous tasks.

react tutorial about Redux: The Middleware Chain

Redux: The Middleware Chain

8:44 react

We will learn how we can generalize wrapping dispatch() for different purposes into a concept called “middleware” that is widely available in the Redux ecosystem.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?