Zenn
🤖

『モダンJavaScriptの基本から始める React実践の教科書』で、最新環境だと4章序盤が動かないので、動くように読み替えたことメモ

に公開
JavaScript
React
本
tech

※　「動かない」原因は、自分の誤入力などの可能性もあります
※　調べた範囲で「ReactDOM.renderが非推奨」や、そもそもの「create-react-app自体が非推奨」になったことが原因だと推測しますが、詳細やその発生理由までは追っていません

読み替えたこと一覧

前提：create-react-app で初期ファイルを作成し、出来るだけそのまま使う。（95ページの『現在の構成』に合わせない）

  1. 96ページ～：修正対象ファイル
- index.js
+ App.js

※ 99ページ以降はApp.jsが修正対象ファイルになるので、そこまでは気にせず読み進む方が楽
※ 101ページの内容からapp.jsxでもOK

  1. index.jsのimportとrenderを、create-react-appのindex.jsそのままを使う
- import ReactDOM from 'react-dom';
（中略） ※ App.jsに移植するコード
- ReactDOM.render(<App />,document.getElementById("root"));
+ import React from 'react';
+ import ReactDOM from 'react-dom/client';
+ import './index.css';
+ import App from './App';
+ import reportWebVitals from './reportWebVitals';
+ 
+ const root = ReactDOM.createRoot(document.getElementById('root'));
+ root.render(
+   <React.StrictMode>
+     <App />
+   </React.StrictMode>
+ );
（後略）
  1. App.jsのexportを、create-react-appのApp.jsそのままを使う
- export const App = () => {
+ const App = () => {
（中略）
  );
};
- 
+ export default App;

※　最終行に追加

備考

『モダンJavaScriptの基本から始める React実践の教科書』を進めていたのですが、2021年発刊とそれなりに古いためか、chapter4の記載の内容そのままだと先に進められませんでした。
（Amazonレビュー曰く、chapter5のCSSもそうらしい）
そこで一部の内容を読み替えることで、何とか先に進めることが出来ました。同じ本で学習を進める他の方も、同じような所で困るように思ったので、備忘録的にここに残します。
後追いで思い出しながら書いているので、もしかしたら記載内容に不足があるかもしれません。もし不足してたら、ご指摘いただけると助かります。

Discussion