mirror of
https://github.com/reactjs/react.dev.git
synced 2026-02-23 20:23:08 +00:00
819518cfe3
* Update TailwindCSS & Install rtl-detect
1- Update TailwindCSS to use the logical properities such as `ps-1` instead of `pl-1`.
there are logical properities for margin, padding, inset, and text direction.
2- Install `rtl-detect` detect if the language is RTL direction.
Note: this might be uninstalled if we use the manual way to specify rtl language.
* add `siteConfig.isRTL`
* add `dir` attribute to the root element
* edit some tw classes to utilize logical properties
instead of directions properties
(e.g. `pr-0` to `pe-0`)
* edit some tw classes to utilize logical properties
instead of directions properties
(e.g. `pr-0` to `pe-0`)
* edit some tw classes to utilize logical properties
instead of directions properties
(e.g. `pr-0` to `pe-0`)
* edit some tw classes to utilize logical properties
instead of directions properties
(e.g. `pr-0` to `pe-0`)
* Refactor TW classes: Use logical properties over directional properties.
* Revert "Refactor TW classes: Use logical properties over directional properties."
This reverts commit df9620d944.
* Refactor TW classes: Use logical properties over directional properties.
* Refactor TW classes: Use logical properties over directional properties.
* Refactor TW classes: Use logical properties over directional properties.
* Add `start` and `end` directions to the `IconNavArrow`
* Add Note about `isRTL` prop
* Refactor TW classes: Use logical properties over directional properties.
* Refactor TW classes: Use logical properties over directional properties.
* Refactor TW classes: use logical properties over directional properties
* Refactor TW classes: use logical properties over directional properties
* Refactor TW classes: use logical properties over directional properties
* set dir attr of `CodeBlock` to `ltr` even the page dir is `rtl`
* Refactor TW classes: use logical properties over directional properties
* Refactor TW classes: use logical properties over directional properties
* Add `start` and `end` directions to some icons
* Refactor TW classes: use logical properties over directional properties
* Refactor TW classes: use logical properties over directional properties
* Refactor TW classes: use logical properties over directional properties
* Refactor TW classes: use logical properties over directional properties
* set dir attr of `ConsoleBlock` to `ltr` to overwrite the dir of root element
* Refactor TW classes: use logical properties over directional properties
* set dir=ltr on inline code blocks to overwrite <html dir="rtl"> in some languages
* Refactor TW classes: use logical properties over directional properties
* Refactor TW classes: use logical properties over directional properties
* Refactor TW classes: use logical properties over directional properties
* Refactor TW classes: use logical properties over directional properties
* set translate=no, dir=ltr on `TerminalBlock` to overwrite <html dir="rtl"> in rtl languages
* Refactor TW classes: use logical properties over directional properties
* Refactor TW classes: use logical properties over directional properties
* Refactor TW classes: use logical properties over directional properties
* fix some direction styles
* fix arrow directions in rtl
* remove `rtl-detect` and set `siteConfig.isRTL` manually
* fix `Breadcrumbs`'s arrow direction in rtl languages
* fix some directions of the search modal for RTL languages
* hard setting dir=ltr to Sandpack to overwrite rtl languages dir
* Refactor TW classes: use logical properties over directional properties
* remove my notes
* fix: rerverse space-x-* in rtl
* rebase with the main branch
* remove unnecessary alt
* add `start` & `end` display directions to the Chevron Icon
* rebase with the main branch
react.dev
This repo contains the source code and documentation powering react.dev.
Getting started
Prerequisites
- Git
- Node: any 12.x version starting with v12.0.0 or greater
- Yarn: See Yarn website for installation instructions
- A fork of the repo (for any contributions)
- A clone of the react.dev repo on your local machine
Installation
cd react.devto go into the project rootyarnto install the website's npm dependencies
Running locally
yarn devto start the development server (powered by Next.js)open http://localhost:3000to 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
git checkout mainfrom any folder in your localreact.devrepositorygit pull origin mainto ensure you have the latest main codegit checkout -b the-name-of-my-branch(replacingthe-name-of-my-branchwith a suitable name) to create a branch
Make the change
- Follow the "Running locally" instructions
- Save the files and check in the browser
- Changes to React components in
srcwill hot-reload - Changes to markdown files in
contentwill hot-reload - If working with plugins, you may need to remove the
.cachedirectory and restart the server
Test the change
- If possible, test any visual changes in all latest versions of common browsers, on both desktop and mobile.
- Run
yarn check-all. (This will run Prettier, ESLint and validate types.)
Push it
git add -A && git commit -m "My message"(replacingMy messagewith a commit message, such asFix header logo on Android) to stage and commit your changesgit push my-fork-name the-name-of-my-branch- Go to the react.dev repo and you should see recently pushed branches.
- Follow GitHub's instructions.
- If possible, include screenshots of visual changes. A preview build is triggered after your changes are pushed to GitHub.
Translation
If you are interested in translating react.dev, please see the current translation efforts here.
License
Content submitted to react.dev is CC-BY-4.0 licensed, as found in the LICENSE-DOCS.md file.