showing All 349 lessons...
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.
Many components within an application can be rendered using only data that is ‘passed’ to them by a parent. We call these “Functional Components” as they do not contain any internal state. In this lesson we look at how to define these types of components and how to pass data to them.
In this lesson we'll show how to use the
AutoSizer component from
react-virtualized to automatically measure the width/height of our content area. We'll then use the
List component to render our set of data as a virtualized list into the DOM using windowing.
In this lesson we'll show how to use
React.cloneElement to add additional properties to the
children of a React element. We'll also show that you can add additional properties not declared on the element.
In this lesson we'll create a Higher Order Component (HOC) that takes care of the
key property that React looks for when using
map to create elements from a list. This HOC will allow us to wrap any component and it will take care of placing the
key prop on the component for us based on the property name that we specify.
React Playground Styled is a responsive playground that can be configured with styled-components. It is built for documenting React components in the minimum space possible. You will normally wrap it in your own component to provide sensible defaults that make it blend with the look and feel your style guide.
Learn how and when to use the ‘pure’, ‘onlyUpdateForKeys’,
‘onlyUpdateForPropTypes’, and ‘shouldUpdate’ higher order components.
Each one provides a certain granularity of control over prevent
unnecessary renders. Learn how they build upon each other to provide
Learn about optimizations (like component squashing) that Recompose uses behind the scenes. More reading on Performance.
Learn how to use the ‘branch’ and ‘renderComponent’ higher-order components to show errors or messaging when your component is in a non-optimal state. Avoid putting extraneous logic to show errors or messaging into your core component by organizing your non-optimal states into custom higher-order components.
Learn how to user the ‘componentFromProp’ helper and ‘defaultProps’ higher order component to swap the underlying html tag of your component. Sometimes we want a component to behave the same overall but to use a different element in the HTML output. An example is swapping an for a or even a react router depending on circumstance.
Learn how to use the ‘branch’ and ‘renderNothing’ higher-order
components to render nothing when a certain prop condition is
met. Sometimes you only want to render a component when valid
props exist or are in a certain condition; ‘renderNothing’ is
an easy way to completely remove the component when you don’t
need to show it.
Learn how to use the 'mapProps' higher-order component to modify an existing component’s API (its props). 'mapProps' takes incoming props and changes them however you’d like; for example, filtering the props by a field.
Setting up tooling for a basic React app is typically very hard to do and requires a lot of configuration. In this lesson, we will setup a new React project with Neutrino with zero configuration. Neutrino uses Webpack and Babel behind the scenes, so you still get great build technology, but without all the heavy lifting of needing to configure it.
In this lesson we'll create a collapsible header bar. This technique is used to show additional information or actions but hide when the user scrolls to expose more of the information they are looking at.
We'll use a combination of
onScroll, and the
Animated.event function to update our
Animated.Value every time the user scrolls. Then with a series of
interpolate calls we can define a scroll threshold to show/hide pieces of information, as well as shrink the
fontSize of our title.
In this lesson we'll create a notify button that expands from the middle to show a
TextInput with a send button and once sent will hide the
TextInput and show a thank you message. We'll use the helper method
StyleSheet.absoluteFill to position our input inside of our wrapping
View. This allows us to animate our
TextInput and our messages in and out without effecting layout of each other.
When pressed to show the
TextInput and when we show the thank you message a combination of animating the width and
justifyContent: "center" to make it appear as if we're animating the view from the center. We'll use
Animated.timing and a
success boolean on state to control what is rendered, and what is animating.
interpolate will be used heavily to scale in and out views when they are needed.
In this lesson we'll use
PanResponder gesture handlers to add the ability to swipe a modal closed in either direction. We'll need
ScrollView callbacks to allow us to still scroll through comments and only close when desired.
We'll use the
Animated.setValue function to
translate our Modal up or down depending on the direction of the swipe.