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 425 lessons...
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.
.map to map an array to React elements. However, if you don't use the
key prop correctly, it can lead to unexpected results, so we explore what can happen and how to use the
key prop correctly.
In this lesson we'll take a look at how to make a basic form with React. We'll see how to use the
onSubmit event to prevent the default submit behavior of forms with React and then how to use that event to get the values from the form. We'll also see how you can use the React
ref prop to get the value of form elements as well.
In this lesson we'll learn about React's synthetic event system which allows React to use the same event system regardless of the platform (whether you're using react-native or react-dom for example). We'll see how you attach events directly to elements and React takes care of event delegation and optimization for you.
In this lesson we'll learn about how you can use the
prop-types module to validate a custom React component's props.
In this lesson we'll learn how to use raw React APIs to create the most basic Hello World example. React defines it’s own
createElement function that we will see works similar to
document.createElement. And in place of
appendChild we will use
We'll also learn a little bit about React props and the children prop.
You get excellent developer experience when using TypeScript with React. This is better when compared to many other frameworks that work off of simple template strings because JSX is embedded within TypeScript.
In this lesson we give a demonstration of the some of the powerful refactorings and type checks enabled by using TypeScript with React.