React

Watch User Created Playlist (34)

This playlist is user created.

pro-course-rss-logo

PRO RSS Feed

Compose Redux Higher Order Reducers

P

Bootstrap a TypeScript + React Project

P

Theme your application with styled-components and "ThemeProvider"

Style the body element with styled-components and "injectGlobal"

Load React Storybook Stories Dynamically

P

React Animation with CSSTransitionGroup

P

Update State in React with Ramda's Evolve

P

React-Motion: TransitionSpring Basics

P

Public Class Fields with React Components

P

Recompose: ButtonGroup - When nesting affects Style

P

Cleanly Map Over A Stateless Functional Component with a Higher Order Component

P

Introduction to Server-Side React

P

Update Component State in React With Ramda Lenses

P

Create a Virtualized List with Auto Sizing Cells using react-virtualized and CellMeasurer

P

Inspect Component Events with React Storybook

P

Create stateful React Components using TypeScript

P

Write the First React Storybook Story

P

Using React with the FullCalendar jQuery plugin

P

Create component variations in React with styled-components and "extend"

Break up components into smaller pieces using Functional Components

P

Add React Storybook to a Project

P

React-Motion: Animate Multiple Elements with a Single Spring

P

React-Motion: Introduction to the Spring Component

P

Building an accordion component with React

P

Error Handling using Error Boundaries in React 16

React-Motion: Configuring a Spring Component

P

Recompose: Theme React Components Live with Context

P

Using the classnames library for conditional CSS in React

P

Increasing reusability with React container components

P

Recompose: Override Styles & Elements Types in React

P

Create stateless React components using TypeScript

P

Animate your user interface in React with styled-components and "keyframes"

Style a React component with styled-components

P

Understand Redux Higher Order Reducers

P
redux tutorial about Compose Redux Higher Order Reducers

Compose Redux Higher Order Reducers

4:34 redux PRO

In Understand Redux Higher Order Reducers, I've explained to you how higher order reducers can reduce the amount of reducer logic by reusing it. You can even use multiple higher order reducers, but how?

In this lesson I show you different techniques to compose higher order reducers.

react tutorial about Bootstrap a TypeScript + React Project

Bootstrap a TypeScript + React Project

5:54 react PRO

Setup a TypeScript + React project from scratch using webpack. Learn the reason behind every line that you need to type and become an expert.

react tutorial about Theme your application with styled-components and "ThemeProvider"

Theme your application with styled-components and "ThemeProvider"

1:17 react

In this styled-components lesson, we set a "primary color" within a UI "theme" object. We make this theme accessible to all components by wrapping our application inside a .

react tutorial about Style the body element with styled-components and "injectGlobal"

Style the body element with styled-components and "injectGlobal"

0:52 react

In this lesson, we see how we can apply styles globally with the "injectGlobal" helper method in styled-components. This method allows us to apply styles on the body element, which cannot be wrapped in a styled-component.

react tutorial about Load React Storybook Stories Dynamically

Load React Storybook Stories Dynamically

3:10 react PRO

React Component stories can be dynamically loaded into React Storybook instead of doing it manually every time.

react tutorial about React Animation with CSSTransitionGroup

React Animation with CSSTransitionGroup

3:07 react PRO

React.addons provides CSSTransitionGroup for easily implementing basic CSS animations and transitions.

react tutorial about Update State in React with Ramda's Evolve

Update State in React with Ramda's Evolve

4:29 react PRO

In this lesson we'll take a stateful React component and look at how we can refactor our setState calls to use an updater function and then leverage Ramda's evolve function to make our updater function a reusable utility that isn't tied to the React API.

react tutorial about React-Motion: TransitionSpring Basics

React-Motion: TransitionSpring Basics

2:59 react PRO

In this lesson we'll look at how to animate the adding and removing of components using React-Motion's TransitionSpring and how it differs from a standard Spring component.

react tutorial about Public Class Fields with React Components

Public Class Fields with React Components

4:52 react PRO

Public Class Fields allow you to add instance properties to the class definition with the assignment operator (=). In this lesson, we'll look at their use case for simplifying event callbacks and state initialization with a React component.

react tutorial about Recompose: ButtonGroup - When nesting affects Style

Recompose: ButtonGroup - When nesting affects Style

8:23 react PRO

In CSS we use the descendant selector to style elements based on their nesting. Thankfully in React we don't need to consider this most of the time because this nesting of elements happens within the bounds of a single component.

However occasionally the nesting of components affects the styles. In these rare cases we can use context to influence styles yielding a user friendly api to our components.

react tutorial about Cleanly Map Over A Stateless Functional Component with a Higher Order Component

Cleanly Map Over A Stateless Functional Component with a Higher Order Component

4:46 react PRO

In this lesson we'll create a Higher Order Component (HOC) that takes care of the key property that React looks for when using map to create elements from a list. This HOC will allow us to wrap any component and it will take care of placing the key prop on the component for us based on the property name that we specify.

react tutorial about Introduction to Server-Side React

Introduction to Server-Side React

3:22 react PRO

Rendering React components from the server allows you to pre-render the initial state of your components and speed up initial page loads by not requiring the browser to wait for any JavaScript to load before presenting the component.

react tutorial about Update Component State in React With Ramda Lenses

Update Component State in React With Ramda Lenses

4:37 react PRO

In this lesson, we'll refactor a React component to use Ramda lenses to update our component state. We'll create a lens to focus on the property we want to target and use over to apply the existing state value to a utility function and we'll get back a new state that will be reflected in our rendered UI.

react tutorial about Create a Virtualized List with Auto Sizing Cells using react-virtualized and CellMeasurer

Create a Virtualized List with Auto Sizing Cells using react-virtualized and CellMeasurer

3:01 react PRO

In this lesson we'll use CellMeasurer and CellMeasurerCache to automatically calculate and cache the height of a row. This will allow us to remove the predefined rowHeight on list and allow for dynamically sized rows.

react tutorial about Inspect Component Events with React Storybook

Inspect Component Events with React Storybook

1:45 react PRO

Components trigger actions via function props to notify of events that occur within the Component. We can inspect those events using React Storybook.

typescript tutorial about Create stateful React Components using TypeScript

Create stateful React Components using TypeScript

2:56 typescript PRO

You can create stateful React Components in TypeScript by extending from the React.Component class. This parent class takes two generic parameters, Props and State.

This lessons shows these generic parameters and React.Component in action

react tutorial about Write the First React Storybook Story

Write the First React Storybook Story

4:34 react PRO

Story is the smallest unit of React Storybook. A story describes a React Component, and its various states and variations. Stories can describe complex components with dynamic properties and data loaded from a service. In this lesson we will write our first React Storybook story.

react tutorial about Using React with the FullCalendar jQuery plugin

Using React with the FullCalendar jQuery plugin

2:55 react PRO

In this lesson, we use React and the FullCalendar.js JQuery plugin to demonstrate how you can use complex JQuery plugins to create dynamic React components.

react tutorial about Create component variations in React with styled-components and "extend"

Create component variations in React with styled-components and "extend"

1:09 react

In this lesson, we extend the styles of a base button component to create multiple variations of buttons, using "extend". We can then modify the base styles in one place, and have all button types updated.

react tutorial about Break up components into smaller pieces using Functional Components

Break up components into smaller pieces using Functional Components

2:21 react PRO

We are going to ensure our app is structured in a clear way using functional components. Then, we are going to pass those components state values from the parent class component.

react tutorial about Add React Storybook to a Project

Add React Storybook to a Project

3:35 react PRO

In this lesson, we show how to setup React Storybook into an existing React project. We’ll go through common configuration files and how to adjust them.

react tutorial about React-Motion: Animate Multiple Elements with a Single Spring

React-Motion: Animate Multiple Elements with a Single Spring

4:03 react PRO

In this lesson we'll configure a single react-motion Spring component to manage the animation of multiple elements.

react tutorial about React-Motion: Introduction to the Spring Component

React-Motion: Introduction to the Spring Component

2:03 react PRO

Spring is the simplest component available to us in React-Motion. It allows us to transition from a defaultValue to an endValue leaving what to do with that value as it transitions up to us. In this lesson we'll create a simple Spring and use it to update the style of our component.

react tutorial about Building an accordion component with React

Building an accordion component with React

8:11 react PRO

In this lesson, we build an accordion component (similar to Chrome's native <details> and <summary> elements) with React. We walk through setting up the component render function, props, state, propType validation, and adding conditional inline styling based on the state (if the accordion details are active or not). All done in ES6.

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 React-Motion: Configuring a Spring Component

React-Motion: Configuring a Spring Component

3:47 react PRO

In this lesson we'll configure our React-Motion Spring to animate multiple values simultaneously and also look at how those animations can be more finely controlled by setting our Spring's stiffness and damping values.

react tutorial about Recompose: Theme React Components Live with Context

Recompose: Theme React Components Live with Context

9:44 react PRO

SASS Bootstrap allows us to configure theme or branding variables that affect all components (e.g. Primary Color or Link Color). When we isolate our styles inside React components we lose the ability to theme them. To get round this we can put our theme variables on the context of our app and then read them from individual components in order to make styling decisions. Recompose allows us to create the helper functions we need to do this yielding concise, functional declarative UI components. These components will respond in real time to changes in the theme.

react tutorial about Using the classnames library for conditional CSS in React

Using the classnames library for conditional CSS in React

4:52 react PRO

Classnames is a simple yet versatile javascript utility that joins CSS class names based on a set of conditions. We are going to build a simple toggle switch that relies on state to determine what CSS classes will be applied.

react tutorial about Increasing reusability with React container components

Increasing reusability with React container components

4:32 react PRO

You can increase reuse in your codebase by dividing your components into containers and content, or as some people call them, smart and dumb components. This lesson walks through a very simple refactoring to demonstrate this concept and show you how to maximize the portability of your React components.

react tutorial about Recompose: Override Styles & Elements Types in React

Recompose: Override Styles & Elements Types in React

5:54 react PRO

When we move from CSS to defining styles inside components we lose the ability to override styles with an external style sheet. We also lose the ability add the same class to different types of elements to style them consistently. Recompose allows us to regain the ability of override styles and to apply the same styles to different types of elements.

react tutorial about Create stateless React components using TypeScript

Create stateless React components using TypeScript

1:13 react PRO

You can create a stateless React component in TypeScript by just creating a function.

But if you want to create high quality idiomatic React + TypeScript components you should use the React.StatelessComponent interface. This is demonstrated in the video.

react tutorial about Animate your user interface in React with styled-components and "keyframes"

Animate your user interface in React with styled-components and "keyframes"

1:15 react

In this lesson, we learn how to handle CSS keyframe animations in styled-components, via the 'keyframes' helper.

react tutorial about Style a React component with styled-components

Style a React component with styled-components

3:04 react PRO

In this lesson, we remove the mapping between a React component and the styles applied to it via classnames. We write our styles directly within the component, in a real CSS syntax, with the full power of JavaScript.

react tutorial about Understand Redux Higher Order Reducers

Understand Redux Higher Order Reducers

3:44 react PRO

Higher Order Reducers are simple reducer factories, that take a reducer as an argument and return a new reducer. In that new reducer, you can customize the behaviour of the original one which helps reducing the reducer logic.

In this lesson, we'll see how to reduce duplicated code by refactoring two different reducers into a higher order reducer.

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