反応をアップグレードするために反応するアプリのゲームを18に反応させる

私が私のアップグレードとして、この(短い)ポストで私に加わってくださいWord-Search React game 反応18の新しい、光沢のあるバージョンに.
メッセージは大きくてはっきりしましたlatest React conf :

だから私は“ニース、それを使用して起動する私のワード検索ゲームをアップグレードする良い時間のようだ.”しかし、私の注意を引きました、そして、そこで、我々は現在ここにいます-反応18へのアップグレード.レッツゴー!
マイWord-Search game プロジェクトを開始(と続けて)を作成する反応アプリプロジェクトとして現在反応している😱). 私の使命は、18を反応させるためにそれをアップグレードすることです.私は新しい機能のいずれかを使用して、このアップグレードのコースで18オファーを反応させるつもりはないが、ちょうどそれがすべてのままでいることを確認します.
いつものように、私はdocs , そして、確かに、彼らは私を説明するもう一つの文書に連れて行きましたupgrading to React 18 on the client .
まず最初に、最初のステップは、実際に新しい反応版をインストールすることですが、新しいバージョンは何ですか?医者は18にアップグレードすると言います、しかし、それは18.0.0ですか?18.0.2 .確かにアルファやベータ、右?
あなたは、反応の最新版をインストールしてみましょう.

npm install react@latest react-dom@latest

まあ、いいえ.最新バージョンは17.0.2ですので、どうしますか?
私はダウンしてReact Conf recap 我々がどのようにインストールするべきかを見つけるために、反応18.ああ、私は今それを参照してください-私は反応RC(リリース候補)のバージョンをインストールする必要がありますthis discussion 2018年5月21日に発売されたReact - 18ワーキンググループでは、2021年7月ごろに最終リリースが利用できることを示唆している

心配しないでください-リリース候補をインストールしましょう

npm install react@rc react-dom@rc

はい、だから私のパッケージ.JSONは現在、新しいRCバージョンを持っています.

"react": "^18.0.0-rc.0",
"react-dom": "^18.0.0-rc.0",

試してみて、アプリケーションを起動し、火花を参照してください
私がアップグレードされたCREATE APPプロジェクトの「NPM Start」を実行するとき、私が気がついたおかしいものは、気がつきました.これはルートtsconfigを変更します.JSONファイル「JSX」プロパティーと現在の代わりに

"jsx": "react"

次のようになります.

"jsx": "react-jsx"

読書TS docs 私は、この変化が反応17で導入されたことを集めて、TSCがどのように反応17で、そして、上記のJSXを追放するかについてしなければなりません.知って良い.
ゲームはアップです!試してみましょう.私は散らばった手紙から単語をつかんでいます、アニメーションとすべてはよく働きます.私は私の答えをチェックするために単語パネルの一致する単語にそれをドロップします.ブーム.
私は浮動小数点文字のスタイルを更新するという問題があるようです.

😳
よく、私は少し、私が要求されるように移行を完了しなかったので、私は少し騙されました.

// before
const container = document.getElementById('root');
ReactDOM.render(<App />, container);

// after
const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);
root.render(<App/>);

それをして、私が得ているエラーを修理するかどうか見ましょう.
このレンダリングコードは次のようになります.

const rootElement = document.getElementById('root');
const render = () => {
   ReactDOM.render(
       <Provider store={gameStore}>
           <App />
       </Provider>,
       rootElement || document.createElement('div')
   );
};

そして、以下のように反応18と互換性があるように変更しました.

const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);
const render = () => {
   root.render(
       <Provider store={gameStore}>
           <App />
       </Provider>
   );
};

私がしたエラーがなくなったかどうかチェックしましょう.恐ろしい.ゲームは予想通りに動作する.
テストはどうですか.
すべてのテストパスが、彼らは今彼らに新しい警告を持っている:

Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot

テストライブラリの反応は、最新のアルファ版をインストールすることです

npm i @testing-library/react@alpha -D

うん.今テストを実行する警告がありません.私はアルファ版でそれが快適であると感じていません、しかし、私は現在このものと一緒に暮らすことができます.
そして、私の単語の検索ゲームは現在、反応18のRCバージョンで更新され、すべてがうまく動作しているようだ.ゲームが関与していないので、反応18の新機能のほとんどは無関係です、しかし、誰が知っていますか
いつものように、どのように良い、または他のテクニックを確認するには何かアイデアがある場合は、私たちの残りの部分と共有することを確認してください!
おい!あなたがちょうどTwitterでチェックアウトを読んだことが好きなら🍻
写真でLindsay Henwood on Unsplash