reactjs / nl.reactjs.org

(Work in progress) React documentation website in Dutch

reactjs.org

This repo contains the source code and documentation powering reactjs.org.

Getting started

Prerequisites

1. Git
2. Node: any 12.x version starting with v12.0.0 or greater
3. Yarn: See Yarn website for installation instructions
4. A fork of the repo (for any contributions)
5. A clone of the reactjs.org repo on your local machine

Installation

1. cd reactjs.org to go into the project root
2. yarn to install the website's npm dependencies

Running locally

1. yarn dev to start the hot-reloading development server (powered by Gatsby)
2. open http://localhost:8000 to open the site in your favorite browser

Contributing

Guidelines

The documentation is divided into several sections with a different tone and purpose. If you plan to write more than a few sentences, you might find it helpful to get familiar with the contributing guidelines for the appropriate sections.

Create a branch

1. git checkout master from any folder in your local reactjs.org repository
2. git pull origin master to ensure you have the latest main code
3. git checkout -b the-name-of-my-branch (replacing the-name-of-my-branch with a suitable name) to create a branch

Make the change

1. Follow the "Running locally" instructions
2. Save the files and check in the browser
3. Changes to React components in src will hot-reload
4. Changes to markdown files in content will hot-reload
5. If working with plugins, you may need to remove the .cache directory and restart the server

Test the change

1. If possible, test any visual changes in all latest versions of common browsers, on both desktop and mobile.
2. Run yarn check-all from the project root. (This will run Prettier, ESLint, and Flow.)

Push it

1. git add -A && git commit -m "My message" (replacing My message with a commit message, such as Fix header logo on Android) to stage and commit your changes
2. git push my-fork-name the-name-of-my-branch
3. Go to the reactjs.org repo and you should see recently pushed branches.
4. Follow GitHub's instructions.
5. If possible, include screenshots of visual changes. A Netlify build will also be automatically created once you make your PR so other people can see your change.

Translation

If you are interested in translating reactjs.org, please see the current translation efforts at isreacttranslatedyet.com.

If your language does not have a translation and you would like to create one, please follow the instructions at reactjs.org Translations.

Troubleshooting

• yarn reset to clear the local cache

License

Content submitted to reactjs.org is CC-BY-4.0 licensed, as found in the LICENSE-DOCS.md file.

nl.reactjs.org's Issues

Deciding on initial Docs page titles

I thought it would be worthwhile to get some initial thoughts in on this too, for consistency purposes.

INSTALLATION	INSTALLATIE
Getting Started	Beginnen Met React
Add React to a Website	React Toevoegen Aan Een Website
Create a New React App	Een Nieuwe React App Maken
CDN Links	CDN Links

MAIN CONCEPTS	ALGEMENE CONCEPTEN
Hello World	Hello World
Introducing JSX	Introductie Tot JSX
Rendering Elements	Elementen Renderen
Components and Props	Componenten En Props
State and Lifecycle	Staat En Levenscyclus
Handling Events	Omgaan Met Events
Conditional Rendering	Conditioneel Renderen
Lists and Keys	Lists En Keys
Forms	Forms
Lifting State Up	Staat Omhoog Tillen
Composition vs Inheritance	Compositie vs Inheritance
Thinking in React	Denken In React

ADVANCED GUIDES	GEADVANCEERDE HANDLEIDINGEN
Accessibility	Toegankelijkheid
Code-Splitting	Opsplitsen Van Code
Context	Context
Error Boundaries	Error Boundaries
Forwarding Refs	Forwarding Refs
Fragments	Fragmenten
Higher-Order Components	Hogere Order Componenten
Integrating with Other Libraries	Integreren Met Andere Libraries
JSX In Depth	JSX Uitgediept
Optimizing Performance	Performance Optimaliseren
Portals	Portalen
React Without ES6	React Zonder ES6
React Without JSX	React Zonder JSX
Reconciliation	Reconciliation
Refs and the DOM	Refs En De DOM
Render Props	Render Props
Static Type Checking	Statische Typecontrole
Strict Mode	Strict Mode
Type Checking with PropTypes	Typecontrole Met PropTypes
Uncontrolled Components	Ongecontroleerde Componenten
Web Components	Web Componenten

API REFERENCE	API-REFERENTIE
React	React
React.Component	React.Component
ReactDOM	ReactDOM
ReactDOMServer	ReactDOMServer
DOM Elements	DOM Elementen
SyntheticEvent	SyntheticEvent
Test Utilities	Test Hulpprogramma's
Shallow Renderer	Shallow Renderer
Test Renderer	Test Renderer
JS Environment Requirements	JS Omgevingsvereisten
Glossary	Woordenlijst

HOOKS (NEW)	HOOKS (NIEUW)
Introducing Hooks	Introductie Tot Hooks
Hooks at a Glance	Hooks In Een Oogopslag
Using the State Hook	De State Hook Gebruiken
Using the Effect Hook	De Effect Hook Gebruiken
Rules of Hooks	Regels Van Hooks
Building Your Own Hooks	Je Eigen Hooks Maken
Hooks API Reference	Hooks API-referentie
Hooks FAQ	Hooks FAQ

CONTRIBUTING	BIJDRAGEN
How to Contribute	Hoe Bijdragen
Codebase Overview	Overzicht Van Codebase
Implementation Notes	Opmerkingen Over Implementatie
Design Principles	Ontwerpprincipes
FAQ	FAQ
AJAX and APIs	AJAX En API's
Babel, JSX, and Build Steps	Babel, JSX En Bouwstappen
Passing Functions to Components	Functies Doorgeven Aan Componenten
Component State	Staat Van Een Component
Styling and CSS	Styling En CSS
File Structure	Bestandsstructuur
Versioning Policy	Versioneringsbeleid
Virtual DOM and Internals	Virtuele DOM En Internals

How to keep up with remote changes

I found that at a certain moment in time a snapshot of the original english version was made. I don't know exactly when, but I found that for example this commit:

reactjs/react.dev@5c371e5

Was not in that base. This means that after we have finished translating we need to follow the trail of all content commits from the snapshot time until now...

Is there a smarter way to do this?

Glossary & style guidelines

🔧 WIP

Please add entries, suggest changes, whatever you see fit.

Guidelines

• Keep React- and programming-related terms in English.

• Capitalize all words in section titles. E.g. Inline If with Logical && Operator -> Inline If Met Logische && Operator

• Keep link formatting as close to the original as possible. E.g. keep bold ** formatting of CodePen links where applicable.

• Use links to Dutch articles where possible and clearly indicate that a linked article is English by using (Engels).

• Prefer using the je pronoun over u when addressing the reader of the article.

Glossary

Translate

English	Nederlands
encapsulated	omwikkeld / ingekapseld ❓
component(s)	component(en)
(rich) data	(rijke) gegevens/data ❓
declarative	declaratief
to declare	verklaren / benoemen ❓
technology stack	technologiestack
to render	renderen
method	methode
(function) accepts (arguments)	(functie) accepteert (argumenten)
(function) returns (arguments)	(functie) geeft terug / retourneert (argumenten) ❓
function	functie
argument(s)	argument(en)
to update	bijwerken
to invoke	aanroepen
markup	opmaak
list	lijst
list item	lijstelement
class	klasse
functional components	functionele componenten
attributes	attributen
uppercase letter(s)	hoofdletter(s)
lowercase letter(s)	kleine letter(s)
scope	bereik
expression(s)	expressie(s)
(im)pure (function)	(on)zuiver(e) (functie)
to embed	insluiten
curly braces	accolades
regular	regulier
to assign	toekennen
to represent	voorstellen
conditional	conditioneel
refactor	refactoren
performance	performance/prestaties ❓
to pass (arguments)	(argumenten) doorgeven
lifecycle (methods)	levenscyclus(methoden)
to (un)mount (a component)	(een component) (de)monteren / (un)mounten ❓
arrow function	pijlfunctie
composition	compositie
to bind	binden
controlled (components)	aangestuurde (componenten)

Keep as-is

English
state
templates
features
hooks
libraries
frameworks
input
output
inline
event handl(ing/er)
event delegation
props
DOM
tags
camel case
bottom-up
top-down
string
statements
loops
literals
bugs
keys
maps
body
constructor
resources
React
log
callback
mock
inheritance
UI
tree
node
children (node)
(grand)parents (node)
siblings (node)
syntax
views
read-only

Formalities

So now that we have our repo (🎉!), let's decide on some formal rules before we get into translating áll the stuff. Deciding on and documenting them should hopefully make both the processes now as well as in the future go way smoother 😄.

Todos ✔️

• Cleanup some of the repo (I saw some crowdin stuff in the README).
• Do you guys prefer to communicate through Github or do we want to set up a Discord/Slack/Spectrum for easier communication?

Translation Rules 📝

• As described here, we should make a glossary and/or style guide consisting of terms which we either do or do not want to translate and if so, how they are translated to make it consistent. We should probably do this in a way that is easy to extend/change it and discuss about those proposals. Personally, a MD file of some sort where we discuss in PRs is fine for me. For the initial batch, we could make an exception for this to make it go smoother. #5
• Is it more important to keep the translation as similar to the original as possible, or is it better to express it naturally in Dutch in cases where it's hard to keep it similar? (I prefer the latter).

Review Process 🔍

We should decide on some rules on:

• How will we review proposals/translations? What will we pay attention to and what not?
• When will we merge it?
• Since we're with only 3 people atm, how many approvals is considered mergeable?

Repository Organisation 🗑

• Personally, I like to have labels like Ready for Review or Do not merge in order to keep everything organised, but definitely would also like to hear what you guys want.
• Do we want to keep all the process in #1 or also make a Project board?

Usefull resources 📘

• React translation team
• The original React docs

There's probably more stuff, but let's stick to this for now as it's already a lot 😺

(And use all the emojis!)
@jochenboesmans @rickbeerendonk
@reactjs/reactjs-org-dutch-translation

Slack link inactive

The Slack link in the readme file is inactive. Can someone add a new link?

@jochenboesmans
@Keraito
@rickbeerendonk
@ronderksen
@timlogemann

Introductions

Since we'll most likely be working a bit with one another, let's introduce ourselves as well :) Would be cool to learn a bit about each other, how you got into React, whether you are working with React now, what stuff you're using, what more do you do, what your favourite Dutch snackbar snack is, etc. No obligations, just tell what you feel like and create a friendly environment 😄

My name is Chak Shun, I've recently graduated from my Computer Science masters in TU Delft and am now a full time React front-end engineer. I've started learning React around 2 years ago and most knowledge comes from reading blog posts and keeping up to date with the changes + releases. Besides that, I'm also part of maintaining/contributing to Storybook and am trying to get into blogging as well 🎉. Favourite snack is Kalfskroket! 🤤

Dutch Translation Progress

Maintainers List

• @Keraito
• @jochenboesmans
• @rickbeerendonk
• @ronderksen
• @timlogemann
• @degeens
• @Jacco

For New Translators

To translate a page:

1. Check that no one else has claimed your page in the checklist and comments below.
2. Comment below with the name of the page you would like to translate. Take only one page at a time.
3. Clone this repo, translate your page, and submit a pull request!

Before contributing, read the glossary and style guide (once they exist) to understand how to translate various technical and React-specific terms.

Please be prompt with your translations! If you find that you can't commit any more, let the maintainers know so they can assign the page to someone else.

For maintainers

When someone volunteers, edit this issue with the username of the volunteer, and with the PR. Ex:

• Home Page (@tesseralis) #1

When PRs are merged, make sure to mark that page as completed!

Core Pages

To do before releasing as an "official" translation. Please translate these pages first.

• Home Page (@Keraito) #17
• Tutorial (@supermooshman) #29

Basics

• Hello World (@jochenboesmans) #10
• Introducing JSX (@ronderksen) #11
• Rendering Elements (@ronderksen) #13
• Components and Props (@ronderksen) #16
• State and Lifecycle (@Keraito)
• Handling Events (@jochenboesmans) #19
• Conditional Rendering (@jochenboesmans) #21
• Lists and Keys (@ronderksen) #26
• Forms (@jochenboesmans) #27
• Lifting State Up (@jochenboesmans) #30
• Composition vs Inheritance (@nickooms) #32
• Thinking in React (@Jacco) #43

API Reference

• React (@Jacco) #71
• React.Component (@Jacco) #72
• ReactDOM (@regdot)
• ReactDOMServer (@regdot)
• DOM Elements
• SyntheticEvent
• Test Utilities
• Shallow Renderer
• Test Renderer
• JS Environment Requirements
• Glossary

Navigation

These are the navigation links that appears in the sidebar. Possibly wait until
the corresponding sections are translated to do these.

• tutorial/nav.yml
• docs/nav.yml

Next Steps

These are the next most important translations, ordered by importance:

Installation

• Getting Started @joranquinten
• Add React to a Website @joranquinten #34
• Create a New React App
• CDN Links

Hooks

Everyone is hooked on hooks! People are really excited for these and it would be great for them to be translated.

• Introducing Hooks (@Jacco) #44
• Hooks at a Glance (@Jacco) #65
• Using the State Hook (@Jacco) #68
• Using the Effect Hook (@Jacco) #69
• Rules of Hooks
• Building Your Own Hooks (@Jacco)
• Hooks API Reference (@Jacco) #70
• Hooks FAQ

Concurrent Mode

• Introducing Concurrent Mode
• Suspense for Data Fetching
• Concurrent UI Patterns
• Adopting Concurrent Mode
• Concurrent Mode API Reference

Warnings

These are the pages that you get when you click the links in the console (e.g. https://reactjs.org/warnings/dont-call-proptypes.html). People tend to search these, so please don't translate the error message itself.

• dont-call-proptypes
• invalid-aria-prop
• invalid-hook-call-warning
• legacy-factories
• refs-must-have-owner
• special-props
• unknown-prop

Advanced Guides

• Accessibility
• Code-Splitting
• Context
• Error Boundaries
• Forwarding Refs
• Fragments
• Higher-Order Components
• Integrating with Other Libraries
• JSX In Depth
• Optimizing Performance
• Portals
• React Without ES6
• React Without JSX
• Reconciliation
• Refs and the DOM
• Render Props
• Static Type Checking
• Strict Mode
• Typechecking With PropTypes
• Uncontrolled Components
• Web Components

FAQ

• APIs and AJAX
• Babel, JSX, and Build Steps
• Passing Functions to Components
• Component State
• Styling and CSS
• File Structure
• Versioning Policy
• Virtual DOM and Internals

Contributing

Priority: Low

• How to Contribute
• Codebase Overview
• Implementation Notes
• Design Principles

Components

Components in src/components that have some text in them.

• CodeEditor (@Jacco) #64
• CodeExample (@Jacco) #64
• ErrorDecoder
• LayoutFooter
• LayoutHeader
• MarkdownPage

Additional Translations

These are not the primary translation targets.

• Blog
• Community

Dutch Translations still active?

Hey, I would like to help translate the reactjs website to Dutch. But it looks like there isn't much activity here?
Are translations still getting accepted?