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'll take a stateful React component and look at how we can refactor our setState calls to use an updater function and then leverage Ramda's evolve function to make our updater func...
In this lesson, we'll refactor a React component to use Ramda lenses to update our component state. We'll create a lens to focus on the property we want to target and use over to apply the existing...
React Native requires a lot of initial set up to get an app going. In this lesson, we will use create-react-native-app to do this initial setup for us. We will install create-react-native-app globa...
Learn to write components that render differently on iOS and Android, but present the same API. First, we'll use the Platform module to change behavior based on the platform. Then, we'll use the pl...
Components trigger actions via function props to notify of events that occur within the Component. We can inspect those events using React Storybook.
React Component stories can be dynamically loaded into React Storybook instead of doing it manually every time.
Story is the smallest unit of React Storybook. A story describes a React Component, and its various states and variations. Stories can describe complex components with dynamic properties and data l...
In this lesson, we show how to setup React Storybook into an existing React project. We’ll go through common configuration files and how to adjust them.
Learn how to add a simple Redux-backed React component to a new Rails 5 app using React on Rails.
React loves svg just as much as it loves html. In this lesson we cover how simple it is to make SVG components in ReactJS. Creating SVG components with React allows you to inline SVG. Inline SVG h...
We are going to ensure our app is structured in a clear way using functional components. Then, we are going to pass those components state values from the parent class component.
showing All 269 lessons...
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.
In this lesson we'll create an event details card with basic information displayed. On press basic information will slide up to present additional information. We'll use
state and the
componentDidUpdate callback to trigger our animations.
Depending our state we'll use
Animated.timing to animate the information in and out. We'll use a series
interpolate on our
Animated.Value to rotate the arrow, and
translate our information into view.
In this lesson we'll create a tap to show more information animation card. This is a great technique for exposing minimal information and then revealing more information if a user needs it.
Animated.timing and rely heavily on
interpolate to coordinating the sliding of the card, and scaling image animations. Finally we will need to disablethe
ScrollView to allow for our gestures to work correctly.
In this lesson we'll create an animated floating action button. This technique can be used as a quick action menu to hide additional options. When pressed we'll use
Animated.parallel to execute our stagger menu options and execute our
Animated.timing animation which will rotate our button and change our background color with
interpolate. We use
Animated.stagger to create a delay of our buttons sliding up.
Animated.spring will give our buttons a spring effect as they shoot upwards.
In this lesson we'll build a "tap to show love" animation. This technique is commonly used on many streaming sites to show the streamer they appreciate the content. When the screen is pressed an
Animated.Value will be created. We will measure the screen dimensions with
Dimensions so we can place our heart in a random location. Then we'll use
Animated.timing to animate the heart upwards. Finally a series of
interpolate will allow the heart to explode from nothing to full sized heart, wobble side to side, move upwards, and then fade out.
In this lesson we'll create a like button that explodes with hearts. We'll use
Animated.parallel to execute the bouncy heart animation as well as the series of hearts exploding at the same time. Then we'll use an array of
Animated.timing animations and then use
Animated.stagger to make the hearts appear with a 50ms stagger. We use
Animated.delay to wait before we then use
Animated.stagger again to hide the hearts in. Finally our
Animated.sequence will cause each of those animations to happen one after the other.
In this lesson we'll create a heart shaped like button that bounces when it is pressed. This technique is a great way to show feedback for when a user likes a piece of content. We'll
Animated.spring to create a realistic feeling spring animation with the use of friction. We'll also use
interpolate to our animated value to scale our heart up and down to make it look like it's bouncing.
In this lesson we'll take a stateful React component and look at how we can refactor our
setState calls to use an updater function and then leverage Ramda's
evolve function to make our updater function a reusable utility that isn't tied to the React API.
In this lesson, we'll refactor a React component to use Ramda lenses to update our component state. We'll create a lens to focus on the property we want to target and use
over to apply the existing state value to a utility function and we'll get back a new state that will be reflected in our rendered UI.
React Native requires a lot of initial set up to get an app going. In this lesson, we will use create-react-native-app to do this initial setup for us. We will install
create-react-native-app globally and create a new project.
After creating the project we will run the development server which will print a QR code on the terminal. We will install the app called
Expo Client on our mobile phone and use it to scan the QR code.
This will load our app on our mobile phone in development mode. When make adjustments to our project the changes will be reflected on our phone. If we use
console.log the messages will be printed in our terminal.
There are many cases where we will need a catch-all route in our web applications. This can include 404-style routes when nothing is match or other use cases where where we receive an invalid route in React Router v4.
React Router introduces several different router types that are useful for various environments where routing is typically needed. The BrowserRouter, NativeRouter, StaticRouter, HashRouter, and MemoryRouter are all available to suit your needs and requirements. Understanding when and why to use the variety of routers is an important part of understanding React Router v4.
Overriding a browser's current location without breaking the back button or causing an infinite redirect can be tricky sometimes. In this lesson we'll learn how React Router v4 allows us to easily achieve a redirect without getting bogged down in browser history.
If a user has entered some input, or the current Route is in a “dirty” state and we want to confirm that data will be lost, React Router v4 provides a Prompt component to interrupt the Route transition and ask the user a question.
We often want to render a Route conditionally within our application. In React Router v4, the Route components match the current route inclusively so a “stack” of Routes will all be processed. To render a single Route exclusively we can wrap them in the Switch component to render the first Route that matches our current URL.
React Router 4 has several routers built in for different purposes. The primary one you will use for building web applications is the BrowserRouter. In this lesson you will import the BrowserRouter and create some basic Route components.
URLs can be looked at as the gateway to our data, and carry a lot of information that we want to use as context so that the user can return to a particular resource or application state. One way to achieve this is through the use of URL parameters that include important data right in the URL of the route that gets matched in React Router v4.
We often need to be able to apply style to navigation links based on the current route. In React Router v4 you can easily accomplish this with the NavLink component. In this lesson, we will step through three ways to accomplish styling links through the use of an active class with the NavLink component.
Learn one way to render SVG icons as a React component. You’ll learn about the dynamic nature of SVG by passing props to a component that modify the icons properties such as colors and size.
You'll learn how to set up a stateless functional component, set up prop types and add a set of default props.
One benefit to building an individual icon component is that only the SVG markup needed for that icon will be rendered, instead of having to load an entire set of icons and only using one of them. Also, different attributes can be overridden using props, making theming and integration simple.
Learn to write components that render differently on iOS and Android, but present the same API. First, we'll use the Platform module to change behavior based on the platform. Then, we'll use the platform-specific file extensions, .ios.js and .android.js, to render platform-specific components.
Story is the smallest unit of React Storybook. A story describes a React Component, and its various states and variations. Stories can describe complex components with dynamic properties and data loaded from a service. In this lesson we will write our first React Storybook story.
We’ll fire up json-server so we can run our application against a server. We’ll take advantage of the fetch polyfill provided by create-react-app and leverage the componentDidMount lifecycle event to load our initial todo list. We’ll also add an error message to our UI in the case that the server is unavailable.
Using pushState and passing route data via context allows our application to respond to route changes made from Link components, but using the back and forward buttons in the browser doesn’t update the application state as we would expect. In this lesson, we’ll add event handling to our Router component to handle history popState events so routing behavior is maintained for the back and forward buttons.
We’ll create a Router component that will wrap our application and manage all URL related state. We’ll see how we can use React’s built in context mechanism to pass data and functions between components without having to pass props all the way down through the component tree.
We’ll add a handler to the form so we can take new input and use it to update the application state. We’ll append new items to the list with the AddTodo function and replace the todos list in state. We’ll also clear out our form so it can accept new todos.
We want to be able to show only items in a certain status so in this lesson, we’ll add a flag to indicate which items to show, and create a function to filter the todos based on that value. We’ll take advantage of route based state to control the filtering behavior.
In this lesson we’ll see how to pass an item’s id value in an event handler and get the state to reflect our change. We’ll also create a helper function that allows us to use partial function application to clean up the event handler code and make it more “functional”
We’ll build small, focused functions to select an object from a list, apply updates to an object and replace an item in a list, avoid mutations to those objects along the way by returning new items that reflect our changes. We’ll verify this behavior by following a test driven approach using Jest.
We’ll make the input field a “controlled component” by reacting to each change of the input and capturing it in the component state. Following this model gives us assurance that the UI is always a representation of the current application state.