showing All 425 lessons...
In this lesson we’ll add a new reducer to our application and combine it with the existing reducer. We’ll use the new reducer to display messages in our application. Because we are essentially creating namespaces within our state with multiple reducers we will need to combine them to create our Redux store. To do this we will need to refactor our existing components connections to the store to get back to a working state.
One way data flow, pure reducers for updates and a global state object make unit testing and think about code much easier than the alternatives. With the tooling this makes possible, debugging can be a pleasant experience too. In this lesson, we’ll configure Redux Dev Tools for Chrome and take a tour of some of the features it offers to make debugging state in Redux a pleasure, such as Time Travel Debugging and the ability to export your state history or import state history from another session.
In this lesson we’ll install
json-server as a dependency of our project so we can explore making API calls in a Redux-friendly way. We’ll update the scripts in
package.json to allow us to run the server and verify it is responding by issuing a
In this lesson we’ll look at the
bindActionCreators helper method provided by Redux to eliminate some boilerplate code in our React application. Currently we have a function that takes in a value and calls an action creator. This pattern is extremely common in Redux and we will see how
bindActionCreators can help us cut down on some bloat.
A connected component will re-render whenever there is a state change. While we want state changes to update our UI, we don’t necessarily want every state change to render every UI component. In this lesson, we’ll use the connect function to connect components to their own specific pieces of the state tree to make our rendering more efficient.
We need to get our dispatch functions into our components in order to respond to events in Redux. Connect’s second argument is a function called
mapDispatchToProps and it does exactly what the name implies. In this lesson, we’ll use this function to get our dispatch functions into our components via props and refactor to use these functions accordingly.
We’ll make the input field a “controlled component” by reacting to each change of the input and dispatching an action to the Redux store. Following this model gives us assurance that the UI is always a representation of the current application state.
The redux store is the glue that holds this state management structure together. In this lesson we’ll use the redux library to create a store with the createStore function and then refactor our existing code to pass state into the app using the store’s getStore method.
In this lesson, we’ll see how we can eliminate some of our plumbing code and take advantage of the react-redux library to connect our Redux store to our React application and let it handle subscribing to state changes in the store.
Dispatching actions is how our application sends information to Redux in order to update state. While we could build our action objects inline and use strings for action names, this can be tedious and error prone. In this lesson, we’ll see how the use of constants and action creator functions will make dispatching actions easier and more reliable.
The Redux store exposes a subscription mechanism, allowing us to detect state updates. In this lesson, we’ll take advantage of this by rendering our UI in response to state changes. We’ll also get our first look at the dispatch method that will be used to trigger those updates.
We’ll refactor our existing code and break the pieces of the application into their own stateless functional components. We’ll use these components to build up our UI. We’ll also see how we can use ES6 destructuring syntax to accept just the keys we need from props to keep our JSX clean.
The reducer is at the center of how Redux manages state. In this lesson we’ll create a reducer function and see how Redux takes in state and actions and returns updated state. We’ll write and run unit tests using Jest to verify that our reducer function is working as expected.
We’ll define a simple state object in the entry point of our application. Once the state has been defined, we’ll pass it into our root component as props and replace the static elements in our rendered output with values from the component’s props. We’ll move from static items to an array, seeing how we can use functions like map to render our UI.
Often times when starting an application, it can be beneficial to render out a static layout to get an idea of what we will be building. Doing this allows us to see exactly how we are going to split our application into individual components. We’ll dive right into JSX by rendering a static version of what our application will look like. We’ll cover the basic syntax of JSX and point out where it differs from html.
In this lesson we'll create an error boundary. We can use the new lifecycle hook
componentDidCatch to handle any errors that the components we wrap throw at us, without unmounting our entire app!
Most of the time, your components respond to events that occur within the component tree by defining their own handler or by accepting a handler defined by a parent component via props. Sometimes, this isn't enough. In this lesson, we'll rely on lifecycle hooks and good old fashioned DOM events to update state in a React component in response to an event that occurs outside of the component tree.
In some cases, you might need to pass a string from your intl
messages.js file as a prop to a component. Instead of using
react-intl components (which generate markup), we’ll use the
injectIntl higher order component provided by
react-intl. This will provide just the string we’re looking for, make the prop simpler, and avoid creating unnecessary DOM elements.
We’ll also use props passed to the component from the Higher Order Component to clean up some redundant code.
In this lesson, we’ll look at writing test assertions for react-intl output. We'll add the necessary dependencies, then we’ll use
Jest snapshots to get assertions written quickly. Then, we’ll use
enzyme API methods to traverse the DOM and write assertions about specific pieces of
Note: This lesson uses a modified version of an "intl-enzyme" helper utility from the
react-intl documentation. You can find the modified file here.
FormattedMessage component, we’ll learn how to render content conditionally in our messages based on a number provided as a prop.
You’ll also learn the syntax necessary to render strings using a plural string matcher.
Some browsers, such as
Safari < 10 &
react-intl depends on. In order to support these browsers, we’ll conditionally include an Intl polyfill using webpack
This ensures only browsers that need the polyfill incur the extra load.
Given a date, we’ll use the
FormattedRelative component to render a date in a human readable format, such as “2 days ago”, in various languages.
We'll also see how to set the frequency of this component's rendering to make our app update the text in real-time.
In this lesson, we’ll use the
FormattedHTMLMessage component to display text with dynamic values along with other HTML elements to create emphasis on a piece of text.
FormattedHTMLMessage should be used sparingly because
react-intl cannot intelligently update the component by re-rendering only pieces that have changed. Instead, it has to re-render the entire component. If possible, use a
FormattedMessage component instead, and wrap that component with HTML markup.
Learn how to use
react-intl to set dynamic values into your language messages.
We’ll also learn how to pass in those values by using a
values prop in the
We'll also take a look at how to pass values with markup and still get all the benefits of translation.
In this lesson, we’ll replace hard coded strings with text from the user’s locale data, using the
We'll also discuss the structure of the
messages file, as well as use this utility from the
react-intl documentation in order to keep our
messages structured nicely.
react-intl, then add it to the mounting point of our React app.
Then, we’ll use
react-intl helpers to load locales in our app, including English, Spanish and French and choose which locale data to load based on the user's browser language.
We’ll also set up and include messages files for each language, which hold all of the translated strings for our app.
We'll construct a map using
react-native-maps and custom animated map makers. We'll build a scroll view that when scrolled horizontally it will animate the marker that it is associated with. Once an item is scrolled to the map will automatically animate and center the map at the markers coordinates.
This will be built with a single
Animated.Value and heavy use of
interpolate along with
extrapolate: "clamp" to lock our
In this lesson we'll show how to build a
ScrollElement component that do not add additional markup. We'll use
findDOMNode to register nested items and then expose a
scrollTo function our
ScrollView that allows for applications to animate a scroll to hidden list items.
In this lesson we'll show how to structure views to create a responsive progress bar (without defining a set width). It will allow for dynamic border, bar, and fill colors. We'll finish off by showing how to add animation to make the progress indicator smoothly transition.
In this lesson we'll use
CellMeasurerCache to automatically calculate and cache the height of a row. This will allow us to remove the predefined
rowHeight on list and allow for dynamically sized rows.
Some applications only need a very minimal routing solution. This lesson will cover a practical example showing the router in use. We’ll build a simple search feature that accepts user input and then calls the github API. We’ll see how to access route parameters, how to manually & automatically navigate around, and finally how to handle un-matched path. https://github.com/developit/preact-router
Preact and Redux is a great combination, made even more so by the amazing dev tools extension that can be installed into both Chrome and Firefox. In this lesson we’ll see how to enable it and how it works seamlessly with Preact.
React-router is the community favourite routing solution - it can handle all of your complex routing needs and in this lesson we’ll cover what’s needed to enable it’s use within Preact. https://github.com/ReactTraining/react-router
Redux is one of the most popular state-management libraries and although not specific to React, it is widely used with it. This is why the author of Preact has released a package called preact-redux, which is a simple wrapper around the main react-redux package that enables it to be used in a Preact application without any other changes to your codebase. In this lesson we refactor a stateful component to use Redux + Redux-thunk. https://github.com/developit/preact-redux
In this lesson we will create a ‘webpack.config.js’ file from scratch. Along the way we’ll learn about the entry point, how to specify output, how to configure loaders, the Preact-specific parts of the Babel configuration, and finally how to use the ‘webpack-dev-server’ via a script in the ‘package.json’ file
When dealing with Components, there’s often the need to either have some local state controlled by the component (such as form input fields) or to tap into the lifecycle events of the component. In this lesson we’ll give some practical examples of both.
Storing and updating values inside a component’s local state (known as controlled components) is such a common pattern that Preact offers a really handy feature called ‘link state’ that not only removes the need to bind class methods, but also handles the setting of new values. This can remove the need for ‘setter’ style methods on classes and in this lesson we’ll look at an example of tracking the value of a ‘text input’
Not every app is greenfield, and it would be a shame if existing React apps could not benefit from the micro-size of Preact. In this lesson we’ll discuss what preact-compat is, how to use it, and some examples of the file-size savings available. https://github.com/developit/preact-compat
babel-core along with
babel-preset-env. This combination will provide us with a set of plugins suitable for transpiling our code for use in modern browsers. It doesn't include support for JSX however, so we'll add the
babel-loader which will allow the source files being accessed by Webpack to first be processed by Babel and the plugins we specified.
Preact offers, in addition to the regular component API from React, the ability to access both props & state as function parameters to the render method. This lesson will cover an example of how to utilize this convenience along with how destructuring can make it even nicer to work with.