React & Redux

Watch User Created Playlist (38)

This playlist is user created.

pro-course-rss-logo

PRO RSS Feed

React in 7 Minutes

Setting up a React Playground Dev Environment

P

Use React the cloneWithProps method to interact with child components

P

Simulate React Events with TestUtils

P

What's new and different in React v0.12.0

P

React with-addons - ReactLink

P

Using React's dangerouslySetInnerHTML

P

Intro to inline styles in React components

P

Applying conditional styles in React with classSet add-on

P

React Animation with CSSTransitionGroup

P

Render Basic SVG Components in React

P

Build an SVG icon component in React

P

React Fundamentals: Integrating Components with D3 and AngularJS

P

Getting Started with React Storybook

P

Add React Storybook to a Project

P

Write the First React Storybook Story

P

Inspect Component Events with React Storybook

P

Load React Storybook Stories Dynamically

P

Add Redux State Management to a React on Rails Project

P

Break up components into smaller pieces using Functional Components

P

Creating a component with React on Rails

P

Jest Snapshot Testing with React Storybook

P

Set up React apps with zero configuration in two minutes

P

Creating a Stateless Functional Component in React

P

Using React with the FullCalendar jQuery plugin

P

Building an accordion component with React

P

Building stateless function components (new in React 0.14)

P

Static Methods in React

P

Extracting Private React Components

P

Increasing reusability with React container components

P

Debugging components with the React Developer Tools extension

P

Linting React JSX with ESLint (in ES6)

P

Unit testing a React component using Jasmine and Webpack

P

DOM Event Listeners in a React Component

P

React components in ES6 classes

P

Introduction to Server-Side React

P

Reloading React component tests using webpack-dev-server

P

Introduction to Isomorphic React

P
react tutorial about React in 7 Minutes

React in 7 Minutes

7:43 react

Want a whirlwind tour of facebook's React framework? John starts from scratch and builds an app in React in under 7 minutes. You'll learn about building custom components, using React this.state vs. this.props, and React hooking up events.

react tutorial about Setting up a React Playground Dev Environment

Setting up a React Playground Dev Environment

6:07 react PRO

When exploring a new framework or technology, it is nice to have a seed project or sandbox so you can just get in and start playing. Let's build our React playground using npm, browserify, 6to5, and more within WebStorm!

react tutorial about Use React the cloneWithProps method to interact with child components

Use React the cloneWithProps method to interact with child components

3:02 react PRO

this.props.children allows child components to pass through, but in order to interact with or add new functionality to them React.addons provides cloneWithProps.

react tutorial about Simulate React Events with TestUtils

Simulate React Events with TestUtils

4:07 react PRO

You can use React's TestUtils addon to simulate events for your components.

react tutorial about What's new and different in React v0.12.0

What's new and different in React v0.12.0

3:42 react PRO

React has changed a bit in version 0.12.0. Let's take a look at what is different. You may need to update some code!

react tutorial about React with-addons - ReactLink

React with-addons - ReactLink

2:58 react PRO

It can be tedious to type out all the boilerplate needed to get the DOM and states in React to synchronize. Luckily, React provides a version of the toolkit with a selection of available addons. This lesson is going to dig into ReactLink, and how this addon can give you two-way binding.

react tutorial about Using React's dangerouslySetInnerHTML

Using React's dangerouslySetInnerHTML

2:23 react PRO

Sure, it's a bad idea to store raw HTML in a database and feed that into dynamic views in your web application, but if you absolutely insist on doing it, React provides dangerouslySetInnerHTML to get the job done.

react tutorial about Intro to inline styles in React components

Intro to inline styles in React components

5:32 react PRO

React lets you use "inline styles" to style your components; inline styles in React are just JavaScript objects that you can render in an element's style attribute. The properties of these style objects are just like the CSS property, but they are camel case (borderRadius) instead of kebab-case (border-radius). React inline styles allow you to use all the JavaScript you know and love like variables, loops, ES6 modules etc. with your styles. React then renders these properties as inline styles in the output HTML, which means that styles are scoped to the component itself - no more cascading issues or trying to figure out how to re-use a component...everything that belongs to a component is self contained with the component!

react tutorial about Applying conditional styles in React with classSet add-on

Applying conditional styles in React with classSet add-on

2:17 react PRO

Applying conditional classes can be a real chore in any framework. Luckily for us, React makes it easy with the classSet add-on.

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 Render Basic SVG Components in React

Render Basic SVG Components in React

1:35 react PRO

React loves svg just as much as it loves html. In this lesson we cover how simple it is to make SVG components in ReactJS.

Creating SVG components with React allows you to inline SVG. Inline SVG has an advantage that it can be styled with CSS just like the rest of your webpage and doesn't need a separate web request to load.

An additional advantage is of-course that you can use component props to customize the contents of the SVG.

react tutorial about  Build an SVG icon component in React

Build an SVG icon component in React

3:51 react PRO

Learn one way to render SVG icons as a React component. You’ll learn about the dynamic nature of SVG by passing props to a component that modify the icons properties such as colors and size.

You'll learn how to set up a stateless functional component, set up prop types and add a set of default props.

One benefit to building an individual icon component is that only the SVG markup needed for that icon will be rendered, instead of having to load an entire set of icons and only using one of them. Also, different attributes can be overridden using props, making theming and integration simple.

react tutorial about React Fundamentals: Integrating Components with D3 and AngularJS

React Fundamentals: Integrating Components with D3 and AngularJS

9:31 react PRO

Since React is only interested in the V (view) of MVC, it plays well with other toolkits and frameworks. This includes AngularJS and D3.

react tutorial about Getting Started with React Storybook

Getting Started with React Storybook

3:41 react PRO

React Storybook is a UI component development environment for React.
With that, you can develop UI components without running your app.

Here I show how to get started with React Storybook.
For more information, have a look at our documentation.

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 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 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.

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 Add Redux State Management to a React on Rails Project

Add Redux State Management to a React on Rails Project

7:27 react PRO

Learn how to add a simple Redux-backed React component to a new Rails 5 app using React on Rails.

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 Creating a component with React on Rails

Creating a component with React on Rails

6:33 react PRO

Learn how to add a simple React component to a brand new Rails app with React on Rails installed. You will see how to add your React component to a Rails view, including the passing of values from the controller to your React component.

react tutorial about Jest Snapshot Testing with React Storybook

Jest Snapshot Testing with React Storybook

2:26 react PRO

React Storybook allows for easy snapshot testing integration with Facebook's Jest testing framework. Snapshot testing allows you to capture the state of your UI and then notify you when that UI has been altered. We can easily create and update snapshots with Storybook!

react tutorial about Set up React apps with zero configuration in two minutes

Set up React apps with zero configuration in two minutes

2:02 react PRO

The React team has an official Command Line Interface (CLI) for building React projects called "Create React App"; in this lesson, we show how to use this tool to quickly set up new projects using the create-react-app {project-name} command. We then use the npm scripts that are provided: npm start to develop, npm run build to ship, and npm run eject to opt out of the abstracted tooling.

The benefits of this tool are:
- It's officially maintained by the React team; this means best practices out of the box
- Zero config, one dependency
- Config is abstracted so React team can make improvements under the hood and you get the new goodness for free
- Clean command line output for errors
- You can "eject" at any time if needed

react tutorial about Creating a Stateless Functional Component in React

Creating a Stateless Functional Component in React

3:11 react PRO

Most of the components that you write will be stateless, meaning that they take in props and return what you want to be displayed. In React 0.14, a simpler syntax for writing these kinds of components was introduced, and we began calling these components "stateless functional components". In this lesson, let's take a look at how to define a stateless function component, and how to integrate useful React features like Prop Type validation while using this new component syntax.

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 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 Building stateless function components (new in React 0.14)

Building stateless function components (new in React 0.14)

4:14 react PRO

In React 0.14+, you can write stateless components as pure functions called "stateless function[al] components"; in well designed apps, these "pure" components should be the majority of your application and can be tied together by a few "smart" wrapper components that control your state and pass down needed data to the pure components. In this lesson, we walk through the syntax of stateless function components, converting to them from stateless classes, and best practices in using them with stateful (aka "smart") components.

This lesson assumes use of ES6 and JSX.

react tutorial about Static Methods in React

Static Methods in React

2:11 react PRO

The statics object of our React view components is meant to contain values or functions that can be accessed at any time without needing an instance of that component created.

react tutorial about Extracting Private React Components

Extracting Private React Components

1:52 react PRO

In this lesson we leverage private components to break our render function into more manageable pieces without leaking the implementation details of our component.

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 Debugging components with the React Developer Tools extension

Debugging components with the React Developer Tools extension

3:39 react PRO

The React Developer Tools are an extension that can be added to Chrome and Firefox to help with debugging React applications. In this lesson, we walk through how to use these developer tools to view, edit, and debug your React components, including: the React browser tab, inspecting components in parallel with the Elements tab, using React components in the console, searching by component name, and debugging component state and props.

react tutorial about Linting React JSX with ESLint (in ES6)

Linting React JSX with ESLint (in ES6)

4:55 react PRO

ESLint is a JavaScript linter (static analysis tool) that offers full support for ES6, JSX, and other modern tools via plugins. We walk through setting up ESLint in a project, using the eslint --init CLI tool with the JSX and ES6 options, writing a React component in JSX, and adding some extra react linting rules with a plugin. ESLint is built to be "pluggable" with simple, extendable, modular rules and an API for writing and using plugins. ESLint has many rules which are all turned off by default; you can extend the core "recommended" rules which will catch common JavaScript errors, and you can also turn on stylistic rules for code consistency. You can also use plugin rules which we do in this lesson with the eslint-plugin-react package.

react tutorial about Unit testing a React component using Jasmine and Webpack

Unit testing a React component using Jasmine and Webpack

4:04 react PRO

An introduction on unit testing a ReactJS component using Webpack and Jasmine. Learn how to use Webpack to package and import dependencies plus take advantage of the babel-loader to write a simple Jasmine spec using the latest ES6 syntax.

react tutorial about DOM Event Listeners in a React Component

DOM Event Listeners in a React Component

3:43 react PRO

This lesson shows how to attach DOM events not provided by the React synthetic event system to a React component.

react tutorial about React components in ES6 classes

React components in ES6 classes

3:29 react PRO

Starting with React 0.13.0 you can write components using ES6 classes. In this lesson we'll walk through some of the syntax differences.

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 Reloading React component tests using webpack-dev-server

Reloading React component tests using webpack-dev-server

2:16 react PRO

Unit testing a React component using Webpack and Jasmine, can involve slow and repetitive tasks when confirming that tests are passing when your code changes. For example, manually running commands instructing webpack to compile code plus refreshing the browser. This lesson demonstrates how to speed up your development time by automating these tasks using webpack-dev-server.

react tutorial about Introduction to Isomorphic React

Introduction to Isomorphic React

5:47 react PRO

React enables us to write isomorphic applications that pre-render on the server and then respond to user interaction on the client side.

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