You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
about: Report a bug or issue with React Native website.
4
+
title: ''
5
+
---
6
+
7
+
<!-- Please provide all the information requested. Issues that do not follow this format are likely to stall. -->
8
+
9
+
## Description
10
+
11
+
<!-- Please provide a clear and concise description of what the bug is. Include screenshots if needed. Pro tip: try the format "As an <person>, trying to <action>, when I <action>, <this> happens. It would be better if <this> happens instead." Example: As an Android developer on a Windows machine, when I set up my environment, I get this error: ... If I used this command instead, I wouldn't get this error ... -->
12
+
13
+
## Documentation version
14
+
15
+
<!-- Please list the version or versions on which the issue occurs (including `next`). You can find the documentation version next to the React Native logo at the top of every page. -->
about: Post an idea, propose improvement, start discussion or put a request according to React Native website.
4
+
title: ''
5
+
---
6
+
7
+
## Description
8
+
9
+
<!-- Please provide a clear and concise description of your idea, a "TLDR." You can go into more detail below—more details make issues more actionable for us and help us prioritize! Include screenshots if needed. -->
10
+
11
+
## What is the problem?
12
+
13
+
<!-- Does this solve a problem? If so, what is it? -->
14
+
15
+
## How can we address it?
16
+
17
+
<!-- Are there any actionable steps we can take to rectify the situation? -->
18
+
19
+
## Why is it important?
20
+
21
+
<!-- Make your case here! -->
22
+
23
+
## Who needs this?
24
+
25
+
<!-- Android devs? New learners? TypeScript users? -->
26
+
27
+
## When should this happen (use version numbers if needed)?
Copy file name to clipboardexpand all lines: README.md
+51-36
Original file line number
Diff line number
Diff line change
@@ -1,35 +1,43 @@
1
-
# [reactnative.dev](https://reactnative.dev/)·[](https://circleci.com/gh/facebook/react-native-website)[](CONTRIBUTING.md)
1
+
# [reactnative.dev](https://reactnative.dev/)·[](LICENSE-docs)[](https://circleci.com/gh/facebook/react-native-website)[](CONTRIBUTING.md) <ahref="https://twitter.com/intent/follow?screen_name=reactnative"><imgsrc="https://img.shields.io/twitter/follow/reactnative.svg?label=Follow%20@reactnative"alt="Follow @reactnative" /></a>
2
2
3
3
This repo contains the website configuration and documentation powering the [React Native website](https://reactnative.dev/).
4
4
5
-
## Getting started
5
+
## Contents
6
+
7
+
-[Getting started](#%EF%B8%8F-getting-started)
8
+
-[Overview](#-overview)
9
+
-[Website configuration](#-website-configuration)
10
+
-[Contributing](#-contributing)
11
+
-[License](#-license)
12
+
13
+
## ✈️ Getting started
6
14
7
15
### Prerequisites
8
16
9
-
1. Git
10
-
1. Node: install version 8 or greater.
11
-
1.Yarn: See [Yarn website for installation instructions](https://yarnpkg.com/lang/en/docs/install/). (needs 1.5 or greater).
12
-
1. A fork of the repo (for any contributions).
17
+
1.[Git](https://git-scm.com/downloads).
18
+
1.[Node](https://nodejs.org/en/download/)_(version 10 or greater)_.
19
+
1.[Yarn](https://yarnpkg.com/lang/en/docs/install/)_(version 1.5 or greater)_.
20
+
1. A fork of the repo _(for any contributions)_.
13
21
1. A clone of the `react-native-website` repo.
14
22
15
23
### Installation
16
24
17
25
1.`cd react-native-website` to go into the project root.
18
26
1.`cd website` to go into the website portion of the project.
19
-
1.`yarn` to install the website's npm dependencies (or `npm install`, if not using Yarn).
27
+
1.`yarn`or `npm install`to install the website's npm dependencies.
20
28
21
29
### Running locally
22
30
23
-
1.`yarn start` to start the development server (powered by Docusaurus) (or `npm start`, if not using Yarn).
31
+
1.`yarn start`or `npm start`to start the development server _(powered by [Docusaurus](https://docusaurus.io))_.
24
32
1.`open http://localhost:3000/` to open the site in your favorite browser.
25
33
26
-
# Overview
34
+
## 📖 Overview
27
35
28
-
If you would like to _contribute an edit or addition to the docs,_ read through our [style guide](STYLEGUIDE.md) before you write anything. All our content is generated from markdown files you can find in the 'docs/' directory.
36
+
If you would like to **_contribute an edit or addition to the docs,_** read through our [style guide](STYLEGUIDE.md) before you write anything. All our content is generated from markdown files you can find in the `docs` directory.
29
37
30
-
_To edit the internals of how the site is built,_ you may want to get familiarized with how the site is built. The React Native website is a static site generated using [Docusaurus](https://docusaurus.io). The website configuration can be found in the 'website/' directory. Visit the Docusaurus website to learn more about all the available configuration options.
38
+
**_To edit the internals of how the site is built,_** you may want to get familiarized with how the site is built. The React Native website is a static site generated using [Docusaurus](https://docusaurus.io). The website configuration can be found in the `website` directory. Visit the Docusaurus website to learn more about all the available configuration options.
31
39
32
-
## Directory Structure
40
+
###Directory Structure
33
41
34
42
The following is a high-level overview of relevant files and folders.
35
43
@@ -47,7 +55,6 @@ react-native-website/
47
55
├── core/
48
56
├── pages/
49
57
│ └── en/
50
-
│ ├── ...
51
58
│ ├── index.js
52
59
│ └── ...
53
60
├── static/
@@ -60,71 +67,79 @@ react-native-website/
60
67
├── versioned_sidebars/
61
68
│ ├── version-0.5-sidebars.json
62
69
│ └── ...
70
+
├── package.json
63
71
├── showcase.json
64
72
├── sidebars.json
65
73
├── siteConfig.js
66
74
└── versions.json
67
75
```
68
76
69
-
## Documentation sources
77
+
###Documentation sources
70
78
71
-
As mentioned above, the 'docs/' folder contains the source files for all of the docs in the React Native website. In most cases, you will want to edit the files within this directory. If you're adding a new doc or you need to alter the order the docs appear in the sidebar, take a look at the 'sidebars.json' file in the 'website/' directory. The sidebars file contains a list of document ids that should match those defined in the header metadata (aka frontmatter) of the docs markdown files.
79
+
As mentioned above, the `docs` folder contains the source files for all of the docs in the React Native website. In most cases, you will want to edit the files within this directory. If you're adding a new doc or you need to alter the order the docs appear in the sidebar, take a look at the `sidebars.json` file in the `website` directory. The sidebars file contains a list of document ids that should match those defined in the header metadata (aka frontmatter) of the docs markdown files.
72
80
73
81
### Versioned docs
74
82
75
-
The React Native website is versioned as to allow users to go back and see the API reference docs for any given release. A new version of the website is generally made whenever there is a new React Native release. When this happens, any changes made to the 'docs/' and 'website/sidebars.json' files will be copied over to the corresponding location within 'website/versioned_docs/' and 'website/versioned_sidebars/'.
83
+
The React Native website is versioned as to allow users to go back and see the API reference docs for any given release. A new version of the website is generally generated whenever there is a new React Native release. When this happens, any changes made to the `docs` and `website/sidebars.json` files will be copied over to the corresponding location within `website/versioned_docs` and `website/versioned_sidebars`.
76
84
77
-
> Do not edit the auto-generated files within 'versioned_docs/' or 'versioned_sidebars/' unless you are sure it is necessary. Edits made to older versions will not be propagated to newer versions of the docs.
85
+
> **_Note:_**Do not edit the auto-generated files within `versioned_docs` or `versioned_sidebars` unless you are sure it is necessary. Edits made to older versions will not be propagated to newer versions of the docs.
78
86
79
-
Docusaurus keeps track of the list of versions for the site in the 'website/versions.json' file. The ordering of the versions in this file should be in reverse chronological order.
87
+
Docusaurus keeps track of the list of versions for the site in the `website/versions.json` file. The ordering of the versions in this file should be in reverse chronological order.
80
88
81
89
#### Cutting a new version
82
90
83
91
1.`cd react-native-website` to go into the project root.
84
92
1.`cd website` to go into the website portion of the project.
85
-
1. Run `yarn run version <newVersion>` where `<newVersion>` is the new version being released.
93
+
1. Run `yarn run version <newVersion>` or `npm run version <newVersion>` where `<newVersion>` is the new version being released.
94
+
95
+
## 🔧 Website configuration
86
96
87
-
## Website configuration
97
+
The main config file for the website can be found at `website/siteConfig.js`. This file tells [Docusaurus how to build the website](http://docusaurus.io/docs/en/site-config.html). Edits to this file are rarely necessary.
88
98
89
-
The main config file for the website can be found at 'website/siteConfig.js'. This file tells [Docusaurus how to build the website](http://docusaurus.io/docs/en/site-config.html). Edits to this file are rarely necessary.
99
+
The `core` subdirectory contains JavaScript and React components that are the core part of the website, such as the SnackPlayer.
90
100
91
-
The 'pages/' subdirectory contains the React components that make up the non-documentation pages of the site, such as the homepage.
101
+
The `pages` subdirectory contains the React components that make up the non-documentation pages of the site, such as the homepage.
92
102
93
-
The 'showcase.json' file contains the list of users that are highlighted in the React Native showcase.
103
+
The `showcase.json` file contains the list of users that are highlighted in the React Native showcase.
94
104
95
-
## Contributing
105
+
## 👏 Contributing
96
106
97
107
### Create a branch
98
108
99
109
1.`git checkout master` from any folder in your local `react-native-website` repository.
100
110
1.`git pull origin master` to ensure you have the latest main code.
101
-
1.`git checkout -b the-name-of-my-branch` (replacing `the-name-of-my-branch` with a suitable name) to create a branch.
111
+
1.`git checkout -b the-name-of-my-branch` to create a branch.
112
+
> replace `the-name-of-my-branch` with a suitable name, such as `update-animations-page`
102
113
103
114
### Make the change
104
115
105
-
1. Follow the "Running locally" instructions.
116
+
1. Follow the "[Running locally](#running-locally)" instructions.
106
117
1. Save the files and check in the browser.
107
-
1. Some changes may require a server restart to generate new files. (Pages in **/docs** always do!)
108
-
1. Edits to pages in **/docs** will only be visible in the latest version of the documentation, called "Next," under **/docs/next**. Visit **http://localhost:3000/docs/next/YOUR-DOCS-PAGE** to see your work.
118
+
1. Some changes may require a server restart to generate new files. (Pages in `docs` always do!)
119
+
1. Edits to pages in `docs` will only be visible in the latest version of the documentation, called "Next", located under `docs/next` path.
109
120
110
-
> `open http://localhost:3000/versions.html` to see older versions of the docs.
121
+
Visit **http://localhost:3000/docs/next/YOUR-DOCS-PAGE** to see your work.
122
+
123
+
> Visit http://localhost:3000/versions to see the list of all versions of the docs.
111
124
112
125
### Test the change
113
126
114
-
If possible, test any visual changes in all latest versions of Firefox and Chrome on desktop and Safari and Chrome on mobile.
127
+
If possible, test any visual changes in all latest versions of the following browsers:
128
+
129
+
- Chrome and Firefox on desktop.
130
+
- Chrome and Safari on mobile.
115
131
116
132
### Push it
117
133
118
-
1. Run `yarn prettier` to ensure your changes are consistent with other files in the repo.
119
-
1.`git add -A && git commit -m "My message"` (replacing `My message` with a commit message, such as `Fixed header logo on Android`) to stage and commit your changes.
134
+
1. Run `yarn prettier` or `npm run prettier` to ensure your changes are consistent with other files in the repo.
135
+
1.`git add -A && git commit -m "My message"` to stage and commit your changes.
136
+
> replace `My message` with a commit message, such as `Fixed header logo on Android`
120
137
1.`git push my-fork-name the-name-of-my-branch`
121
138
1. Go to the [react-native-website repo](https://github.com/facebook/react-native-website) and you should see recently pushed branches.
122
139
1. Follow GitHub's instructions.
123
-
1. If possible, include screenshots of visual changes.
124
-
125
-
---
140
+
1. Describe briefly your changes (in case of visual changes, please include screenshots).
0 commit comments