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 will learn how to create our own buttons using the 3 Touchable components that are available on the iOS and Android platforms. We will build a button with each component and lear...
There are a few things you may be used to doing in CSS that you’ll need to learn how to accomplish using CSS in JS (in particular with glamor and glamorous). In this lesson we’ll go through a few e...
Glamorous works great with whatever CSS framework you’re currently using. In this lesson we’ll see how to make glamorous integrate with your existing CSS solution so you can migrate overtime.
In this lesson we’ll learn about the things you need installed and setup to start writing React components with glamorous.
In this lesson, we will cover a popular image processing component in the react eco-system for image processing. The Library is react-imgpro. Installation: npm install --save react-imgpro Inc...
In Understand Redux Higher Order Reducers, I've explained to you how higher order reducers can reduce the amount of reducer logic by reusing it. You can even use multiple higher order reducers, but...
Higher Order Reducers are simple reducer factories, that take a reducer as an argument and return a new reducer. In that new reducer, you can customize the behaviour of the original one which helps...
We will use the React-Remarkable library to render markdown onto our React DOM. This library uses the Remarkable library to render markdown. Installation Guide npm install --save react-remarkable...
Starting from v15.5 if we wanted to use React's PropTypes we had to change our code to use a separate node module, now we can go one step further and get rid of that extra dependency just by using ...
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 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...
showing All 440 lessons...
When some side effects depend on the return of other side effects, we need to stop or block the iteration through our sagas until these resolve. We control this stop and go pattern with blocking effects, such as call and take.
When we need to run side effects and do not care about a return value, we should use non-blocking effects. This way we can iterate through our sagas as efficiently as possible. Some popular non-blocking effects are put and fork.
In this lesson we will dive a bit more into the tree semantics of MST.
In this lesson you will learn:
* Actions can only modify their own subtree
* The use of
getParent to find the parent of a model instance
destroy to remove an instance entirely from the tree
Mapping the props to multiple children involves the use of React’s
Children.map so that you can map over each child Component provided to the Parent Component stream. Inside the mapping function, you use the
cloneElement and pass the props manually as you would with a single child component.
Combining input streams then using
scan to track the results is a common scenario when coding with streams. This lesson walks you through setting up two buttons and merging their input events together to build a streaming Counter component.
Events are the beginning of most every stream. Recompose provides a
createEventHandler function to help your create handler and stream pairs. Once the handler/stream pairs are created, it’s simply a matter of passing the handlers down the stream as props and combining the streams any way you want.
Recompose provides helper functions to stream props using an Observable library of your choice into React. This lesson shows you how to configure Recompose to use RxJS then create a Streaming Component with Recompose’s componentFromStream helper function.
It’s not uncommon to export a component as a named export as opposed to a default export. The key option in the universal higher-order component allows you to select which named export in the module that you’d like to load.
We will add redux to our project and get redux working on the client and server. The redux state will be passed along with our server-side rendered page in a global window variable; from there, we’ll hydrate the state on the client.
We’ll go through the options related to loading. You have the ability to specify a custom loading component instead of the default
Loading… component that react-universal-component will show for you. You can also set a minimum delay if you’d like the loading component to always show for some time—sometimes a quickly blinking loading component can appear unpolished.
You can create stateful React Components in TypeScript by extending from the
React.Component class. This parent class takes two generic parameters,
This lessons shows these generic parameters and
React.Component in action.
In this lesson, we will learn how to create our own buttons using the 3 Touchable components that are available on the iOS and Android platforms. We will build a button with each component and learn which component is best based on the feedback that we need to provide to the user.
createPage action allows for additional data to be passed in via
context. In this lesson, we will add a processing step to include links between posts, and update our templates to conditionally display them as appropriate.
In this lesson, we’ll use GraphQL to query for tags on each of our posts then dynamically create page URLs that display links to all the posts that match each tag. The tags index page and tag pages will be dynamically created in a function we will define using the page templates we have built and Gatsby's
Now that we have everything wired up to share and update the state of the toggled boolean across our application, let's see how easy it would be to change from the state of a single boolean to state in a redux store! We’ll call it
rendex (render props + redux). 😍
One problem with using context is that any component in the hierarchy could return true from shouldComponentUpdate without knowing that state in context has changed. In this lesson, we’ll look at how the
react-broadcast library can be used to avoid that problem.
When making a reusable component, you'll find that people often like to have the API they're most familiar with, so in this lesson we'll recreate the
withToggle Higher Order Component using our new
ConnectedToggle render prop component.
If you have state that needs to exist throughout your application, then you may find yourself passing props all over the application and even "drilling" the prop through components that don't really care about the prop at all. In this lesson, we'll see a sample of a small app that has the "prop drilling problem" and learn how to implement the "Provider pattern" to access context state anywhere in the component tree.
Let’s make it a little easier to test components which have been wrapped by our Higher Order Component by exposing the underlying component. Inside of our Higher Order Component, we will assign a
WrappedComponent property to our Component that we passed in.
When you're using prop collections, sometimes you can run into trouble with exposing implementation details of your prop collections. In this lesson, we'll see how we can abstract that away by simply creating a function called a prop getter that will compose the user's props with our prop collection.
React DevTools and React's built-in development warnings rely on the
name property of your react components to give you a good developer experience. Unfortunately, Higher Order Components make it harder for React to give that good experience. In this lesson, we’ll learn about the
displayName property and how that impacts React Developer Tools. Then we'll improve the
displayName for our Higher Order Component by changing where we call the withToggle Higher Order Component.
In this lesson, we'll take a step back and reexamine the problem by doing a few tiny refactorings to arrive at a new pattern called
render props is just a function that you pass to a component that renders jsx. This pattern gives us the ability to use Reacts lifecycle methods where as with Higher Order Components, you could not. We'll see that it allows us to avoid using APIs like
context and all of the issues we had to deal with when using Higher Order Components.
One of the goals of reusable components is that the implementation details are unobservable. You want to make things work the way people think they should work without them having to consider the implementation. In this lesson we'll see a confusing observable behavior of using Higher Order Components and use the
hoist-non-react-statics library to avoid the problem.
When you wrap a component with a Higher Order Component, it becomes impossible to forward the
ref prop down the component tree due to the special nature of the
ref prop in React. In this lesson, we’ll see that problem in action with our Higher Order Component. We will pass the ref as an
innerRef prop so that the Higher Order Component can re-assign the ref to the component that it is wrapping.
In this lesson, we’ll write a simple toggle component which will serve as the foundation for the rest of the course. Kent walks through how to create a simple toggle with React setState. He shows us how to extend the functionality of the toggle by safely adding an onToggle prop that gets called after state is updated. It is important to define default props when you are calling a method from props.
The state shared between our toggle components is implicit because it lives inside context and is not easily accessible. In this lesson, we'll make a Higher Order Component (HOC) factory function which will allow the user to access that implicit state in their own components. Higher Order Components take a component and render a new component with some enhanced behaviors, in this case, the toggle context is added to the returned component. This factory component can get rid of duplicated code caused by needing to declare
contextTypes on each component that needs it. Now we can wrap the component with
withToggle and destructure
toggle from the props.
Our current compound component implementation is great, but it's limited in that users cannot render the structure they need. Let's allow the user to have more flexibility by using React context to share the implicit state to our child
<Toggle/> components. We will walk through safely defining
childContextTypes, providing the value with
getChildContext, and, on each of the components that need that context, we define
contextTypes so that React will pass the context that is being asked for.
Compound component gives more rendering control to the user. The functionality of the component stays intact while how it looks and the order of the children can be changed at will. We get this functionality by using the special
React.Children.map function to map over the children given to our
<Toggle/> component. We map over the children to pass the
on state as a prop to its children. We move the visual pieces of the component out into function components and add them as static properties to
In this lesson we'll look at a few ways to deal with issues around
this when writing
class components with React. We'll eventually land at Public Class Fields syntax which is a stage 3 proposal in the ECMAScript standardization process.
In this lesson we'll see how simple it is to prototype a React application right in your browser using CodeSandbox.io, then to download that application locally and use the
react-scripts which are setup automatically to develop and build the application for production. We'll wrap up by deploying the application to Netlify (using a free account) for the world to see.