fix(react-native): repoint dead links and add missing official resources (#10275)
- Replace 404 links for Metro (facebook.github.io/metro), RAM bundles (docs page removed) and React Test Renderer (Jest tutorial removed) - Remove the GeeksforGeeks link, which the contributing guide disallows - Point Async Storage links at the community package instead of the reactnative.dev page that now says it was removed from core - Update environment setup links to the current "Set Up Your Environment" and "Get Started Without a Framework" pages - Add official resources to topics that had none: Testing, View, Listings, ListViews, Understand Frame Rates - Add React Native DevTools, NetInfo, Fetch API and WebSocket docs where the topic only linked a generic article - Tighten outdated sentences (LogBox, RAM bundles, react-test-renderer deprecation, community CLI) without lengthening descriptions
This commit is contained in:
Nicolas Charpentier authored and GitHub committed
1 parent
243fe3f028
commit
1a330f5380
19 files changed
+63
-31
No files matched your search
@@ -1,7 +1,8 @@
|
||||
# Connectivity Status
|
||||
|
||||
Connectivity refers to the mechanisms that allow data transfer between your React Native app and external resources through various means of communication. It is essential to ensure efficient communication with APIs, servers, and external systems, to update your app's data, fetching content or enabling real-time interactions.
|
||||
Connectivity refers to the mechanisms that allow data transfer between your React Native app and external resources through various means of communication. It is essential to ensure efficient communication with APIs, servers, and external systems, to update your app's data, fetching content or enabling real-time interactions. The community NetInfo package reports the device's connection type and whether the internet is reachable, and lets you subscribe to changes so the app can react when the user goes offline.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@Managing network connection status in React Native](https://blog.logrocket.com/managing-network-connection-status-in-react-native/)
|
||||
- [@opensource@React Native NetInfo](https://github.com/react-native-netinfo/react-native-netinfo)
|
||||
- [@article@Managing network connection status in React Native](https://blog.logrocket.com/managing-network-connection-status-in-react-native/)
|
||||
@@ -1,7 +1,8 @@
|
||||
# DevTools
|
||||
|
||||
React Native DevTools are essential tools that help developers debug and optimize their applications during the development process.
|
||||
React Native DevTools is the modern, built-in debugging experience for React Native. It is designed for debugging React app concerns, such as inspecting components, stepping through JavaScript, and profiling, while the native layers are still debugged with the tools in Android Studio and Xcode.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Devtools](https://reactnative.dev/docs/react-devtools)
|
||||
- [@official@React Native DevTools](https://reactnative.dev/docs/react-native-devtools)
|
||||
- [@official@React DevTools](https://reactnative.dev/docs/react-devtools)
|
||||
@@ -10,9 +10,10 @@ Expo CLI is a command-line tool built for creating and managing React Native pro
|
||||
React Native CLI
|
||||
----------------
|
||||
|
||||
React Native CLI is the official command-line interface for building native mobile apps using React Native. This method requires you to manually set up the native development environment and tools needed for iOS and Android app development.
|
||||
The React Native Community CLI (`@react-native-community/cli`) lets you start a project without a framework. This method requires you to manually set up the native development environment and tools needed for iOS and Android app development.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@React Native CLI](https://reactnative.dev/docs/environment-setup?guide=native)
|
||||
- [@official@Expo CLI Quickstart](https://docs.expo.dev/get-started/create-a-project)
|
||||
- [@official@Set Up Your Environment](https://reactnative.dev/docs/set-up-your-environment)
|
||||
- [@official@Get Started Without a Framework](https://reactnative.dev/docs/getting-started-without-a-framework)
|
||||
- [@official@Create a project with Expo](https://docs.expo.dev/get-started/create-a-project/)
|
||||
@@ -4,4 +4,5 @@ _Fetch_ is a JavaScript function available in React Native that is used to make
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@Managing network connection status in React Native](https://blog.logrocket.com/managing-network-connection-status-in-react-native/)
|
||||
- [@official@Networking](https://reactnative.dev/docs/network)
|
||||
- [@official@Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
|
||||
@@ -1,3 +1,9 @@
|
||||
# Listings
|
||||
|
||||
Listings in React Native — primarily `FlatList` and `SectionList` — are the core components for rendering scrollable lists. They are optimized for large data sets with lazy row rendering, pull-to-refresh, header and footer support, and per-row memoization for better performance.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Using List Views](https://reactnative.dev/docs/using-a-listview)
|
||||
- [@official@FlatList](https://reactnative.dev/docs/flatlist)
|
||||
- [@official@SectionList](https://reactnative.dev/docs/sectionlist)
|
||||
@@ -1,3 +1,9 @@
|
||||
# ListViews
|
||||
|
||||
`ListView` was the original list component in React Native, now superseded by the more efficient `FlatList` and `SectionList`. These components render data in a performant, scrollable way by only mounting rows near the viewport, and support features like separators, empty states, and pull-to-refresh.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Using List Views](https://reactnative.dev/docs/using-a-listview)
|
||||
- [@official@FlatList](https://reactnative.dev/docs/flatlist)
|
||||
- [@official@SectionList](https://reactnative.dev/docs/sectionlist)
|
||||
@@ -1,7 +1,7 @@
|
||||
# LogBox
|
||||
|
||||
LogBox is a new feature added to React Native to improve how logs are displayed and managed in your development environment. It provides better visualization and organization of logs, warnings, and errors, making it easier for developers to address issues in their code.
|
||||
LogBox is React Native's in-app display for logs, warnings, and errors during development. It groups and formats them, with stack traces for errors, so problems are easier to spot and address in your code.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Debugging LogBox](https://reactnative.dev/docs/debugging#logbox)
|
||||
- [@official@Debugging LogBox](https://reactnative.dev/docs/debugging#logbox)
|
||||
@@ -4,4 +4,5 @@ Metro Bundler is the default bundler for React Native applications. It's a JavaS
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Metro Bundler](https://facebook.github.io/metro/)
|
||||
- [@official@Metro Bundler](https://metrobundler.dev/)
|
||||
- [@official@Metro in React Native](https://reactnative.dev/docs/metro)
|
||||
@@ -6,7 +6,7 @@ These are just a few examples of additional storage options for React Native. De
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Async Storage](https://reactnative.dev/docs/asyncstorage)
|
||||
- [@opensource@Async Storage](https://github.com/react-native-async-storage/async-storage)
|
||||
- [@opensource@Realm - GitHub](https://github.com/realm/realm-js)
|
||||
- [@article@Firebase Realtime Database](https://firebase.google.com/docs/database)
|
||||
- [@feed@Explore top posts about Storage](https://app.daily.dev/tags/storage?ref=roadmapsh)
|
||||
- [@feed@Explore top posts about Storage](https://app.daily.dev/tags/storage?ref=roadmapsh)
|
||||
@@ -1,7 +1,7 @@
|
||||
# RAM Bundles + Inline Requires
|
||||
|
||||
If you have a large app you may want to consider the Random Access Modules (RAM) bundle format, and using inline requires. This is useful for apps that have a large number of screens which may not ever be opened during a typical usage of the app. Generally it is useful to apps that have large amounts of code that are not needed for a while after startup. For instance the app includes complicated profile screens or lesser used features, but most sessions only involve visiting the main screen of the app for updates. We can optimize the loading of the bundle by using the RAM format and requiring those features and screens inline (when they are actually used).
|
||||
Inline requires defer loading a module until it is first used instead of at startup, which trims the time to interactive for apps with many screens or rarely used features. Random Access Module (RAM) bundles are an older format that served the same purpose by loading modules on demand, but they are not supported with Hermes, whose bytecode gives the same or better startup performance. On current React Native versions, prefer Hermes, lazy-loading screen-level components, and inline requires, which the React Native CLI applies automatically.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@RAM Bundles and Inline Requires](https://reactnative.dev/docs/ram-bundles-inline-requires)
|
||||
- [@official@Optimizing JavaScript loading](https://reactnative.dev/docs/optimizing-javascript-loading)
|
||||
@@ -1,8 +1,7 @@
|
||||
# React Native Async Storage
|
||||
|
||||
React Native AsyncStorage is an unencrypted, asynchronous, persistent key-value storage system that allows developers to store data globally within their applications. It is primarily used for persisting data offline, making it suitable for scenarios like saving user preferences or session data.
|
||||
Async Storage is an unencrypted, asynchronous, persistent key-value storage system for React Native. It was removed from React Native core and now lives in the community package `@react-native-async-storage/async-storage`. It is primarily used for persisting small amounts of data offline, such as user preferences or session data.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Async Storage](https://reactnative.dev/docs/asyncstorage)
|
||||
- [@opensource@Async Storage - GitHub](https://github.com/react-native-async-storage/async-storage)
|
||||
- [@opensource@Async Storage](https://github.com/react-native-async-storage/async-storage)
|
||||
@@ -1,7 +1,8 @@
|
||||
# React Native CLI
|
||||
|
||||
React Native CLI is the official command-line interface for building native mobile apps using React Native. This method requires you to manually set up the native development environment and tools needed for iOS and Android app development.
|
||||
The React Native Community CLI (`@react-native-community/cli`) is the command-line tool for creating and running React Native apps without a framework such as Expo. This method requires you to manually set up the native development environment and tools needed for iOS and Android app development.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@React Native CLI](https://reactnative.dev/docs/environment-setup?guide=native)
|
||||
- [@official@Get Started Without a Framework](https://reactnative.dev/docs/getting-started-without-a-framework)
|
||||
- [@opensource@React Native Community CLI](https://github.com/react-native-community/cli)
|
||||
@@ -1,8 +1,9 @@
|
||||
# React Test Renderer
|
||||
|
||||
React Test Renderer is a library provided by the React team that allows you to render React components as JavaScript objects without depending on the DOM or a native mobile environment. It can be used to test components in Node.js environments where the actual rendering is not required.
|
||||
React Test Renderer is a library provided by the React team that allows you to render React components as JavaScript objects without depending on the DOM or a native mobile environment. The package is now deprecated, and the React team recommends migrating tests to React Native Testing Library instead.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@React Test Renderer](https://jestjs.io/docs/tutorial-react)
|
||||
- [@feed@Explore top posts about React](https://app.daily.dev/tags/react?ref=roadmapsh)
|
||||
- [@official@react-test-renderer Deprecation Warnings](https://react.dev/warnings/react-test-renderer)
|
||||
- [@official@Testing React Native Apps with Jest](https://jestjs.io/docs/tutorial-react-native)
|
||||
- [@feed@Explore top posts about React](https://app.daily.dev/tags/react?ref=roadmapsh)
|
||||
@@ -11,5 +11,5 @@ Choose the storage option that best fits your app's requirements and use cases.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@AsyncStorage](https://reactnative.dev/docs/asyncstorage)
|
||||
- [@article@Best Data Storage Option for React Native Apps](https://dev.to/ammarahmed/best-data-storage-option-for-react-native-apps-42k)
|
||||
- [@opensource@Async Storage](https://github.com/react-native-async-storage/async-storage)
|
||||
- [@article@Best Data Storage Option for React Native Apps](https://dev.to/ammarahmed/best-data-storage-option-for-react-native-apps-42k)
|
||||
@@ -1,3 +1,9 @@
|
||||
# Testing
|
||||
|
||||
When it comes to testing, you can use a combination of Jest, React Test Renderer, React Native Testing Library, Detox and Appium for all sorts of API needs.
|
||||
Testing a React Native app usually combines Jest for unit and component tests, React Native Testing Library for rendering components and interacting with them the way a user would, and an end-to-end tool such as Detox, Appium, or Maestro that drives the app on a simulator or device.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Testing Overview](https://reactnative.dev/docs/testing-overview)
|
||||
- [@official@Detox](https://wix.github.io/Detox/)
|
||||
- [@opensource@React Native Testing Library](https://github.com/callstack/react-native-testing-library)
|
||||
@@ -2,4 +2,8 @@
|
||||
|
||||
Frame rates represent the number of frames (or images) displayed per second in an animation or video. The performance of a React Native application can be highly impacted by the frame rate, so it is important to optimize your application for the best possible user experience. Higher frame rates provide smoother animations, but may require more system resources. To achieve the desired frame rate, the application should ensure that each frame is computed and rendered within the time budget.
|
||||
|
||||
To achieve high frame rates and smooth animations, developers can utilize the `Animated` library, which offers methods and components for efficient animation management. For instance, the library allows for declarative animation definitions, minimizes unnecessary render cycles, and enables the use of the native driver to offload animations from the JavaScript thread. By adhering to best practices and leveraging the `Animated` library, developers can enhance their React Native applications' performance and deliver high-quality animations.
|
||||
To achieve high frame rates and smooth animations, developers can utilize the `Animated` library, which offers methods and components for efficient animation management. For instance, the library allows for declarative animation definitions, minimizes unnecessary render cycles, and enables the use of the native driver to offload animations from the JavaScript thread. By adhering to best practices and leveraging the `Animated` library, developers can enhance their React Native applications' performance and deliver high-quality animations.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@Performance Overview](https://reactnative.dev/docs/performance)
|
||||
@@ -1,3 +1,7 @@
|
||||
# View
|
||||
|
||||
`View` is the fundamental layout container in React Native, similar to a `div` in web development. It supports flexbox layout, styling, touch handling, and nesting, and is the building block for nearly every screen and component.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@official@View](https://reactnative.dev/docs/view)
|
||||
@@ -1,7 +1,8 @@
|
||||
# Websockets
|
||||
|
||||
WebSockets are a protocol that allows full-duplex communication between a client and a server over a single, long-lived connection. They are useful when real-time communication is needed, such as in chat applications, online gaming, or financial trading platforms.
|
||||
WebSockets are a protocol that allows full-duplex communication between a client and a server over a single, long-lived connection. They are useful when real-time communication is needed, such as in chat applications, online gaming, or financial trading platforms. React Native ships with a built-in `WebSocket` implementation that follows the same API as the browser.
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@The WebSocket API (WebSockets) - Web APIs](https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API)
|
||||
- [@official@Networking: WebSocket Support](https://reactnative.dev/docs/network)
|
||||
- [@article@The WebSocket API (WebSockets) - Web APIs](https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API)
|
||||
@@ -4,5 +4,4 @@ React Native is a popular framework for developing native mobile applications us
|
||||
|
||||
Visit the following resources to learn more:
|
||||
|
||||
- [@article@Why You Should Choose React Native?](https://www.geeksforgeeks.org/why-you-should-choose-react-native/)
|
||||
- [@article@React Native: What is it? and, Why is it used?](https://medium.com/@thinkwik/react-native-what-is-it-and-why-is-it-used-b132c3581df)
|
||||
- [@article@React Native: What is it? and, Why is it used?](https://medium.com/@thinkwik/react-native-what-is-it-and-why-is-it-used-b132c3581df)
|
||||
Reference in new issue
Block a user