React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

**Note:** This is recorded with an older version of React and many things have changed. The core concepts are still accurate, but there are some technical differences you’ll need to work through. 

**This course is an excellent overview of "legacy" React class component development.**

React is a "javascript library for building user interfaces" from the fine folks at Facebook & Instagram. It strictly focuses on the "V" in your MVC applications, and touts a blazing fast virtual DOM diff implementation.

This series will explore the basic fundamentals of React to get you started.

When you've finished with this series, be sure to check out [React: Flux Architecture (ES6)](https://egghead.io/courses/react-flux-architecture-es6) for real-world React application development.


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.

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

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.

Write a "Hello World" React Component

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.

Display Output in React with a Component's render Method

This lesson will teach you the basics of setting properties (props) in your React components. As stated in [Thinking in React](https://facebook.github.io/react/docs/thinking-in-react.html), props are how we pass data around in React. We will take a look at what `propTypes` and `defaultProps` do for us in React.


Set Properties on React Components

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.

Manage React Component State with setState

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.

Use React Components as Children for Other Components

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.

Access Nested Data with Reacts props.children

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

Add Custom propType Validation to React Components

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.

Normalize Events with Reacts Synthetic Event System

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

Use React ref to Get a Reference to Specific Components

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.

Understand the React Component Lifecycle Methods

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.

Manage React Component State with Lifecycle Methods

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.



Control React Component Updates When New Props Are Received

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.

Use map to Create React Components from Arrays of Data

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.

Compose React Component Behavior with Higher Order Components

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.

Build a JSX Live Compiler as a React Component

"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](https://egghead.io/lessons/build-a-jsx-live-compiler).

Understand JSX at a Deeper Level

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.

Understand React.Children Utilities

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

Use React.cloneElement to Extend Functionality of Children Components

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

Write More Reusable React Components with Composable APIs

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

React Class Component Fundamentals (Legacy)

Joe Maddalone

Free Community Resource

Free Community Resource

Course Content