reactjs / reactjs/react.dev

Indicate whether a link is external

Open
#1,609 4 comments 4 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

localization
Dominant language
JavaScript
Stars
11.8k
Forks
7.9k
Avg merge
1d 11h
Merged PRs (30d)
11

Description

Related: #1605

React docs have lots of links to external articles, videos or even Stack Overflow questions. For example, the "Hello World" page has this:

Note This guide occasionally uses some of the newer JavaScript syntax in the examples. If you haven’t worked with JavaScript in the last few years, these three points should get you most of the way.

While this link is helpful to English speakers, it can easily disappoint readers of translated versions because many of them do not understand English well.

This can be especially unfriendly when they cannot reasonably guess whether the linked material is in English or not from its text or the context ("these points", "here", "said", "ES6 class", "weird bug" etc). Unfortunately, the current docs are full of instances like this.

In the long run, we can reduce the number of such confusing links, for example:

Note This guide occasionally uses some of the newer JavaScript syntax in the examples. If you haven’t worked with JavaScript in the last few years, the following article should get you most of the way.

But for the time being, I suggest indicating external links using an icon (e.g., 🌎) or a different color. It can signal the linked article is likely to be written in English. Maybe links to an MDN article can have a different icon because it usually has a translated version.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reviewing how links are rendered across the React documentation site and read related issue #1605 for context. Inventory external links, including MDN links, and define the work as complete when readers can distinguish external material from internal links without relying on link text.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
accessibility, design, documentation
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.