[_done20160226] react

Watch User Created Playlist (78)

This playlist is user created.

pro-course-rss-logo

PRO RSS Feed

Writing Platform-Specific Components for iOS and Android in React Native

P

Installing and Linking Modules with Native Code in React Native

P

Inspect Component Events with React Storybook

P

Load React Storybook Stories Dynamically

P

Write the First React Storybook Story

P

Add React Storybook to a Project

P

Add Redux State Management to a React on Rails Project

P

Render Basic SVG Components in React

P

Break up components into smaller pieces using Functional Components

P

Create a Button Shake Animation in React Native

P

Creating a component with React on Rails

P

Create A Login Screen in React Native

P

Make a Button in React Native with TouchableHighlight

P

Get the Dimensions of a React Native Phone Screen

P

Installing Third-Party Libraries from npm with React Native

P

Create a Custom Map Marker with React Native Maps

P

Measure and Get the Position of a React Native Element

P

Create & Deploy a Universal React App using Zeit Next

P

Using the Chrome Debugger to Set Breakpoints in React Native

P

Use Flex to Scale React Native Background Image

P

Jest Snapshot Testing with React Storybook

P

Getting Started with React Storybook

P

Recompose: ButtonGroup - When nesting affects Style

P

Recompose: Theme React Components Live with Context

P

Recompose: Override Styles & Elements Types in React

P

Styling React Components With Aphrodite

P

Set up React apps with zero configuration in two minutes

P

Setup Nuclide to use Flow and Eslint (Mac)

P

Creating a Stateless Functional Component in React

P

Using the classnames library for conditional CSS in React

P

Applying Basic Styles in React Native

P

Redux Peer to Peer: TodoMVC over WebRTC using Swarmlog

P

Creating a D3 Force Layout in React

P

Radium: Updating Button Styles via Props

P

Core Concepts of React: Components, Props, and State

P

Styling a React button component with Radium

P

Getting started with the react-rails gem

P

Using React with the FullCalendar jQuery plugin

P

Extracting Private React Components

P

Building stateless function components (new in React 0.14)

P

Debugging components with the React Developer Tools extension

P

Building an accordion component with React

P

Increasing reusability with React container components

P

Intro to inline styles in React components

P

Set up a killer React dev environment quickly with hjs-webpack

P

Linting React JSX with ESLint (in ES6)

P

React Native: Create a Swipe Panel

P

React Native: PanResponder Basics

P

React Native: LayoutAnimation Basics

P

React Native: TabBarIOS Customization

P

React Native: Debugging on an iOS Device

P

React Native: TabBarIOS Basics

P

Reloading React component tests using webpack-dev-server

P

DOM Event Listeners in a React Component

P

Isomorphic Routing in React with react-engine

P

Isomorphic React with react-engine

P

Use JSX as an Express templating engine with react-engine

P

Unit testing a React component using Jasmine and Webpack

P

React Mixins with ES6 Components

P

React components in ES6 classes

P

Introduction to Isomorphic React

P

React CSS in JavaScript with Radium

P

Introduction to Server-Side React

P

Using React Contexts for Nested Components

P

Static Methods in React

P

Setting up a React Playground Dev Environment

P

Use React the cloneWithProps method to interact with child components

P

React Animation with CSSTransitionGroup

P

React and Firebase with ReactFire

P

Applying conditional styles in React with classSet add-on

P

Using TweenMax with React

P

What's new and different in React v0.12.0

P

React in 7 Minutes

Using React's dangerouslySetInnerHTML

P

Simulate React Events with TestUtils

P

React Fundamentals: Integrating Components with D3 and AngularJS

P

React with-addons - ReactLink

P

React Mixins

P
react-native tutorial about Writing Platform-Specific Components for iOS and Android in React Native

Writing Platform-Specific Components for iOS and Android in React Native

5:28 react-native PRO

Learn to write components that render differently on iOS and Android, but present the same API. First, we'll use the Platform module to change behavior based on the platform. Then, we'll use the platform-specific file extensions, .ios.js and .android.js, to render platform-specific components.

react-native tutorial about Installing and Linking Modules with Native Code in React Native

Installing and Linking Modules with Native Code in React Native

4:57 react-native PRO

Learn to install JavaScript modules that include native code. Some React Native modules include native code for Android and/or iOS in addition to JavaScript. We'll install the react-native-video component using npm install, and then link it with the react-native link command so that our Video component works properly on both iOS and Android.

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 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 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 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 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 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 Create a Button Shake Animation in React Native

Create a Button Shake Animation in React Native

2:38 react PRO

In this lesson we'll use Animated.timing and TouchableWithoutFeedback to create an animatable button. We'll learn how to use interpolate to create a non-linear animation. When our button is pressed it will shake from side to side.

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 Create A Login Screen in React Native

Create A Login Screen in React Native

6:21 react PRO

In this lesson we'll build a generic login screen. We'll explore how to use a background image, how to center content with spacer views, and how to use other flex properties.

react tutorial about Make a Button in React Native with TouchableHighlight

Make a Button in React Native with TouchableHighlight

6:43 react PRO

Learn how to make a button in React Native by using the TouchableHighlight component. We'll create and style a component that responds to user interactions and invokes a callback when you touch it.

react tutorial about Get the Dimensions of a React Native Phone Screen

Get the Dimensions of a React Native Phone Screen

1:10 react PRO

In this lesson we'll use Dimensions to get the width and height of the screen. Also we'll use onLayout to detect orientation changes.

react tutorial about Installing Third-Party Libraries from npm with React Native

Installing Third-Party Libraries from npm with React Native

3:05 react PRO

Learn how to install JavaScript modules from npm for use in your React Native project. We'll install and import the lodash library, then demonstrate how to use it from our React component. We'll also see what happens when you try to use a third-party library, such as jQuery, that attempts to access the browser window and is therefore not compatible with React Native.

react tutorial about Create a Custom Map Marker with React Native Maps

Create a Custom Map Marker with React Native Maps

2:52 react PRO

In this lesson we'll create a MapView with react-native-maps. We'll use the onPress function to add Markers to the map and then we'll use the custom map marker feature to style them.

react tutorial about Measure and Get the Position of a React Native Element

Measure and Get the Position of a React Native Element

2:14 react PRO

In this lesson we'll explore how to measure the dimensions and get the position of a React Native element using onLayout and UIManager.measure. Additionally we'll see how to use the helper function measure on the component ref for easier measurement.

react tutorial about Create & Deploy a Universal React App using Zeit Next

Create & Deploy a Universal React App using Zeit Next

6:11 react PRO

In this lesson, we'll use next to create a universal React application with no configuration. We'll create page components that will render on the server if accessed directly, but function as you would expect in the client. We'll use the routing capabilities included with next to create links between the components using pushState and we'll incorporate our own React component. Finally, we'll deploy the application to now with a simple command in the terminal.

react tutorial about Using the Chrome Debugger to Set Breakpoints in React Native

Using the Chrome Debugger to Set Breakpoints in React Native

2:48 react PRO

You can use the JavaScript debugger to set breakpoints in React Native. We'll look at how to use the Chrome developer tools with React Native, and how to work with the debugger and console.log statements.

react tutorial about Use Flex to Scale React Native Background Image

Use Flex to Scale React Native Background Image

1:44 react PRO

In this lesson we will use Flexbox to scale a background image to fit on the screen of our React Native application.

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 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 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 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 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 Styling React Components With Aphrodite

Styling React Components With Aphrodite

2:29 react PRO

Aphrodite is a library styling React components.

You get all the benefits of inline styles (encapsulation, no build step, no CSS cascade, building up styling with JavaScript instead of a preprocessor language) with all the benefits of CSS (animations and transitions, pseudo-classes, media queries).

Learn how to use Aphrodite to style reusable React components.

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 Setup Nuclide to use Flow and Eslint (Mac)

Setup Nuclide to use Flow and Eslint (Mac)

7:18 react PRO

Nuclide is the IDE Facebook employees use to write React code. But setting it up to use Flow type checking and Eslint to lint files on the fly is tricky. This video shows you how.

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 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 Applying Basic Styles in React Native

Applying Basic Styles in React Native

5:07 react PRO

React Native utilizes flexbox for layout, and you can apply styles inline, or via external stylesheets. We will learn about both approaches, and create some basic styles for a native application.

For getting your application setup, you might want to checkout this lesson

react tutorial about Redux Peer to Peer: TodoMVC over WebRTC using Swarmlog

Redux Peer to Peer: TodoMVC over WebRTC using Swarmlog

5:30 react PRO

redux-swarmlog is a helper library enabling Redux applications to sync peer to peer over WebRTC. It takes just five minutes to make the standard Redux TodoMVC network enabled.

react tutorial about Creating a D3 Force Layout in React

Creating a D3 Force Layout in React

9:57 react PRO

Learn how to leverage d3's layout module to create a Force Layout inside of React. We'll take a look at React's lifecycle methods, using them to bootstrap d3's force layout in order to render our visualization.

react tutorial about Radium: Updating Button Styles via Props

Radium: Updating Button Styles via Props

0:47 react PRO

In a CSS library like Bootstrap we can set a button's style to be "primary" or "secondary" by appending classes. For React components we want to be able to do this via props. Radium enables this by composing styles via an array. This mimicks the cascade of CSS.

react tutorial about Core Concepts of React: Components, Props, and State

Core Concepts of React: Components, Props, and State

6:54 react PRO

In this lesson we'll dig into the absolute fundamentals of React by exploring the concepts of components, properties, and state and how they work together to build React applications.

react tutorial about Styling a React button component with Radium

Styling a React button component with Radium

1:29 react PRO

React's inline styles allow components to stand on their own by not requiring any external CSS. However HTML's style attributes don't support pseudo selectors like :hover and :active. By using Radium to listen to mouse events we can restore :hover and :active selectors to inline styles.

react tutorial about Getting started with the react-rails gem

Getting started with the react-rails gem

3:00 react PRO

React and Ruby on Rails play very nicely together if you are using the react-rails gem. Using react-rails, you can easily drop in React components throughout your Rails application. In this lesson, we will get react-rails installed and create our first React component.

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 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 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 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 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 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 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 Set up a killer React dev environment quickly with hjs-webpack

Set up a killer React dev environment quickly with hjs-webpack

6:17 react PRO

You can easily spend hours configuring the perfect dev environment with all the latest hotness like ES6 (and beyond) support, hot reloading, and a myriad of other features. This lesson shows how to use hjs-webpack to get the same thing in a matter of minutes.

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 React Native: Create a Swipe Panel

React Native: Create a Swipe Panel

7:03 react PRO

In this lesson we'll use PanResponder and LayoutAnimation to create a smoothly animated Swipe Panel commonly implemented in iOS and Android applications.

react tutorial about React Native: PanResponder Basics

React Native: PanResponder Basics

5:38 react PRO

In this lesson we'll look at the PanResponder API in React Native and create a draggable view. PanResponder is a high level wrapper around Gesture Responder System providing us with new and simpler object called gestureState to track the state of pan gestures.

react tutorial about React Native: LayoutAnimation Basics

React Native: LayoutAnimation Basics

4:57 react PRO

React Native's LayoutAnimation provides a simple method for animating styles as they are applied to our views.

react tutorial about React Native: TabBarIOS Customization

React Native: TabBarIOS Customization

3:22 react PRO

In this lesson we'll look at some simple ways to customize TabBarIOS, creating a scrollable tab area, and implementing custom icons in TabBarIOS.Item.

react tutorial about React Native: Debugging on an iOS Device

React Native: Debugging on an iOS Device

4:15 react PRO

In this lesson we'll explore debugging our React Native application in an actual iOS device.

react tutorial about React Native: TabBarIOS Basics

React Native: TabBarIOS Basics

4:22 react PRO

In this lesson we'll create a tabbed interface using the React Native TabBarIOS & TabBarIOS.Item components

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 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 Isomorphic Routing in React with react-engine

Isomorphic Routing in React with react-engine

7:30 react PRO

In React, Using react-router (which installs alongside react-engine), we can create isomorphic routing for our application.

react tutorial about Isomorphic React with react-engine

Isomorphic React with react-engine

4:31 react PRO

Outside of providing an express template engine for JSX, react-engine allows us to utilize the same templates for client side interaction.

react tutorial about Use JSX as an Express templating engine with react-engine

Use JSX as an Express templating engine with react-engine

5:25 react PRO

react-engine from Paypal eliminates the need for third-party template engines and allows us to use JSX directly to generate server side views in Express.

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 React Mixins with ES6 Components

React Mixins with ES6 Components

3:36 react PRO

Sometimes called higher order functions or wrapper components, the React mixin functionality can be recreated easily with a simple function in ES6.

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

react tutorial about React CSS in JavaScript with Radium

React CSS in JavaScript with Radium

3:33 react PRO

Radium is a set of mixins for managing styles in React components, allowing you to use CSS features that aren’t possible with inline styles.

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 Using React Contexts for Nested Components

Using React Contexts for Nested Components

2:02 react PRO

Contexts are currently undocumented in React v0.12.2, so use at your own risk. However they provide a particularly nice solution to passing data down through nested components.

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 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 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 React and Firebase with ReactFire

React and Firebase with ReactFire

6:32 react PRO

React becomes incredibly powerful when coupled with a real-time backend like Firebase. See how easy it is to bring the two together and chat with Star Wars characters while you're at it.

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 Using TweenMax with React

Using TweenMax with React

3:15 react PRO

React's use of the VirtualDOM can make it confusing on how to get actual elements to use in animation libraries like TweenMax. This video shows how to use this.getDOMNode() and this.refs and hook them in to TweenMax to satisfy all of your advanced animation needs.

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 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 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 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 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 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 React Mixins

React Mixins

3:24 react PRO

Mixins will allow you to apply behaviors to multiple React components.

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