frontity create. Here we'll explain how
@frontity/connectexposes a utility called
connectto wrap our React components so we can access the Frontity store from them. To avoid us the need to remember lots of packages and dependencies, we can import
connectand other libraries like this:
frontity. In this case
frontityis just exposing the API of
@emotion/styled, and it does this with other libraries like
react-helmet, so you get everything that you'd usually need in just one line.
namespace. In our case, all the things we are defining are inside the
themenamespace, but if our theme implemented, for example, a comments solution, that state, actions, etc., should be defined inside the
commentsnamespace. So, in the case of
roots, it would be something like:
beforeSSR. This action will be run by
@frontity/corebefore the server-side render is generated by React and it's the best place to request the data we need from our WP:
Theme, where we are deciding what kind of view to render, and in order for that component to access the store, we need to wrap it with the
connectfunction. Once it's wrapped, we can access
actionsdirectly from the props. In this case, we are using
state.source.get()to retrieve info about what kind of content should be rendered in the current path. If it happens to be an archive, we will render the
<List />component, if a post type, the
<Post />and if for some reason
wp-sourcecouldn't retrieve the data from our WP, we will render a 404 page.
Themewith some comments:
Postcomponent and the
Listcomponent there are a bunch of different things going on here. I'll start with
list/index.js. There, we are using
frontity(which is actually an alias for the
@loadable/components) to split the code of our
Listcomponent, so it won't be loaded if a user access directly to a
Postview, and instead the code will be requested when the user clicks on a list view. This is helpful to reduce the loading times and times to interactive of our site. The less code we have, the less time the browser spends evaluating it.
Listcomponent is the responsible to render a list of posts, and for that it needs to know what posts to render. We are using
state.source.get(link)and we are checking if we are either in the first one, the last one, or in the middle. Using the React hook
useEffectwe are prefetching the next page when the component mounts, so in the case the user goes there, he doesn't have to wait for the response from the WP REST API.
Linkcomponent, which accepts the same parameters as
List. We are doing a preload of the
Listcomponent (as it is a dynamic component and we don't have that code yet). Once we have our site rendered and working, we preload the code for
List, so the user won't need to wait for it later if she decides to visit a list of posts.
statefor our extension in order to use it within React and be able to set it with a
frontity.settingsfile in a Frontity project.
mars-themewe are defining the following