Install Development Tools for Preact

Configure Webpack 2 and Babel for use with Preact

Create a Hello World App with Preact

Define Functional Components in Preact

Define Stateful Components in Preact

Use State and Props in the Component Render Function

Use Link State to Automatically Handle State Changes

 Reduce the Size of a React App in Two Lines with preact-compat

Handle Simple Routing with preact-router

Integrate react-router with Preact

Integrate Redux with Preact

Use Redux Dev-Tools with Preact

Up and running with Preact

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.

[00:00] In this example, we're rendering a user card that is based on some data that we fetched from GitHub's API. We've got a component here, it has a constructor with some initial state viewset.

[00:11] When the component is mounted in the page, we use fetch to get the response from GitHub, pass it as JSON, and then we set the state on this component, and then we render the user card once the data arrives, or a please wait sign if we're still in a loading state. Now what you'll notice here is there are quite a few references to this.state.

[00:35] This is something that preact can actually help us out with. Unlike React, in preact, we actually get to use two arguments from the render method, we have props and state. These are just provided as a convenience to you.

[00:51] We can remove this.state to make it a little bit shorter, we can even go one step further and use destructuring here to pull off just the properties of the local state that you're interested in. In our case, we just want loading and user. We can say loading and user.

[01:13] Now we can get rid of this altogether, and both of these, hit save, and you can see it's still working as it did before. Now the same thing applies for props too, so let's change this please wait text here to actually display the URL that we're currently fetching.

[01:29] If we look back in the index file, we actually pass through this.config.urls.user, that means on the props we can get config, and then we can say fetching config.urls.user, save, and it's gone in a flash. If we just set a quick timeout on this so we can see it, and there you see the loading message for two seconds followed by the user card.

Course

Up and running with Preact

Use State and Props in the Component Render Function

Share this video with your friends