Lots of people use React as the V in MVC. Since React makes no assumptions about the rest of your technology stack, it's easy to try it out on a small feature in an existing project.
In this lesson, we extend the styles of a base button component to create multiple variations of buttons, using "extend". We can then modify the base styles in one place, and have all button types ...
In this lesson, we learn how to handle CSS keyframe animations in styled-components, via the 'keyframes' helper.
In this styled-components lesson, we set a "primary color" within a UI "theme" object. We make this theme accessible to all components by wrapping our application inside a .
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, ...
In this lesson, we see how we can apply styles globally with the "injectGlobal" helper method in styled-components. This method allows us to apply styles on the body element, which cannot be wrappe...
In this lesson, we remove the mapping between a React component and the styles applied to it via classnames. We write our styles directly within the component, in a real CSS syntax, with the full p...
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 a...
In this lesson we'll show how to build a ScrollView and ScrollElement component that do not add additional markup. We'll use context and findDOMNode to register nested items and then expose a scrol...
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 show...
In this lesson we'll use CellMeasurer and 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 dyn...
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 theList component to render our set...
showing All 344 lessons...
One of React’s core concepts is component composition. React VR is no different in that regard. You can take any existing component and wrap it into a new React component. We do so by creating a Tree component out of simpler shapes. A tree trunk and a tree crown.
React VR isn’t limited to simple 3D primitives. By using the Model Component we can place complex 3D models into our scene.
In this lesson we import a custom polygon mesh by loading a Wavefront obj file. In addition we test out various options to define the surface area.
Letting the user interact inside a VR scene is a crucial element for an immersive VR experience. In this lesson we walk through the various interaction handlers that come with almost every React VR component and show why the component VrButton is useful and how to use it.
In order to illuminate a scene containing 3D object a lightning setup is needed. In this session we will walk through the available lightning components create a common outdoor lightning setup. This includes AmbientLight, which affects all objects in the scene equally and from all directions, DirectionalLight, which illuminates all objects equally from a given direction as well as the PointLight, which spreads outward in all directions from one point and SpotLight, which spreads outwards in form of a cone.
Motion is an important aspect of an immersive experience and therefore we are going to look into the animation API Animated. It allows us to express a wide variety of animation patterns to animate text, images and views. In addition we leverage the higher order component createAnimatedComponent to create a rotating box.
Same as a div in HTML or a View in ReactNative, React VR comes with a container component that supports flexbox layouting. In This session we explore what a View means in a three dimensional context and how to structure two dimensional content like text and images.
A 360° image can be used to teleport a user to a different place. Alternatively it can be used as a background for a 3D scene. In this session we will use a recorded, as well as a generated image to demonstrate loading a panorama which are equirectangular image or multiple cubemap images.
In this lesson, we’ll wire up React Router to pass a url based filter parameter into our component and create a selector function to filter our state data between the store and our components by hooking into the
ownProps parameter of
In this lesson, we’ll make a few small changes to our scripts and add some environment variables that will be used at build time to get our application ready to be deployed to a production environment using the
now service. Once properly configured, we’ll use the
now CLI and publish our application to a production server.
Every dispatched action in Redux is sent to all reducers. This means a single action can be handled in different ways by different reducers. In this lesson we’ll look at how this can be used to handle updates in multiple parts of our state tree in response to a single action.
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.
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.