Danlistan

Watch User Created Playlist (35)

This playlist is user created.

pro-course-rss-logo

PRO RSS Feed

Intro to ES6 and traceur compiler

The let keyword in ES6

Arrow Function => in ES6

Using the ES6 spread operator

Destructuring Assignment in ES6

Use Template Literals in ES6

ES6 (ES2015) - Generators

Shorthand Properties in ES6

Object Enhancements in ES6

Default Values for Function Parameters in ES6

Webpack Loaders, Source Maps, and ES6

P

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

Write a "Hello World" React Component

Display Output in React with a Component's render Method

Set Properties on React Components

Manage React Component State with setState

Use React Components as Children for Other Components

Access Nested Data with Reacts props.children

Add Custom propType Validation to React Components

Normalize Events with Reacts Synthetic Event System

Use React ref to Get a Reference to Specific Components

Understand the React Component Lifecycle Methods

Manage React Component State with Lifecycle Methods

Control React Component Updates When New Props Are Received

Use map to Create React Components from Arrays of Data

Compose React Component Behavior with Higher Order Components

Build a JSX Live Compiler as a React Component

Understand JSX at a Deeper Level

Understand React.Children Utilities

Use React.cloneElement to Extend Functionality of Children Components

Debug React Components with Developer Tools in Chrome

Install packages in a Node.js application using npm

Using npm run to launch local scripts

P

npm install

P

npm init

P
js tutorial about Intro to ES6 and traceur compiler

Intro to ES6 and traceur compiler

2:42 js

es6 is the next generation of javascript. You can use it today with the traceur compiler library. Also be sure to check out es6fiddle to start playing with ECMAscript 6 right now.

js tutorial about The let keyword in ES6

The let keyword in ES6

2:58 js

Block scoping can be surprising, and sometimes confusing, in Javascript. With es6, we have access to the let keyword to remove this pain.

js tutorial about Arrow Function => in ES6

Arrow Function => in ES6

2:57 js

ECMAscript 6 introduces the "arrow function" as a shortcut for creating anonymous functions with this scope bound.

js tutorial about Using the ES6 spread operator

Using the ES6 spread operator

1:40 js

The spread operator allows you to "explode" an array into its individual elements.

js tutorial about Destructuring Assignment in ES6

Destructuring Assignment in ES6

4:33 js

ECMAscript 6 destructuring provides flexible options for variable assignment.

js tutorial about Use Template Literals in ES6

Use Template Literals in ES6

4:12 js

ECMAscript 6 lets us use string templates to gain a lot more control over strings in JavaScript.

js tutorial about ES6 (ES2015) - Generators

ES6 (ES2015) - Generators

5:28 js

Generators in ECMAscript 6 are first-class coroutines that produce encapsulated suspended execution contexts. Whew! Yield values and iterate over them until no more values exist in the generator. We'll talk more about practical use later ;)

js tutorial about Shorthand Properties in ES6

Shorthand Properties in ES6

1:01 js

Shorthand properties allow you to compose complex objects from other objects.

js tutorial about Object Enhancements in ES6

Object Enhancements in ES6

2:12 js

Building on the ES6 Shorthand Properties lesson, John shows the other new Object Enhancements in ES6 that will help you write less code and easily create complex Objects.

js tutorial about Default Values for Function Parameters in ES6

Default Values for Function Parameters in ES6

2:16 js

With ECMAscript 6 we get the luxury of default parameters for our functions.

js tutorial about Webpack Loaders, Source Maps, and ES6

Webpack Loaders, Source Maps, and ES6

5:03 js PRO

Webpack loaders are how you tell webpack to resolve your dependencies and you can use a loader built for the babel transpiler to easily enable ES6 code in your project. Full sourcemap support is also available using webpack's devtool property.

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.

Write a "Hello World" React Component

2:45 react

This lessons goes over what it takes to get React to output simple text to the browser such as Hello Eggheads. This lesson will also introduce stateless functional components. React uses JSX which is a "JavaScript syntax extension that looks similar to XML." While this is not required to use with React, it is highly recommended.

Display Output in React with a Component's render Method

1:20 react

The render method is where the magic happens in your React components to display output to the screen. This lesson explains how to structure your JSX in a React component.

Set Properties on React Components

2:29 react

This lesson will teach you the basics of setting properties (props) in your React components. As stated in Thinking in React, props are how we pass data around in React. We will take a look at what propTypes and defaultProps do for us in React.

Manage React Component State with setState

2:28 react

State is used for properties on a component that will change, versus static properties that are passed in. This lesson introduces you to updating state through a simple text input and displaying that in the browser.

Use React Components as Children for Other Components

1:33 react

The owner-ownee relationship is used to designate a parent-child relationship with React components as it differs from the DOM relationship. This lesson demonstrates how composable React can be when using stateless functions to display data.

Access Nested Data with Reacts props.children

1:33 react

When you're building your React components, you'll probably want to access child properties of the markup. this.props.children accesses the innerHTML or nested components of another component.

react tutorial about Add Custom propType Validation to React Components

Add Custom propType Validation to React Components

2:12 react

In addition to the types built into React.propTypes we can also define our own custom propType validator

react tutorial about Normalize Events with Reacts Synthetic Event System

Normalize Events with Reacts Synthetic Event System

2:45 react

Event handlers are passed an instance of SyntheticEvent in React. In this video we'll take a look at the wide range of events available to us, including Touch events.

Use React ref to Get a Reference to Specific Components

4:49 react

When you are using React components you need to be able to access specific references to individual component instances. This is done by defining a ref. This lesson will introduce us to some of the nuances when using ref.

Understand the React Component Lifecycle Methods

4:19 react

React components have a lifecycle, and you are able to access specific phases of that lifecycle. This lesson gives an overview of the entire component lifecycle and demonstrates mounting and unmounting of your React components.

Manage React Component State with Lifecycle Methods

1:58 react

The previous lesson introduced the React component lifecycle mounting and unmounting. In this lesson you will learn some simple uses for these hooks and how we can interact with state.

Control React Component Updates When New Props Are Received

3:30 react

The React component lifecycle will allow you to update your components at runtime. This lesson will explore how to do that. componentWillReceiveProps gives us an opportunity to update state by reacting to a prop transition before the render() call is made. shouldComponentUpdate allows us to set conditions on when we should update a component so that we are not rendering constantly. componentDidUpdate lets us react to a component updating.

react tutorial about Use map to Create React Components from Arrays of Data

Use map to Create React Components from Arrays of Data

4:18 react

React components can be dynamically generated based on a dataset. This lesson will show you how to do just that by mapping over the state.data object.

react tutorial about Compose React Component Behavior with Higher Order Components

Compose React Component Behavior with Higher Order Components

4:05 react

Higher order components will allow you to apply behaviors to multiple React components. This can be done by passing the state and any functions into components as props.

react tutorial about Build a JSX Live Compiler as a React Component

Build a JSX Live Compiler as a React Component

5:09 react

As a tool for future lessons, we want to have the ability to write JSX and see the output live in the browser. In this lesson we will use React to build our own live JSX compiler.

react tutorial about Understand JSX at a Deeper Level

Understand JSX at a Deeper Level

4:28 react

"JSX transforms from an XML-like syntax into native JavaScript. XML elements and attributes are transformed into function calls and objects, respectively."

Dive deep into JSX, what it is, and what it becomes. Be sure to check out Build a JSX Live Compiler.

react tutorial about Understand React.Children Utilities

Understand React.Children Utilities

2:40 react

The data contained in this.props.children is not always what you might expect. React provides React.children to allow for a more consistent development experience.

react tutorial about Use React.cloneElement to Extend Functionality of Children Components

Use React.cloneElement to Extend Functionality of Children Components

2:14 react

We can utilize React.cloneElement in order to create new components with extended data or functionality.

react tutorial about Debug React Components with Developer Tools in Chrome

Debug React Components with Developer Tools in Chrome

4:14 react

React Development Tools is a Chrome plugin that provides handy ways to inspect and debug your React components.

node tutorial about Install packages in a Node.js application using npm

Install packages in a Node.js application using npm

8:14 node

In this lesson, you will learn how to find packages to add functionality to your application. You will also learn some valuable tips on how to choose a stable, supported package. We also demonstrate how to install packages using npm and the two simple rules to understand when you should install globally with the -g flag or install the package locally. The dependency section of package.json is used to show how to manage dependencies for both production and development packages. Finally, the caret (^), tilde(~), and star (*) wildcards are explained to control which versions your package is compatible with as well as installing package dependencies from git repos.

node tutorial about Using npm run to launch local scripts

Using npm run to launch local scripts

2:11 node PRO

npm run allows you to configure scripts inside of your package.json file which can access locally installed node packages. If you're comfortable with this technique, you can also grunt, gulp, or other build tools by customizing your scripts and saving them inside of your package.json file. With this approach, when a developer starts a new project with your package.json, they can simply run npm install then npm run yourscript without having to install any node packages globally.

node tutorial about npm install

npm install

2:26 node PRO

npm install provides a convenient way to manage your node.js dependencies.

node tutorial about npm init

npm init

1:29 node PRO

npm init provides an interactive step-by-step interface for creating a package.json

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