どのように移行するには、バージョン18を反応させるアプリを反応させる

導入

反応は、ちょうど彼らの図書館の新しいバージョンで出ました:反応版18.私はいくつかのアプリを私はしばらくの間、我々は作成反応アプリとブートストラップして維持してきた.バージョン18に移行する方法と私が道に沿って走った問題について行きます.
Hereあなたが反応18の変更のリストを見つけることができます.
また、私はそれに私の考えのために小さいメモを持ちます.

ヒア を作成する反応アプリ移行反応18

移行の実際のプロセスはかなり速いです.必要な依存関係をインストールしましょう.

yarn add react react-dom

Create Readerアプリの背後にあるチームも移行プロセスを支援し、任意の新しいアプリをボックスからそれを来るようにバージョン5.0.1で出てきた

npm install --save --save-exact [email protected] 

or 

yarn add --exact [email protected]

あなたがTypeScriptを使用しているならば、あなたのタイプを反応のためにだけでなく異なる第三者図書館のために更新するのを忘れないでください.多くのアプリを更新している.

yarn add @types/react @types/react-dom @types/node --dev

強制的な変更

まず最初に我々がしなければならないことは、ルートノードがどう反応してレンダリングされるかを変更することです.最初のコードブロックは、もともとどのように見えるかです.

import ReactDOM from 'react-dom'; 
import App from './App'; 

ReactDOM.render( <App /> , document.getElementById('root') );

では、新しく追加されたcreateroot関数を使います.

import { createRoot } from 'react-dom/client'; 
import App from './App'; 

const container = document.getElementById('root'); 
const root = createRoot(container); 

root.render(<App />);

反応18に反応するアプリ移行

typescriptを使わないならば、この部分をスキップすることができます.
まず最初に、我々がどれだけ多くの誤りを処理しなければならないかを調べましょう.これはプロジェクトとプロジェクトによって異なります.多くの互換性のないサードパーティのライブラリによって異なります.
次のコマンドを実行します.
我々は36のエラーを解決するために得た.幸いにも、それらのほとんどは同じです.

私はこのプロジェクトでを使いました、そして、UIラジオコンポーネントにはいくつかの誤りがありました.例えば、私はonChangeプロップからパラメタをとったsetView機能を持ちました.いくつかの理由で、私はEとデータパラメータのタイピングを失った.

Parameter 'data' implicitly has an 'any' type. onChange={(e, data) => setView(data.value as number)}

私はF 12(Windowsユーザー)を打つか、右クリックして、タイプ定義に向かって行きます.OnChangeのプロップでは、戻り値をチェックし、手動で関数に型を設定します.
Semantic UI
ライブラリから型をインポートし、関数自体の型を設定してください.

import type { CheckboxProps } from 'semantic-ui-react';


<Radio 
// other props 
onChange={(e: React.FormEvent<HTMLInputElement>, data: CheckboxProps) => { // whatever your function does } } 
/>

反応18に反応するアプリ移行

私も、プロジェクトのエラーを追跡するために、sentryライブラリを使用します.それがどのように働くかについて、 .歩哨については、ErrorBoundationコンポーネントを使用してエラーが発生しました.これは多分パッチされるでしょう、しかし、我々はそれまでの時間の前にそれをすることができます.
バージョン18では、子供たちに小道具の中で明示的に宣言される必要があります.

error TS2769: No overload matches this call. Overload 1 of 2, '(props: ErrorBoundaryProps | Readonly<ErrorBoundaryProps>): ErrorBoundary', gave the following error.

ありがたいことに、これを修正するパッチパッケージと呼ばれるライブラリがあります.インストールしましょう.

yarn add patch-package --dev

前に、ErrorBoundaryの型定義をチェックしてみましょう.F 12を打つか、右クリックして、タイプ定義に行ってください.
Here’s a quick write-up
疑わしいとして、型は子供支柱を持っていません.反応に設定して追加しましょう.ノードを返します.

export declare type ErrorBoundaryProps = { 
children: React.ReactNode;
 //...rest of the type, just ignore it

パッチパッケージがこの変更を認識するためには、以下のコマンドを端末で実行します:

npx patch-package @sentry/react

これにより、ライブラリ内のパッチの変更を示すファイルが作成されます.

diff --git a/node_modules/@sentry/react/types/errorboundary.d.ts b/node_modules/@sentry/react/types/errorboundary.d.ts
index 4e1f326..779e0e7 100644 
--- a/node_modules/@sentry/react/types/errorboundary.d.ts 
+++ b/node_modules/@sentry/react/types/errorboundary.d.ts 
@@ -9,6 +9,7 @@ export declare type FallbackRender = (errorData: {
 resetError(): void;
 }) => React.ReactElement; export declare type ErrorBoundaryProps = { 
+ children: React.ReactNode; 
/ **If a Sentry report dialog should be rendered on error */ showDialog?: boolean; 
/**

最後のステップは、私たちのパッケージのスクリプトに次の行を追加することです.JSON

"scripts": {
 // ...other scripts 
"postinstall": "patch-package" 
}

サイデステ

小さなライブラリとしては、パッチをしたくない場合は、ちょうどしばらくの間、エラーを無視したいと思います.(あるいは、あなたはそれを修正するためにPRを開くことができます!😬) ちょっとエラーの直前にファイルに無視してください.

包み上げる

を作成する反応アプリはまだ最も広く使用されてメソッドをブートストラップするので、いくつかのユーザーにとっては非常に重要です移行することができるアプリです.🚀
あなたがこれを好むならば、 でこれのような他のポストをチェックしてください
あなたがこれが好きであるならば、私と連絡をとってください
私の自由な開発者ロードマップと毎週のハイテク産業ニュースをRelatable Codeでチェックしてください.