docs: use descriptive links instead of "click here" (#25897 )

* docs: use descriptive links instead of "click here"

Linking text such as "here" or "click here" is not accessible (and
doesn't look that great either). The best example of why it's better to
use link text that provides context is that some screen readers allow
navigation by links alone. If all links say "click here", then how does
the user know which one to go to?

I tried to make the minimal change necessary to make the link text
descriptive but had to reword a few sentences that didn't read well.

* Apply suggestions from code review

Co-authored-by: Lee Robinson <me@leerob.io>
Co-authored-by: JJ Kasper <jj@jjsweb.site>

2021-06-09 13:23:16 -05:00

2.7 KiB

Raw Blame History

Rematch example

This example has two pages. The first page has a counter which can be incremented synchronously or asynchronously. The second page is a page which shows a list of github users. It fetches data from the github api using this endpoint.

Since rematch is utility which uses redux under the hood, some elements like store.js and withRematch are very similar to the with-redux example. Please go through the with-redux example before reading further if you are not familiar with how redux is integrated with Next.js. Rematch is just an extension for Redux so a lot of elements are the same.

Preview

Preview the example live on StackBlitz:

Deploy your own

Deploy the example using Vercel:

How to use

Execute create-next-app with npm or Yarn to bootstrap the example::

npx create-next-app --example with-rematch with-rematch-app
# or
yarn create next-app --example with-rematch with-rematch-app

Deploy it to the cloud with Vercel (Documentation).

Directory structure

Besides the pages directory, there is a directory called shared which holds all of the code belonging to rematch. Rematch has a lot lesser boilerplate than Redux because it is able to put actions(including async actions), models and reducers together. Hence, a models directory is present, which contains the logic for counter and github users.

Some features of this example are :

Pages are connected to rematch using withRematch util. These pages are capable of accessing values from the store and dispatching changes
Components are inside the shared/components folder. The counter-display component is connected to the store using the connect function to show how components which are not pages, can connect with Rematch.
The file shared/store exports an initStore function which is used by withRematch to create store universally on the server and on the client.

2.7 KiB Raw Blame History