Create-react-app with an older version of React

Introduction

Lately ( since the recent release of react 18 ) you might have noticed that create-react-app is using this very version?
This is the case but right now not all the packages are supporting this recent version of react.

For instance, whilst installing x package, we could have noticed few errors ongoing such as the following picture:
(note the different versions of react)

To avoid ending resolving all dependencies used by CRA related to react v18 use, I would definitely go to setup the project with create react app having an older version of react.

How do you downgrade react version in Create react app?

Yes you can still use create react app but you will need few adjustment and I’ll guide you through those few steps(8).

• 1️⃣ Create your app (here called "my-project") :

npx create-react-app my-project

• 2️⃣ Open your project with your editor (here, using VSCode): code my-project

in which you can see the following tree presentation

• 3️⃣ Adjust your package.json :
  • React and react-dom: set the "react" and "react-dom" versions stated to the version you want instead to their prior major version (here initially 18 --> 17).
  • testing-library/react: adjust @testing-library/react version to its prior major version ( here it was 13 which became 12 ) ( package handling the updated version of react ) which will not exist in our project anymore.

• 4️⃣ Remove 1 file and 1 folder:

  • "package-lock.json": Remove / delete package-lock.json as it kept in details what was installed when running the npx create-react-app command earlier.
  • "node_modules": Remove / delete your “node-modules” folder: in order to properly re-install the correct dependencies later.

• 5️⃣ Adjust your "src/index.js" as it was generated based on "react" and "react-dom" version 18 (the version 18th brought a change on how to render react app through the DOM with "createRootDom" method).

  • React and react-dom:should be imported from "react-dom" and not "react-dom/client".
  • root variable: Adjust the root variable by assigning the value of document.getElementById(‘root’)
  • Render: Adjust the render method by replacing root.render with ReactDOM.render

You should end up having that file as shown beneath

• 6️⃣ Re-install your dependencies by executing this command: npm install.
  (NB: You might have some warnings but do not worry too much about it as we are aware that latest versions may have solved them and here we wanted to install an older version ( compromises have to be made )).

• 7️⃣ Start your project:
  Run “npm start” your project should be up and running!

• 8️⃣ Run your test: running npm run test

Conclusion:

We've seen how to modify the generated folder project created with create-react-app and another version of react ( since react released react18 and today, April 15th, CRA is installing this very latest version of "react" ).
This might be temporary of this also could be relevant in the future ?! who knows 🙂.
Hope this if helpful and can help.

                             ✨🤓✨
     ✨Have a great coding path & may the code be with us !✨