Skip to content

Commit

Permalink
Merge branch 'fix-edit-path' of github.com:facebook/react-native-webs…
Browse files Browse the repository at this point in the history
…ite into fix-edit-path
  • Loading branch information
Abbondanzo committed Feb 1, 2025
2 parents 47512a4 + 9fe252f commit e075bcc
Show file tree
Hide file tree
Showing 340 changed files with 45,528 additions and 1,448 deletions.
28 changes: 22 additions & 6 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,13 +1,29 @@
# Logs
logs
*.log
yarn-debug.log*
yarn-error.log*

node_modules
.DS_Store
*.local

# Editor directories and files
.vscode/*
.idea
.nvmrc
.docusaurus
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

website/build/
*.tsbuildinfo

scripts/lint-examples/out/

sync-api-docs/generatedComponentApiDocs.js
sync-api-docs/extracted.json

scripts/lint-examples/out/

website/.docusaurus
website/.cache-loader
website/build/
4 changes: 2 additions & 2 deletions CODE_OF_CONDUCT.md
Original file line number Diff line number Diff line change
Expand Up @@ -72,9 +72,9 @@ members of the project's leadership.
## Attribution

This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
available at <https://www.contributor-covenant.org/version/1/4/code-of-conduct.html>

[homepage]: https://www.contributor-covenant.org

For answers to common questions about this code of conduct, see
https://www.contributor-covenant.org/faq
<https://www.contributor-covenant.org/faq>
2 changes: 1 addition & 1 deletion CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ The [Open Source Guides](https://opensource.guide/) website has a collection of
- [How to Contribute to Open Source](https://opensource.guide/how-to-contribute/)
- [Building Welcoming Communities](https://opensource.guide/building-community/)

### Code of Conduct
## Code of Conduct

As a reminder, all contributors are expected to adhere to the [Code of Conduct](https://github.com/facebook/react-native-website/blob/main/CODE_OF_CONDUCT.md).

Expand Down
69 changes: 35 additions & 34 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,21 +16,21 @@ If you are looking for the source code of the [React Native Archive website](htt

### Prerequisites

1. [Git](https://git-scm.com/downloads).
1. [Node](https://nodejs.org/en/download/) _(version 12 or greater)_.
1. [Yarn](https://yarnpkg.com/lang/en/docs/install/) _(version 1.5 or greater)_.
1. A fork of the repo _(for any contributions)_.
1. A clone of the `react-native-website` repo.
1. [Git](https://git-scm.com/downloads).
1. [Node](https://nodejs.org/en/download/) _(version 12 or greater)_.
1. [Yarn](https://yarnpkg.com/lang/en/docs/install/) _(version 1.5 or greater)_.
1. A fork of the repo _(for any contributions)_.
1. A clone of the `react-native-website` repo.

### Installation

1. `cd react-native-website` to go into the project root.
1. Run `yarn` to install the website's workspace dependencies.
1. `cd react-native-website` to go into the project root.
1. Run `yarn` to install the website's workspace dependencies.

### Running locally

1. Run `yarn start` to start the development server _(powered by [Docusaurus](https://v2.docusaurus.io))_.
1. Open http://localhost:3000/ site in your favorite browser.
1. Run `yarn start` to start the development server _(powered by [Docusaurus](https://docusaurus.io))_.
1. Open <http://localhost:3000/> site in your favorite browser.

## 📖 Overview

Expand Down Expand Up @@ -84,12 +84,13 @@ react-native-website/
├── versioned_sidebars/
│ ├── [GENERATED VERSIONED SIDEBARS]
│ └── ...
├── docusaurus.config.js
├── docusaurus.config.ts
├── package.json
├── showcase.json
├── sidebars.json
├── sidebarsArchitecture.json
├── sidebarsContributing.json
├── sidebars.ts
├── sidebarsArchitecture.ts
├── sidebarsCommunity.ts
├── sidebarsContributing.ts
└── versions.json
```

Expand All @@ -99,11 +100,11 @@ As mentioned above, the `docs` folder contains the source files for docs from "G
The doc files for the "Architecture" and "Contribution" tabs are located inside `website` in the respective directories (unversioned/static docs).
In most cases, you will only want to edit the files within those directories.

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`, `sidebarsArchitecture.json` and `sidebarsContributing.json` files in the `website` directory. The sidebar files contain a list of document ids that should match those defined in the header metadata (aka frontmatter) of the docs markdown files.
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.ts`, `sidebarsArchitecture.ts` and `sidebarsContributing.ts` files in the `website` directory. The sidebar files contain a list of document ids that should match those defined in the header metadata (aka frontmatter) of the docs markdown files.

### Versioned docs

Part of the React Native website is versioned to allow users to go back and see the Guides or API reference documentation 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`.
Part of the React Native website is versioned to allow users to go back and see the Guides or API reference documentation 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.ts` files will be copied over to the corresponding location within `website/versioned_docs` and `website/versioned_sidebars`.

> **_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 versioned docs.
Expand All @@ -119,13 +120,13 @@ This can be done by updating the `package.json` and configuration files in `scri

##### After Release

1. `cd react-native-website` to go into the project root.
1. `cd website` to go into the website portion of the project.
1. Run `yarn version:cut <newVersion>` where `<newVersion>` is the new version being released.
1. `cd react-native-website` to go into the project root.
1. `cd website` to go into the website portion of the project.
1. Run `yarn version:cut <newVersion>` where `<newVersion>` is the new version being released.

## 🔧 Website configuration

The main config file for the website can be found at `website/docusaurus.config.js`. This file tells [Docusaurus how to build the website](https://v2.docusaurus.io/docs/configuration). Edits to this file are rarely necessary.
The main config file for the website can be found at `website/docusaurus.config.ts`. This file tells [Docusaurus how to build the website](https://docusaurus.io/docs/configuration). Edits to this file are rarely necessary.

The `core` subdirectory contains JavaScript and React components that are the core part of the website.

Expand All @@ -139,21 +140,21 @@ The `showcase.json` file contains the list of users that are highlighted in the

### Create a branch

1. `git checkout main` from any folder in your local `react-native-website` repository.
1. `git pull origin main` to ensure you have the latest main code.
1. `git checkout -b the-name-of-my-branch` to create a branch.
1. `git checkout main` from any folder in your local `react-native-website` repository.
1. `git pull origin main` to ensure you have the latest main code.
1. `git checkout -b the-name-of-my-branch` to create a branch.
> replace `the-name-of-my-branch` with a suitable name, such as `update-animations-page`
### Make the change

1. Follow the "[Running locally](#running-locally)" instructions.
1. Save the files and check in the browser.
1. Some changes may require a server restart to generate new files. (Pages in `docs` always do!)
1. Edits to pages in `docs` will only be visible in the latest version of the documentation, called "Next", located under the `docs/next` path.
1. Follow the "[Running locally](#running-locally)" instructions.
1. Save the files and check in the browser.
1. Some changes may require a server restart to generate new files. (Pages in `docs` always do!)
1. Edits to pages in `docs` will only be visible in the latest version of the documentation, called "Next", located under the `docs/next` path.

Visit **http://localhost:3000/docs/next/YOUR-DOCS-PAGE** to see your work.
Visit **<http://localhost:3000/docs/next/YOUR-DOCS-PAGE>** to see your work.

> Visit http://localhost:3000/versions to see the list of all versions of the docs.
> Visit <http://localhost:3000/versions> to see the list of all versions of the docs.
### Test the change

Expand All @@ -164,13 +165,13 @@ If possible, test any visual changes in all latest versions of the following bro

### Push it

1. Run `yarn prettier` and `yarn language:lint` in `./website` directory to ensure your changes are consistent with other files in the repo.
1. `git add -A && git commit -m "My message"` to stage and commit your changes.
1. Run `yarn prettier` and `yarn language:lint` in `./website` directory to ensure your changes are consistent with other files in the repo.
1. `git add -A && git commit -m "My message"` to stage and commit your changes.
> replace `My message` with a commit message, such as `Fixed header logo on Android`
1. `git push my-fork-name the-name-of-my-branch`
1. Go to the [react-native-website repo](https://github.com/facebook/react-native-website) and you should see recently pushed branches.
1. Follow GitHub's instructions.
1. Describe briefly your changes (in case of visual changes, please include screenshots).
1. `git push my-fork-name the-name-of-my-branch`
1. Go to the [react-native-website repo](https://github.com/facebook/react-native-website) and you should see recently pushed branches.
1. Follow GitHub's instructions.
1. Describe briefly your changes (in case of visual changes, please include screenshots).

## 📄 License

Expand Down
2 changes: 1 addition & 1 deletion STYLEGUIDE.md
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,7 @@ When it comes to describing property values, be definitive in what is and is not

## Other grammar policies

* Capitalize “Hooks.”
- Capitalize “Hooks.”

## Empathize with readers

Expand Down
31 changes: 15 additions & 16 deletions docs/_integration-with-existing-apps-ios.md
Original file line number Diff line number Diff line change
Expand Up @@ -28,11 +28,11 @@ To ensure a smooth experience, create a new folder for your integrated React Nat

Go to the root directory and run the following command:

```
curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/0.76-stable/template/package.json
```shell
curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/0.77-stable/template/package.json
```

This will copy the `package.json` [file from the Community template](https://github.com/react-native-community/template/blob/0.76-stable/template/package.json) to your project.
This will copy the `package.json` [file from the Community template](https://github.com/react-native-community/template/blob/0.77-stable/template/package.json) to your project.

Next, install the NPM packages by running:

Expand All @@ -55,7 +55,7 @@ yarn install

Installation process has created a new `node_modules` folder. This folder stores all the JavaScript dependencies required to build your project.

Add `node_modules/` to your `.gitignore` file (here the [Community default one](https://github.com/react-native-community/template/blob/0.76-stable/template/_gitignore)).
Add `node_modules/` to your `.gitignore` file (here the [Community default one](https://github.com/react-native-community/template/blob/0.77-stable/template/_gitignore)).

### 3. Install Development tools

Expand Down Expand Up @@ -87,22 +87,22 @@ To configure CocoaPods, we need two files:
For the **Gemfile**, go to the root directory of your project and run this command

```sh
curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/0.76-stable/template/Gemfile
curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/0.77-stable/template/Gemfile
```

This will download the Gemfile from the template.
Similarly, for the **Podfile**, go to the `ios` folder of your project and run

```sh
curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/0.76-stable/template/ios/Podfile
curl -O https://raw.githubusercontent.com/react-native-community/template/refs/heads/0.77-stable/template/ios/Podfile
```

Please use the Community Template as a reference point for the [Gemfile](https://github.com/react-native-community/template/blob/0.76-stable/template/Gemfile) and for the [Podfile](https://github.com/react-native-community/template/blob/0.76-stable/template/ios/Podfile).
Please use the Community Template as a reference point for the [Gemfile](https://github.com/react-native-community/template/blob/0.77-stable/template/Gemfile) and for the [Podfile](https://github.com/react-native-community/template/blob/0.77-stable/template/ios/Podfile).

:::note
Remember to change [this line](https://github.com/react-native-community/template/blob/0.76-stable/template/ios/Podfile#L17) and [this line](https://github.com/react-native-community/template/blob/0.76-stable/template/ios/Podfile#L26) of the Podfile to match the name of your app.
Remember to change [this line](https://github.com/react-native-community/template/blob/0.77-stable/template/ios/Podfile#L17) and [this line](https://github.com/react-native-community/template/blob/0.77-stable/template/ios/Podfile#L26) of the Podfile to match the name of your app.

If your app don't have tests, remember to remove [this block](https://github.com/react-native-community/template/blob/0.76-stable/template/ios/Podfile#L26-L29).
If your app don't have tests, remember to remove [this block](https://github.com/react-native-community/template/blob/0.77-stable/template/ios/Podfile#L26-L29).
:::

Now, we need to run a couple of extra commands to install the Ruby gems and the Pods.
Expand All @@ -127,7 +127,7 @@ First, create an empty `index.js` file in the root of your React Native project.

`index.js` is the starting point for React Native applications, and it is always required. It can be a small file that `import`s other file that are part of your React Native component or application, or it can contain all the code that is needed for it.

Our `index.js` should look as follows (here the [Community template file as reference](https://github.com/react-native-community/template/blob/0.76-stable/template/index.js)):
Our `index.js` should look as follows (here the [Community template file as reference](https://github.com/react-native-community/template/blob/0.77-stable/template/index.js)):

```js
import {AppRegistry} from 'react-native';
Expand All @@ -138,7 +138,7 @@ AppRegistry.registerComponent('HelloWorld', () => App);

### Create a `App.tsx` file

Let's create an `App.tsx` file. This is a [TypeScript](https://www.typescriptlang.org/) file that can have [JSX](<https://en.wikipedia.org/wiki/JSX_(JavaScript)>) expressions. It contains the root React Native component that we will integrate into our iOS application ([link](https://github.com/react-native-community/template/blob/0.76-stable/template/App.tsx)):
Let's create an `App.tsx` file. This is a [TypeScript](https://www.typescriptlang.org/) file that can have [JSX](<https://en.wikipedia.org/wiki/JSX_(JavaScript)>) expressions. It contains the root React Native component that we will integrate into our iOS application ([link](https://github.com/react-native-community/template/blob/0.77-stable/template/App.tsx)):

```tsx
import React from 'react';
Expand Down Expand Up @@ -211,7 +211,7 @@ const styles = StyleSheet.create({
export default App;
```

Here the [Community template file as reference](https://github.com/react-native-community/template/blob/0.76-stable/template/App.tsx)
Here the [Community template file as reference](https://github.com/react-native-community/template/blob/0.77-stable/template/App.tsx)

## 5. Integrating with your iOS code

Expand Down Expand Up @@ -279,7 +279,7 @@ First, we need to extends the `AppDelegate` to inherit from one of the classes p

To achieve this, we have to modify the `AppDelegate.h` file and the `AppDelegate.m` files:

1. Open the `AppDelegate.h` files and modify it as it follows (See the official template's [AppDelegate.h](https://github.com/react-native-community/template/blob/0.76-stable/template/ios/HelloWorld/AppDelegate.h) as reference):
1. Open the `AppDelegate.h` files and modify it as it follows (See the official template's [AppDelegate.h](https://github.com/react-native-community/template/blob/0.77-stable/template/ios/HelloWorld/AppDelegate.h) as reference):

```diff title="AppDelegate.h changes"
#import <UIKit/UIKit.h>
Expand All @@ -292,7 +292,7 @@ To achieve this, we have to modify the `AppDelegate.h` file and the `AppDelegate
@end
```

2. Open the `AppDelegate.mm` file and modify it as it follows (See the official template's [AppDelegate.mm](https://github.com/react-native-community/template/blob/0.76-stable/template/ios/HelloWorld/AppDelegate.mm) as reference
2. Open the `AppDelegate.mm` file and modify it as it follows (See the official template's [AppDelegate.mm](https://github.com/react-native-community/template/blob/0.77-stable/template/ios/HelloWorld/AppDelegate.mm) as reference

```diff title="AppDelegate.mm"
#import "AppDelegate.h"
Expand Down Expand Up @@ -349,7 +349,6 @@ To achieve this, we have to modify the `AppDelegate.swift`
```diff title="AppDelegate.swift"
import UIKit
+import React_RCTAppDelegate
+import React_RCTAppDelegate

@main
-class AppDelegate: UIResponder, UIApplicationDelegate {
Expand Down Expand Up @@ -551,7 +550,7 @@ const {getDefaultConfig} = require('@react-native/metro-config');
module.exports = getDefaultConfig(__dirname);
```

You can checkout the [metro.config.js file](https://github.com/react-native-community/template/blob/0.76-stable/template/metro.config.js) from the Community template file as reference.
You can checkout the [metro.config.js file](https://github.com/react-native-community/template/blob/0.77-stable/template/metro.config.js) from the Community template file as reference.

Once you have the config file in place, you can run the bundler. Run the following command in the root directory of your project:

Expand Down
Loading

0 comments on commit e075bcc

Please sign in to comment.