showing All 374 lessons...
In Flux our Components are referred to as Views, but they are the same familiar Components associated with any React development. In Flux, however, we have the benefit of the architecture to keep us from having to pass down through a long chain of children Components any functionality that may be embedded in our Stores. In this Lesson we will wire up all of our Components in record time utilizing the architecture we've already established.
Stores are where the real work in our application is done. Dispatchers broadcast Actions to all Stores, and the Stores registered to listen for those Actions will perform any logic needed to update our Views. In this lesson we will establish our first Store and register the Actions we wish to respond to.
Flux has four major components: Stores, Dispatchers, Views, and Actions. These components interact less like a typical MVC and more like an Event Bus. In this lesson we will start by creating our Dispatcher which queues up our Actions as Promises and executes them as they are received. We'll also create an AppDispatcher which, unlike the Dispatcher, is more specific to our application.
Our build process during this series will utilize both gulp and browserify. In this lesson we will take a moment to setup our environment and all of the tooling required to begin developing our Flux Application. We've kept the build process very simple so porting it to grunt should be a breeze, but this also serves as a simple primer for those who may not be familiar with gulp.
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.
Dive deep into JSX, what it is, and what it becomes. Be sure to check out Build a JSX Live Compiler.
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.
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.
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
defaultProps do for us in React.
This lessons goes over what it takes to get React to output simple text to the browser such as