Intro to React

Videos helpful for starting a project with React (beginner tutorials for Redux + Webpack too!)

Watch User Created Playlist (19)

This playlist is user created.

pro-course-rss-logo

PRO RSS Feed

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

Use React ref to Get a Reference to Specific Components

Access Nested Data with Reacts props.children

Manage React Component State with Lifecycle Methods

Understand the React Component Lifecycle Methods

Control React Component Updates When New Props Are Received

Compose React Component Behavior with Higher Order Components

Write More Reusable React Components with Composable APIs

Use map to Create React Components from Arrays of Data

Understand JSX at a Deeper Level

Introduction to Server-Side React

P

Intro to inline styles in React components

P

Reloading React component tests using webpack-dev-server

P

DOM Event Listeners in a React Component

P
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 Write a "Hello World" React Component

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.

react tutorial about Display Output in React with a Component's render Method

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.

react tutorial about Set Properties on React Components

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.

react tutorial about Manage React Component State with setState

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.

react tutorial about Use React Components as Children for Other Components

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.

react tutorial about Use React ref to Get a Reference to Specific Components

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.

react tutorial about Access Nested Data with Reacts props.children

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 Manage React Component State with Lifecycle Methods

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.

react tutorial about Understand the React Component Lifecycle Methods

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.

react tutorial about Control React Component Updates When New Props Are Received

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 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 Write More Reusable React Components with Composable APIs

Write More Reusable React Components with Composable APIs

4:41 react

To make more composable React components, you can define common APIs for similar component types.

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

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